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