Upload image thumbnail to server, without uploading whole image

Question

As far as I know, what I ask here isn't possible, but I thought I'd ask anyway in case I'm missing something.

Suppose you want to let users upload JPG images, and these images are scaled into smaller icons and the original images are always discarded and never required again. Is there any way that would commonly work in most modern browsers that would let the user select a single image on their hard drive, have that LOCALLY turned into a thumbnail and upload the created thumbnail to a server?

In a case where the server just needs a small image, it would be wasteful both in user time and server resources to proceed uploading the whole image, only to immediately discard it. It would be much better to just scale it on the client.

I can imagine three options. Just plain HTML/Javascript, using Flash or using Java. If this were possible with Flash, that would seem like the best option. But reading flash.net.FileReference documentation, it seems that you can upload a file from the HD yes, but you cannot look inside the file you are uploading. On the other hand, if you enable "can access local files" in Flash publishing options, it seems that you can then no longer access the net, so that doesn't work.

With HTML/Javascript, it is possible to load images and display them on a <canvas>, but if you try to access the pixels of these images, you get security violations, so that doesn't seem to work.

Java I hesitate to use, because only 96.52% of my users have it installed, and the file upload dialogs I have seen implemented in Java (at Facebook for example) have not worked well (unresponsive interface). I wonder though if Java is the only thing allowing resizing images from local HD?

Answer 1

I think if there was a reasonably reliable and user-friendly way to accomplish this, it'd be done on sites like Facebook already. People are used to having to upload the original image... it's always nice to be able to improve on an established UX, but if you can only match it, you're not exactly losing out.

JavaScript is out, because JS cannot read anything directly from the client; it can only direct the browser to load a pre-defined local path, or load bytes from the server.

Flash's security sandbox also prevents this, as you pointed out.

Java has a different set of problems - people rarely install applets these days unless they trust the site more than their own family members. It's also apparently extremely difficult to build something reliable and usable, as evidenced by Facebook-esque companies which have practically unlimited resources to throw at the problem and still fail.

So, in summary - no, and don't worry too much about it.

Answer 2

If the jpeg image is progressive, you could stop uploading after a certain amount of resolution is acquired. This will require a bit of your own processing of the jpeg loader and http handling code.

It's also a pretty big "IF", since most jpegs are not progressive by default.

Answer 3

"If this were possible with Flash, that would seem like the best option."

As I understand it, it is possible with Flash Player 10.

Here's an example:

http://blog.kukiel.net/2009/02/file-manipulation-client-side-with.html

Flash Player 10 currently has a general market penetration of about 85-90%, so if you hesitate to use Java because only 96.52% of your user have it installed, I guess you wouldn't want to require Flash Player 10 either.

Answer 4

Another way is to use Google's Gears, ex.: Gears Uploader.

Answer 5

I think that you can upload the image to server, then show it in the browser, then the user will be resize it using javascript, but not real resize, only capture the coordenate of it, then you can use the coordeante to resize the image in the server and save the new image (thumb) and discard the original.