Photo upload and Preview in Firefox, Issues with Photo upload and preview in Firefox Options

[axe]

Hi,

I am trying to build a photoupload page where the user can browse to pickup a photo.

Once photo is picked up in the onChange event, we are calling a java script function that executes
document.getElementById("H" + str).src = document.getElementById(str).value; to display the photo in the page.

While this works fine in IE, it does not display the photo/image in Firefox.

Anybody has any ideas regarding the event or displaying the photo in Firefox ?


Code --
Browse button:
<input type=file size="2" value="select" name="MainImage" id="MainImage" onChange="showImage('MainImage')" onClick="showImage('MainImage')">

Java script Function:
function showImage(str)
{
document.getElementById("H" + str).src = document.getElementById(str).value;
}

Any ideas/solutions?

Thanks

Anand

[Frederiek]

Can you post the address (url) of a page that demonstrates the problem?

[Christian J]

Other browsers than MSIE display the image path but don't load the image for some reason:

CODE

<script type="text/javascript">
function showImage(str)
{
    document.body.innerHTML+='<br>Uploaded image path: <samp>'+str+'</samp><br><img src="'+str+'" height="100" width="150" alt="">';
}
</script>
<input type="file" id="MainImage" onChange="showImage(this.value)">

A better slution might be to submit the selected image path to a server-side script and let that generate the image on a new page.

Side-note: I don't think you can set a VALUE attribute for a FILE INPUT element, since the value is what you get when choosing a file. Also the onclick event will trig before any file has been chosen.

[axe]

Hi,

I have sent the url via pm. Let me know if you got it.

thanks

Anand

[axe]

Hi Christian,

Yes, seems Firefox 2.0 has added some resrictions on accessing local files. That is what I'm going to check out now.

A better slution might be to submit the selected image path to a server-side script and let that generate the image on a new page.
>> I can try this, but we have to let the user select upto 6 images in that same page. So refreshing the page will not give a good user experience.

Side-note: I don't think you can set a VALUE attribute for a FILE INPUT element, since the value is what you get when choosing a file. Also the onclick event will trig before any file has been chosen.
>>> We are trying to show it in a <img type of field>

Thanks

Anand

[Frederiek]

Little Snitch alerts me of outgoing network connections on the site twice and then I get a 404 (page not found). That might have to do with the incorrect encoding of the ampersand sign, the url is cut with triple points.

Why is it so important to hide the url for others and PM it to me?
Can't you just create a sample page with only the necessary code and upload that somewhere temporarily? That way, others can join the thread and maybe help you better than I can.

[Christian J]

I didn't get a PM.

but we have to let the user select upto 6 images in that same page. So refreshing the page will not give a good user experience.

You could always use 6 FILE INPUT elements...

[axe]

http://www.pickuptruck.com:81/gj/classifie...ouploadtest.php

You can see the page here - In IE you can preview the picture once it is selected, but in Firefox - it does not display.

[axe]

Hi Christian

[/quote]
You could always use 6 FILE INPUT elements...
[/quote]

Yes, we are using 6 File input elements. Based on what I am seeing in other forums etc, Firefox 2.0 has a security restriction about accessing local files. So I am unable to display the photo for preview after the user selects the photo.

You can see it working (and not working) using the above url - works in IE , not in Firefox.

I am just wondering that there has to be a workaround or fix to display photos for preview, trying to find it.

Any help appreciated

thanks

Anand

[Darin McGrew]

FWIW, the image preview systems I've seen have uploaded the image to the server and then displayed a thumbnail generated by the server.

[Frederiek]

I get an error:

Line 7:
Value undefined (result of expression document.all) is not object.
http://www.pickuptruck.com:81/gj/classifie...ouploadtest.php

document.all is IE only. You need to use the DOM for Firefox (and my Safari).

[Christian J]

document.all is IE only. You need to use the DOM for Firefox (and my Safari).

In quirksmode Firefox apparently supports document.all (but not an if(document.all) test?). But it's better to use a Doctype and DOM scripting instead of the proprietary document.all.

That Firefox, Safari and Opera refuse to load the image is another issue. Maybe it's intentional.