Preview files in jQuery

Question

In the example at http://blueimp.github.com/jQuery-File-Upload/ , the downloader creates previews of the images that you intend to upload as thumbnails.

I know how to get the thumbnails that will be displayed after loading, because the callback done: returns some data about the file you downloaded, but how to do this before downloading without actually downloading the file in the first place (I did not think that this is possible without downloading first)?

Answer 1

I found the documentation on this subject very spotty. I realized this by looking at the source of this demo .

First you need to include the following dependencies:

• JQuery
• jquery.ui.widget
• load-image (from https://github.com/blueimp/JavaScript-Load-Image )
• load-image-meta (from https://github.com/blueimp/JavaScript-Load-Image )
• canvas-to-blob (from https://github.com/blueimp/JavaScript-Canvas-to-Blob )
• jquery.iframe transport
• jquery.fileupload
• jquery.fileupload process
• jquery.fileupload image

Then you can insert the preview image in the DOM, like this (in CoffeeScript):

 $(...).fileupload().on 'fileuploadprocessalways', (e, data) -> file = data.files[data.index] if file.preview? myContainer.append(file.preview) 

If this does not work, double check that you have included updated versions of all the dependencies.