Is that possible to display image thumbnail without uploading it to the server ?

Question

I want let user to upload images to server add some info (like description, tags) about each image.
I use Uploadify to upload multiple images.

I wonder if it is possible to show thumbnails of the images (while the user enters the additional info about each image) before the images are actually uploaded to the server.

I want user to have the following experience:

• Select multiple image files
• Immediately after that enter additional information about each image while seeing images thumbnails
• Press Upload Files button to upload images to server, and go to drink coffee...

I found this script, but I think it also uploads the file before displaying the image thumbnail.

I would appreciate any help !

Answer 1

It is not possible.

Answer 2

If you could enforce an HTML 5 capable browser you could use the file-api

Example: http://html5demos.com/file-api

Answer 3

Sure it is possible. Use the FileReader object to get a data URL (or use File.url if you are sure the Client implements it.) and assign it to an new Image()object. Then you can insert the image into DOM.

Answer 4

I'm pretty sure flash and java can both do it. Flash would require certain (obvious) security precautions (ie, you can do this for any file, it must be selected by the user). Meanwhile java would show a security popup.

Answer 5

As an alternative to the standard-based HTML5 APIs, you can use a plugin such as Flash or Browserplus.

There is actually a ready-made application which might do exactly what you want. It's called Plupload. You can upload your files / images using a variety of "runtimes", and do client-side image resizing before uploading. I guess you can hook a thumbnail preview somewhere in there, in certain runtimes.

Otherwise, you can try building what you want from scratch, using the HTML5 / Gears / BrowserPlus / etc. APIs.