Accessing a local image dynamically from an <img> tag

Hi,

I'm trying to setup a script that will dynamically show the user a thumbnail of an image before it is uploaded.  This is handy since the user can see a preview of the image (to make sure it's the one they expected) before they upload it.  I'm dealing with some non-savvy computer users, so this functionality is highly desired.  It works fine with Internet Explorer, but with Firefox and other Mozilla browsers it won't display the image.

COBOLdinosaur, this sounds like it may be up your ally :)

Here's a snippet of code that works in IE:

<script>
  function show(id) { document.getElementById(id).style.display = 'block'; }
  function hide(id) { document.getElementById(id).style.display = 'none'; }
</script>

<div id="div_upload_file">
    <font style="font-variant:small-caps; font-size:16px; font-weight:bold;">Image to Upload</font><br />
    <input id="upload_file" type="file" size="48" name="upload_file" value="" onchange="hide('div_upload_file'); var img = document.getElementById('upload_preview'); show(img.id); img.src = this.value; img.alt = this.value;" style="border:1px solid black;" />
</div>
<img id="upload_preview" src="#" style="width:200px; height:131px; display:none;" alt="" />

Is this some kind of security "feature" of Mozilla based browsers, or am I just setting the <img> src incorrectly?  Cd&?
-Doug
LVL 5
dougdayAsked:
Who is Participating?
 
Jan LouwerensSoftware EngineerCommented:
After some testing, I found that to be the case.  It does work when viewing that html file as a local file.  But when viewing it from a web server, displaying the local image doesn't work.

And viewing the Firefox JavaScript Console gives a:
Security Error: Content at <web_site> may not load or link to file://<local_file>.
0
 
Jan LouwerensSoftware EngineerCommented:
In your javascript, try:

img.src = 'file://' + this.value;
0
 
dougdayAuthor Commented:
Thanks for responding.  Already tried that.  No luck.  I've also tried escaping all spaces in this.value into "%20", but that didn't help either.
-Doug
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Jan LouwerensSoftware EngineerCommented:
I tested it in Opera 7.54 and Firefox 1.02 and it worked ok for me. I even tested with paths and filenames with spaces and withought any special encoding, and they all worked ok.

But then again, my original test html file I was using was also a local file, so that may have an affect on it also.
0
 
dougdayAuthor Commented:
Hm... maybe I need to upgrade my Firefox.  Now that I think about it, I'm still on 1.0.  I'll try that and see if that works.

Thanks again :)
-Doug
0
 
Jan LouwerensSoftware EngineerCommented:
Here's my full test, just so you can see the results I got:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>blah</title>
</head>
<body>

<script type="text/javascript">
   function show(id) { document.getElementById(id).style.display = 'block'; }
   function hide(id) { document.getElementById(id).style.display = 'none'; }

   function displayThumbnail(element)
   {
      hide('div_upload_file');
      var img = document.getElementById('upload_preview');
      show(img.id);
      img.src = 'file://' + element.value;
      img.alt = element.value;
   }
</script>

<div id="div_upload_file">
    <font style="font-variant:small-caps; font-size:16px; font-weight:bold;">Image to Upload</font><br />
    <input id="upload_file" type="file" size="48" name="upload_file" value="" onchange="displayThumbnail(this);" style="border:1px solid black;" />
</div>
<img id="upload_preview" src="#" style="width:200px; height:131px; display:none;" alt="" />

</body>
</html>
0
 
GrandSchtroumpfCommented:
It should work from the local file system indeed, but it throws a security exeption when an online page tries to include local resources... not much you can do about it.
0
 
dougdayAuthor Commented:
hm... that's a bummer.  Anyone have some ideas on how I might display a thumbnail to the user before they upload their file (without java or flash)?  I know that answer's probably "no", but maybe there's something I'm overlooking.

-Doug
0
 
StormyWatersCommented:
I suppose you could tell people that if they want that functionality they need to follow the instructions here:

http://kb.mozillazine.org/Firefox_:_Issues_:_Links_to_Local_Pages_Don%27t_Work

But that's a more computer-savvy thing, and you said they weren't. :)
0
 
COBOLdinosaurCommented:
The issue is that a correct security model (something IE does not have) will not alllow access to resource on the local computer from a web except for very narrow permissions.  The hrddrive can be access for cookies Iif the suer permits it and files can be uplaoded (if the user permits it).  The ability to do what you are doing in IE has also been exploited to steal information and phishing.

the bit difference in the IE approach in the Moz approach it the tainted bit that come fromthe original Netscrap security model (perhaps even predates it).  Thea it works is anything that is obtained using the privelege manager, is tainted and cnnot be use dfor anything else,  That simple model can at times be frustrating, but it is the reason that FF is so secure.

Now I would suggest that is possible you could do a browser extenson to accomodate it.  If you have some C++ skills you might propose it t mozilla they are sponsoring and support dozens of extension projects.  Their is also the remote possibility  thay you might be able to d a greaseMokey script that would allow it. What is happening now as the whole open source movement finally has somemtum is you jut cannot keep up with all the new stuff that is happing off of both mozdev and sourceforge; and a hundred smaller open source development communities.

Cd&
0
 
dougdayAuthor Commented:
Thanks for your comments everyone.  I guess I'll have to require that my users use IE for now, and investigate possible solutions to this problem.  I would love to have a Mozilla extension to accomodate this; however, IE seems to be (ever so slowly) getting their act together and making things more secure.  I think I'll have an instruction sheet for those who want it to be able to disable that security feature in Mozilla.  Thanks for that info StormyWaters.  I think I'll have to find a more permanent fix since this functionality may even disappear in the next version of IE.

Thanks :)
-Doug
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.