PDA

View Full Version : Problem with writing back to opener from FireFox


Chief
02-20-2010, 12:29 AM
Hi

I have a popup that handles browsing for a file when opened, this in turn calls an upload PHP script that ends in the following JavaScript.

on the html side of the upload script there is a form which has the data written to it by PHP to be picked up by the Javascript. the following function is run from the BODY ONLOAD tag. and works perfectly in IE 8 and Chrome, but in firefox it fails to write to the opener so the popup stays open.

both variables are correct (have tested with document.write) but I think there may be a problem with the syntax I have used in the opener.document line.

Any one know what I have done wrong? (I have tried a number of different approches to the line without success)

//<![CDATA[
function transfer()
{
var lisa = document.photo.field1.value;
var kim = document.photo.picname.value;
if (opener && !opener.closed)
{
opener.document.forms['edit'].lisa.src = kim;
}
window.close();
}
//]]>

thanks in advance...

A1ien51
02-22-2010, 01:30 AM
If you look at the JavaScript error console in Firefox, what does the error say?

Eric

Chief
02-22-2010, 03:12 AM
Hi

Error message is:-

opener.document.forms.edit.lisa is undefined

which indicates to me it has not processed the variable, however when I click the link it shows the line as:-

opener.document.edit.elements['picture1'].src = kim;

Which is the correct field / form location.

Dormilich
02-22-2010, 09:59 AM
maybe opener.document.forms[0].edit.lisa?

Chief
02-22-2010, 10:33 AM
I have just modified it to :-


function transfer()
{
var lisa = document.photo.field1.value;
var kim = document.photo.picname.value;
if (opener && !opener.closed)
{
opener.document.forms[1].elements[lisa].src = kim;
}
window.close();
}


Which works in IE & Chrome but not Firefox, I would prefer to work witht the forms Name or ID as I am using the same code from different pages and whilst the form will always be called edit the field name changes on one itteration as I have 2 sepperrate upload picture fileds on it

error message in Firefox error console :-

opener.document.forms[1].elements[lisa] is undefined


N.B. there is another form in the header which allows the menu's language to be changed hence the [1] as opposed to the suggested [0]

Kor
02-22-2010, 10:40 AM
Check whether your form's elements have name attributes. Whenever a form's elements' reference works in IE but not in FF is due to the fact that IE, incorrectly, is able to take the ids as names, if the name is missing.

Chief
02-22-2010, 11:27 AM
Yes it does, code below is from the opener window, it has previously only had the name and not the ID, but added the ID during my own attempts to solve this prior to calling for help.


<form action="" method="post" name="edit" id="edit">

<img name="picture1" id="picture1" src="/inc/icon/addpic.png" border="0" width="80" alt="pic 1" class="floatright" onclick="openwindow(<?php echo $jparams;?>)" />

Kor
02-22-2010, 11:36 AM
OK. It would be of some help if you will post the HTML code (both opener and popup) or the significant part of it.

Chief
02-22-2010, 05:42 PM
Hi

I have created a simplified version of opener for testing http://playwin.vulcanriders.org.uk/test/test.php

Opener code:-

<title>upload test</title>
<link rel="stylesheet" type="text/css" href="my.css">

<!--load popup Javascript -->
<script language="JavaScript" src="/inc/code/popup.js" type="text/javascript"></script>

</head>
<body>
<form action="" method="post" name="edit" id="edit">
<?php $jparams = "'pic1','/inc/part/picupload.php?call=test&f=picture1','300','200'"; ?>
<img name="picture1" id="picture1" src="/inc/icon/addpic.png" border="0" width="80" alt="pic 1" class="floatright" onclick="openwindow(<?php echo $jparams;?>)" />
</form>
</body>
</html>


file browser code (first code into popup box)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?php
// has to be called as /inc/part/picupload.php?call=xxx where xxx defines output path below
switch ($_GET['call'])
{
case 'event':
$savepath = '/public/events/images/';
break;
case 'news':
$savepath = '/public/news/images/';
break;
case 'chapter':
$savepath = '/images/';
break;
case 'test':
$savepath = '/test/';
break;
default:
echo 'case '.$_GET['call'].' not known, edit /inc/part/picupload.php';
break;
}
if (isset($_GET['f']))
$field = $_GET['f'];
else
$field = 'picture1';

?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Upload Photo</title>

<script language = JavaScript>
function enablepost() {
var lisa = 'X' + document.getfile.file1.value;
if (lisa == 'X')
document.write('Select a file first');
else
document.getfile.submit.disabled="";
}
</script>
</head>
<body>
<h2>Upload an Image</h2>
<form name="getfile" action="/inc/code/upload.php" method="post" enctype="multipart/form-data">
<p><label for="file1">Upload Image:</label>
<input type="file" name="file1" id="file1" onchange="enablepost();" /><br>
<font size="1">Click browse to upload a local file</font></p>

<input type="hidden" name="savepath" value="<?php echo $savepath;?>" />
<input type="hidden" name="caller" value="<?php echo $_GET['call'];?>" />
<input type="hidden" name="field" value="<?php echo $field;?>" />


<p><input type="submit" name="submit" value="Upload File" disabled="disabled" /></p>
</form>

</body>
</html>


and finally the php that uploads the file and contains the problem javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?php
//create var to find doc root and add /news/images to make save path
if (isset($_POST['field']))
$field = $_POST['field'];
else
$field = 'picture1';

if (isset($_POST['savepath']))
$savepath=$_SERVER['DOCUMENT_ROOT'].$_POST['savepath'];
else
$savepath = 'skip';
$saved[1] = 'notused';
if ($savepath != 'skip')
{


$filename[1] = $_FILES["file1"]["name"];
$filetype[1] = $_FILES["file1"]["type"];
$filesize[1] = $_FILES["file1"]["size"];
$filetmp[1] = $_FILES["file1"]["tmp_name"];
$saved = '';
if ($filename[1] <> '')
{
if ((($filetype[1] == "image/gif")
|| ($filetype[1] == "image/png")
|| ($filetype[1] == "image/x-png")
|| ($filetype[1] == "image/jpeg")
|| ($filetype[1] == "image/pjpeg"))
&& ($filesize[1] < 50000000))
{
$target = strtolower($filename[1]);
str_replace('_', ' ', $target);
$plus1 = 0;
while (file_exists($savepath . $target))
{
$plus1 = $plus1 + 1;
$target = $plus1.$target;
}

move_uploaded_file($filetmp[1], $savepath . $target);
$saved[1] = $_POST['savepath'] . $target ;
}
else
{
echo $filename[1] . ' is an invalid file';
}
}
}
?>

<head>
<title>UPLOAD</title>
<script type="text/javascript">
//<![CDATA[
function transfer()
{
var lisa = document.photo.field1.value;
var kim = document.photo.picname.value;
if (opener && !opener.closed)
{
opener.document.edit.elements[lisa].src = kim;
}
window.close();
}
//]]>

</script>

</head>
<body onload="transfer();">

<img src="<?php echo $saved[1];?>" alt="pic" id="pic" />

<form action="self" id="photo" name="photo" enctype="multipart/form-data" method="post">
<input type="text" name="picname" id="picname" value="<?php echo $saved[1];?>" />
<input type="text" name="field1" id="field1" value="<?php echo $field;?>" />
</form>

</body>
</html>

glenngv
02-25-2010, 12:49 AM
<img> is not a form control. Try:

opener.document.images[lisa].src = kim; //lisa is the img name

or

opener.document.getElementById(lisa).src = kim; //lisa is the img id

Since your img tag has both name and id attribute, you can use either of the above. Though I prefer the second one.

Chief
02-25-2010, 11:27 PM
Thank you, I also prefered the second one, and it worked properly...

Don't know why I didn't get it I think the fact that it worked in every other browser made me go blind to the fact that it wasn't a proper form element.

many thanks to all contributors.

To recap if this is read by someone searching a simular problem in the future

As I was writing back to an img src as opposed to an forms input element I needed to use the getElementById and not the FormName.ElementName

in this case


var lisa = document.photo.field1.value;
var kim = document.photo.picname.value
opener.document.getElementById(lisa).src = kim; // the variable lisa holds the ID name of the img element

Dormilich
02-26-2010, 05:09 AM
don’t forget the quotation marks

opener.document.getElementById("lisa").src = kim; //lisa is the img id

Chief
02-26-2010, 09:59 PM
Dormilich: lisa is actually a variable so quotes are not needed on this particular code line.


aniesmth1: I owe the forum for saving me chasing my tail for days.... so as payback I am very happy to write more info. what else do you want to know?

Sarah_au
02-28-2010, 04:36 PM
aniesmth1 is a spambot but seeing as how you like to help I wondered if you could solve my problem also as it seems to be along the same lines.

I have a little javascript that displays an image that has been selected for upload prior to the upload.

<head>
echo "<script>
function view_img(img_name){
document[img_name].src = upForm.imgfile.value;
document[img_name].width = 150;

}
</script>
</head>
<body>
<form method="post" name="upForm" enctype="multipart/form-data" action="$_SERVER[PHP_SELF]>
<input type="file" name="imgfile" onchange="javascript:view_img('img_vv');"> <img src='id="img_vv"' name='img_vv' width='0'><br>\n
Image width will resize to <b>$img_thumb_width</b> with height ratio.
<br><input type="Submit" name="upForm" value="Upload & Resize">

If I use IE it works fine, the image appears and right clicking to see the properties shows it is reading the image from the local machine
IE file:///C:/nameofimage.jpg
However in FireFox I get the broken image box and right clicking for properties shows the path as being the location of the html file on the webserver IE http://mydomain/members2/sarahs_place.jpg

Sorry but I know little about javascript.

regards

Sarah

Chief
03-07-2010, 07:49 PM
Hi Sarah

Yes it seems to be the same problem, so I think your line should read:-


document.getElementById(img_name).src = upForm.imgfile.value;

Sarah_au
03-07-2010, 10:42 PM
Hi Sarah

Yes it seems to be the same problem, so I think your line should read:-


document.getElementById(img_name).src = upForm.imgfile.value;


Nope sorry that didn't work. Instead of a broken image I got nothing.

Dormilich
03-08-2010, 05:51 AM
<img src='id="img_vv"' name='img_vv' width='0'>

this will always be broken, src is not a valid URL

Sarah_au
03-08-2010, 08:12 AM
this will always be broken, src is not a valid URL

Please read the first post I made before posting unhelpful comments.

You can test the coding yourself at http://tscollect.com/upload.php
try it with IE It works with 6 but I haven't tested it with 7
It works with Netscrape
It doesn't work with firefox 3.5 I don't know about higher.


<head>
<script language="JavaScript">
function view_img(img_name){



document[img_name].src = upForm.imgfile.value;
document[img_name].width = 150;

}
</script>
</head>
<body>
<form method="post" name="upForm" enctype="multipart/form-data" >
<BR><BR><input type="file" id="imgfile" name="imgfile" onchange="javascript:view_img('img_vv');">
<img src='' name='img_vv' width='0'>
<br><BR><input type="Submit" name="upForm" value="Upload & Resize">
</form>
</body>

Kor
03-08-2010, 08:35 AM
<img src='' name='img_vv' width='0'>

What do you expect to see when the width of the image is set to 0? But the most important thing is that the input's value will be an internal relative link (to the user's PC), not a real URL.

Dormilich
03-08-2010, 09:09 AM
Please read the first post I made before posting unhelpful comments.

invalid code is invalid code, despite your first post. and while I’m at it, nowadays you use <script type="text/javascript"> the language attribute is deprecated, and the required action attribute in <form> is also missing.

what I see in FF is probably what is intended, there comes up an image (150 x 150) which is broken due to the upload not working.

Chief
03-13-2010, 01:49 PM
Not exactly a helpfull answer but...

When I tried the webpage,

IE8 properties gives me of file://insanity/Photos/vinnie.jpg so displays the pic from my local file copy (insanity is my windows server name)

FF view image info gives me http://tscollect.com/vinnie.jpg which is obviously a broken link as there has not yet been any upload.

Chrome gives me http://tscollect.com/vinnie.jpg as well

As IE is an integrated part of the windows file system it accesses local files in exactly the same way as it accesses net files. I then took the path file://insanity/Photos/vinnie.jpg and fed it direct into the browsers, Chrome displayed the picture, FF did nothing.

I strongly suspect that as part of the security on FF it will not access local files at all.

So the best bet is to upload to a temporary dir on the webserver, display it from there and process as required before moving it to the final upload destination.

Dormilich
03-13-2010, 02:02 PM
I strongly suspect that as part of the security on FF it will not access local files at all.

that depends … if you load a page from file, you can access local images/files via file://. using localhost you can access local files in the server directory relatively (well, that’s not "local" after all) but, as you said, files via file:// are disabled.

Sarah_au
03-15-2010, 05:26 AM
Not exactly a helpfull answer but...

When I tried the webpage,

IE8 properties gives me of file://insanity/Photos/vinnie.jpg so displays the pic from my local file copy (insanity is my windows server name)

FF view image info gives me http://tscollect.com/vinnie.jpg which is obviously a broken link as there has not yet been any upload.

Chrome gives me http://tscollect.com/vinnie.jpg as well

As IE is an integrated part of the windows file system it accesses local files in exactly the same way as it accesses net files. I then took the path file://insanity/Photos/vinnie.jpg and fed it direct into the browsers, Chrome displayed the picture, FF did nothing.

I strongly suspect that as part of the security on FF it will not access local files at all.

So the best bet is to upload to a temporary dir on the webserver, display it from there and process as required before moving it to the final upload destination.

Hi Chief,
thanks for testing it. At least now I know it's not just on the older versions it's happening.
Your suggestion about uploading the image before accessing it is something I had thought about but it really irks me to do that when there must be a logical explanation somewhere.

regards

Sarah