Jquery file upload preview thumbs

Question

In the example at http://blueimp.github.com/jQuery-File-Upload/ the file uploader creates previews of the images you are going to upload as thumbnails.

I know how to get thumbnails to show after upload because the done: callback returns some data about the file you uploaded, but how is it done before upload without actually uploading the file first (I didn't think this was possible without uploading first)?

Answer 1

I found the documentation on this to be very spotty. I figured it out by looking at the source for 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 into the DOM like this (in CoffeeScript):

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

If it doesn't work, then double check that you've included up-to-date versions of all of the dependencies.