Topic: Image Preview befor upload
Is it possible to get an thumbnail preview of an image BEFORE uploading?
Re: Image Preview befor upload
This is not possible for due to a number of reasons.
1) IE doesn't support data: urls so we can't display a preview unless we first upload it to the server.
2) Some runtimes doesn't support direct data access such as Google Gears or HTML5 on WebKit. So we can't even access the image data directly.
Re: Image Preview befor upload
It seems this is possible using the BrowserPlus runtime.
http://browserplus.org/demo/photodrop/
I dont see any reason not to include these sort of features for the runtimes that can support them.. It provides some nice extras for those people who can require there web app to use a specific runtime..
Re: Image Preview befor upload
Modern browsers support (http://www.html5rocks.com/en/tutorials/file/dndfiles/) HTML5 FileReader,
should really re-evaluate image previewing 
Re: Image Preview befor upload
I have been using a FileReader to show image previews with the FilesAdded event.
You can't use the file object that plupload creates though you need to grab the native files object from the input itself. I just call a helper function from within the FilesAdded event.
uploader.bind('FilesAdded', function() {
handleFiles($('#uploadForm input:last')[0].files);
});Then I follow this example here. https://developer.mozilla.org/en/Using_ … ted_images
Last edited by bjodasso (2011-11-30 17:31:06)
Re: Image Preview befor upload
Dear bodasso,
Can you please mention the code in which one are you using it?Whether it is jquery UI or the jquery queue widget or in the custom upload?
Re: Image Preview befor upload
It's been two years since it first asked I wonder if plupload considering the fact to support image preview before upload, even if not for all engines.
Projects that offer that type of functionality already exists (https://github.com/blueimp/JavaScript-Load-Image , https://github.com/blueimp/jQuery-File-Upload) so I think plupload since it is so popular should support this functionality since it has been asked so many times.
@bjodasso fileList is an empty array for me...
Thanks
Re: Image Preview befor upload
As far as I know, flash (and maybe silverlight) can't be used to generate thumbnails before the upload because security restrictions. so you will need to do this in HTML5 runtime.
So what you need is (all this should be done in postinit event):
-find the input type file generated by the HTML5 runtime
-assign the old onchange event of the input type file to a variable
-create your on onchanve event not forgetting to call the old onchange event
- use any scipt to generate thumbnail, for example:
http://stackoverflow.com/questions/4459 … s-uploaded
Re: Image Preview befor upload
@LeandroJF hi, thanks for taking the time to reply this, well the thing is that I tried with chrome inspector to find the generated input file element but it was imposible and I'm sure there is an input file generated somewhere... yes I use html5 runtime to do it..
I will try with firebug too maybe I'll have better results, once I get the input file the rest are dead easy.
Re: Image Preview befor upload
on the console of firebug or chrome inspector, if you type:
document.getElementsByTagName("input")
you will see it on the list returned.
Re: Image Preview befor upload
If it would be so simple as this I would done it already 
Anyways, as I said is not that simple, in any case I did exactly the same thing as this guy did and everything works great https://github.com/moxiecode/plupload/pull/374
Re: Image Preview befor upload
Hi bjodasso,
Just like panosru, I get an empty array. Is your hack still working for you on the latest version of Plupload?