jQuery plugin to turn a file i

jquery.uploadPreviewer.js

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

Check the demo page here.

Basic Usage Initialization

<input type='file' />

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

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') { } }); Options

Key	Description	Optional
preview_table	The table that will contain the file previews. e.g. "#pictures-table"	Yes
preview_row_template	A function that will return a template	Yes
url	URL where the post request is made to	No

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.

Preview Table Row Template

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). Credits

Jiangping Hsu for supplying the file icons