Grow your CSS skills. Land your dream job.

Local Previews of Images from File Inputs (fail)

Published by Chris Coyier

A little while back there was a guest post about Ajax image previews. It's a nice technique but it left myself and a few other commenters thinking: wouldn't it be cool if you didn't have to upload the image at all to preview it? After all, the image is on the persons computer already why can't we just snag the local file path and use that as the src of an image.

Well, it's that snagging of the file path that is the problem. I did some research and testing in different browsers and I thought I'd document the results.

Genesis

The idea comes from the fact that you can see see the file path in the file input after you select it.


Your eyeballs can see it, but JavaScript cannot.

Security issue

In all my naivety, I just though "Hey we'll just get the value of the input and use that as the src of an image element next to the input!" As I quickly learned, there are some security concerns with allowing the browser to see a local file path like that. A malicious script could learn a good deal about your local file system if a file input was willing to cough up data like that.

What browsers actually do

Internet Explorer & Opera

Both these browsers will return a value like this when trying to access the value of the file input:

C:\fakepath\image.png

This article has a bit more information on the subject. Apparently if you add the site in question to the "Trusted sites" list in Internet Explorer it will return the file path. But of course you can't expect users to do that.

WebKit (Safari / Chrome)

Return no value whatsoever for the file input value.

Firefox

Firefox is unique in that it returns only the filename for the file inputs value. While clearly that won't work to get a local image preview working, this thread on StackOverflow lead to an interesting solution.

While it won't give you the file path, Firefox will let you use a function called 'getAsDataURL()' on the files attribute of the DOM on that input.

// Browser supports `files` as part of DOM
if (this.files) {
    
   //  This works in Firefox, #image-preview is an <img src="" />
   $("#image-preview").attr("src", this.files[0].getAsDataURL());
      
}

View Demo (only Firefox does anything)

Comments

  1. Tcooper
    Permalink to comment#

    Tried to do the exact same thing a month or two ago, for me it just wasn’t worth it to add the feature for a single browser. Especially since the app required the feature (ended up using AJAX and just showing after upload) it didn’t make sense to write it in two completely different ways.

  2. Permalink to comment#

    Seems like it would be a nice feature, but given bandwidth and storage costs are so low it just seems easier to go ahead and upload the image and give them a preview that way. Chances are the user knows what they’re uploading anyways.

  3. I’m curios, what these security issues are? Even if the script could learn about your OS, it can’t do anything with it (except from reporting it, but, what’s the benefit of reporting it?)

    • I’m sure a compelling reason could be presented. Like what if you selected an image from the folder H0t-donkey-pr0n that could be reported along with your IP and you look like a person to look out for.

    • haha, I thought you were located in Chicago, have you been to Tijuana recently or something?

    • TeMc
      Permalink to comment#

      Another thing one could learn this way is a person’s real name and structure habbits.

      An example:

      /Users/johndoe/Pictures/temporarystuffAfterHarddriveFailure/Desktop/mypicture.png

      That exposes a lot of information like:
      * Unix based
      * Mac OS
      * Had a harddrive failure
      * Has a habit of storing all stuff on his/her desktop
      * The shortversion of his computer username

      C:\Documents and Settings\John Doe\you get the idea

      * All of the above example
      * The user’s full real name

  4. Seeing as HTML5 is the hip thing nowadays, why not utilize it?

    It gives Javascript dedicated FileAPIs for this sort of thing.

  5. Toni Kukurin
    Permalink to comment#

    You are going to probably want to kill me right now, but I say this is way easier (and safer, I suppose) to do with Silverlight.

    Of course, there are some limitations as to what computers have SL installed, but I suppose even that beats the fact only Firefox users might take advantage of this application…

    Please don’t kill me :)

    • Yeah, you could use Flash or Java too, but you are requiring extra plugin to be installed (and can’t use flash in, for example, an iPhone/iPad)

    • Toni Kukurin
      Permalink to comment#

      I know, and Silverlight is the most imperfect one here since it’s installed on only around 60% of PC’s, I believe. (I don’t know what’s the deal with Silverlight and Macs)

      Flash would therefore be the perfect choice, if Apple didn’t ban it from its devices.

      But both of these in my opinion still beat allowing only Firefox users to have this feature (after all, Internet Explorer holds a big amount of browser share, and Chrome is getting places, too).

      Anyway, the best idea is maybe doing something like WordPress does; offer both a Flash uploader (with image preview) and a non-Flash uploader (without image preview).

    • I say: Use HTML5 for all browsers, and have Flash as the fallback.

  6. Chris,

    Firefox since 3.6 and Webkit browsers on nightlies support the FileAPI. Is pretty much the same as the getDataURL call but is standard and adds another layer of indirection.

    Shameless plug: I did a write up on how this was done for http://border-image.com at http://www.incaseofstairs.com/2010/05/border-image-generator-local-file-access/

  7. The Firefox method lagged a bit but held up with a 10,000×10,000px image. Quality.

  8. Permalink to comment#

    Get the input contents as svg, send them your server as image(s).
    Use Image library to crop/unite the needed areas.
    Use a CAPTCHA analyzer to get the text.

    Too much…

  9. few years back i used to search the same thing around 4 or 5 years back. i don’t remember the exact browser but may be it was internet explorer 5 or 6 without any service packs. and we were able to fetch image using file input. but path was like file://c://image/1.jpg

    but problem was many people realize at that time it’s big security hole as anybody could read user’s hard disk using this. the problem was if i can access that way i can access file like file://c://users.txt or file://C://windows/*.*

    and when Microsoft realize that they patch it asap i guess. since then there is no way you can do that but today i read your article and it’s kinda remembering the old days. but i still think what about the security aspect ? i wonder Firefox has think about those security things or not or else we will have plethora of hacking scripts about this little monster feature.

  10. FileAPI is an approach for Gecko and WebKit. One can us it to access local files after selecting them using file input or drag & drop from file system (file browser, desktop, etc)

    The demo below can access any file type and display it (image as an image, recognizable video and audio (ogg and ogv) as video or audio, text files as text files and orher as binary)

    http://www.webnt.cz/demos/010_files/file_content.php

  11. Permalink to comment#

    This is somthing i’ve been trying to work on for ages. Will let you know if i come up with any results :)

  12. Don’t work on Google Chrome, only display text.

  13. Permalink to comment#

    This article brings me back to the dawn of my designing years. When I was learning JavaScript on IE 5.2 for mac, I decided to test my hand at a creating a non-flash mp3 player. The idea was to load one mp3, extract the path, and then play all the mp3s in the directory. However, similarly to what you discovered, it turned out that IE 5 stored the file in a temporary directory for upload. I can’t remember if I got it to work in Netscape or not. Heck, I might just dig out the old powerPC 9600 and take a ride in the yesteryear cab this weekend.
    Anyhow, great article!

  14. Permalink to comment#

    nice on firefox, but firefox dont do anything.
    e.g. css animation like in safari CMIIW

  15. amt
    Permalink to comment#

    dear all,

    i want to ask about something with firefox 3.6

    i return the full file path from input file using html and javascript only, with firefox 3.6 , it must show a Dialog box to user with message “UNSAFE” and ask him to Allow or Deny.

    i want to prevent this dialog from appearing, i searched alot and entered forefox forums and group of security but none reply me, so please can you tell me what can i do ?

    thank you very much in advance ….

    heba

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".