Jquery file upload preview thumbs

jquery, jquery-file-upload

Solution

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.

Problem

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)?

Original source