Showing Plupload Image Previews Using Base64-Encoded Data Urls
View this demo in my Plupload Image Preview project on GitHub.
To experiment with this concept, I downloaded the latest version of Plupload, which was v2.0.0 Beta at the time of this post. As it turns out, v2 has a whole bunch of stuff that I had never seen before. This includes utility classes for things like drop zones, images, and file readers. And, as luck would have it, the "File" and "Image" classes supplied by mOxie (Plupload authors) do exactly what I want; you can use the mOxie objects to read-in the client-side file objects and retrieve their data urls in base64-encoded format. These data urls can then be used to render client-side thumbnails before the image is even uploaded to the server.
To see this in action, I've created a completely paired-down Plupload demo that does nothing more than initialize the Plupload library and hook into the file-selection event. And, once the files have been selected, I am rendering them - immediately - on the client using base64-encoded data urls. I'm not even uploading the files to the server.
NOTE: View this post to see a full Plupload demo.
Most of the code in the demo is just there to setup the demo. The real meat of the code takes place in the showImagePreview() function. There, we use the Image object to read-in the underlying File source. Then, the Image object translates the source into a data url.
Pretty cool stuff! And, there is more stuff in the v2 build of Plupload that I'll be playing around with. Such an awesome library!
Want to use code from this post? Check out the license.
Nice post. I am a bit Fran of plupload and This feature is very usefull. Does This work when Flash uploder is used or only html5 ?
I was able to get this to work with the Flash runtime; but, the image previews were of a lower quality than those produced in the HTML5 runtime.
Thanks for your post! It's not easy to find posts talking about plupload api!
Unfortunately I cant make this work with ie9... The onload event is not triggered, but the onerror one is. If I ouput the error I have this :
its not working in ie9
I know that I was able to get it run in the Flash runtime on IE. But, I *may* have been using IE10 in my Virtual Machine - I don't remember offhand. I'll see if I can get some time to try it.
I recently discovered plupload. It's very nice. However, when adding several images at the same time, the browser can freeze. This isn't an issue for me but my client seems to think "it's not right". I have been reading up on the .deferred() object in jQuery. But I'm not quite getting it.
Would it be possible to get some clues on how to execute the showImagePreview() function with a .deferred() object?