jQuery.uploadPreviewer.js is a jQuery plugin that turns a file input into a file upload previewer.

Check the demo page here.

  <input type='file' />

  var myFileUploader = $('input[type=file]').uploadPreviewer(options, callback);

Submitting the files with optional callbacks

  var successCallback = function(data, status, jqXHR) { ... };
  var errorCallback = function(jqXHR, status, error) { ... };
  myFileUploader.submit(successCallback, errorCallback);

Listening to file submit complete event

  $(document).on('file-preview:submit:complete', function(e) {
    if (e.status == 'success') {
     // The event object has data, status and jqXHR
    } else if (e.status == 'error') {
      // The event object has error, status and jqXHR
    } else if (e.status == 'no-files') {
    }
  });

NOTE: It is not necessary to pass the url on initialize. It can be set before submit by calling the url function with the url as the argument.

A default row template is provided if you don't provide one. Otherwise, the variables provided to the template include are

• src (image source)
• name (filename)
• size (filesize)
• placeholderCssClass (it should be attached to the image, which will provide a placeholder based on the file type if the file is not an image).

Jiangping Hsu for supplying the file icons