Is there a way to let a user view an image they are about to upload client side before uploading to the server?

Question

When a user is uploading an image, is there a way I can load the image client side and show it to them first, before uploading it to the server? Preferably using javascript/jquery only, but using flash would be acceptable too.

Answer 1

It is possible with the new FileReader interface defined in HTML5 and works on Firefox currently.

A file input has an associated files property which tracks the list of files currently selected for that input. To display a file from this list, create a new FileReader object, initialize its onload event handler, and read the file as a data URL.

// get the first file, foo is a file input field
var file = document.getElementById('foo').files[0];

// setup the reader and the load complete callback
var reader = new FileReader();
reader.onload = function(e) {
    var image = new Image();
    // string representing the image
    image.src = e.target.result;
    document.body.appendChild(image);
};

// read the file as a data url
reader.readAsDataURL(file);

Once the file is loaded, you will have access to its contents in a data url scheme, for instance:

data:image/jpeg;base64,...aqHI7sNyPGFjdtQvFr/2Q==

Create a new Image and set its src attribute to this data string.

See a working example here. Firefox only.

Answer 2

You can't really do this cross-browser in JavaScript alone due security restrictions that are in place, there are a few flash versions available though, here's one example (the free version does what you're after).

There are probably more free flash versions out there as well.

Answer 3

Since HTML 5 those things are possible, thanks to the File Object, File Reader and the ´files´ property of the input element.

See here for more information: http://demos.hacks.mozilla.org/openweb/ & http://hacks.mozilla.org/2009/12/file-drag-and-drop-in-firefox-3-6/.

Example (only for demonstration, requires FF 3.5+): See here: http://gist.github.com/536024

In case you wonder, File.url is brand new, with it you dont anymore need to read the whole file into the memory, and assign the whole DataUrl (data:image/src,base64;DF15EDFE86..) to the src property.

Answer 4

Well, the <img> tag needs a path to the image. That path can be to something on the web, or to a local file. So far, so good. The trick is, how do you tell your javascript the path on the local system, so it can set the IMG SRC attribute.

The path of the file <input> tag is unavailable to javascript (as a security precaution --- you don't want a want page upload files from you system behind your back).

On the other hand, if you can get your users to enter a correct file path name into a text <input> field, then it should be possible.