[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Accessing a local image dynamically from an <img> tag

Posted on 2005-05-02
11
Medium Priority
?
2,645 Views
Last Modified: 2013-12-03
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
0
Comment
Question by:dougday
11 Comments
 
LVL 5

Expert Comment

by:Jan Louwerens
ID: 13913639
In your javascript, try:

img.src = 'file://' + this.value;
0
 
LVL 5

Author Comment

by:dougday
ID: 13913720
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
 
LVL 5

Expert Comment

by:Jan Louwerens
ID: 13913744
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 5

Author Comment

by:dougday
ID: 13913756
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
 
LVL 5

Expert Comment

by:Jan Louwerens
ID: 13913759
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
 
LVL 5

Accepted Solution

by:
Jan Louwerens earned 1000 total points
ID: 13913779
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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13913802
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
 
LVL 5

Author Comment

by:dougday
ID: 13913823
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
 
LVL 13

Assisted Solution

by:StormyWaters
StormyWaters earned 600 total points
ID: 13913878
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
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 400 total points
ID: 13914259
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
 
LVL 5

Author Comment

by:dougday
ID: 13914483
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question