jquery-image-uploader

jquery-image-uploader is a jquery plugin to upload file. It supports drag&drop and file API. The plugin has a automatic "fallback" mode.

This plugin is not really production-ready.

Installation

bower install --save jquery-image-uploader

Or copy the dist/jquery.uploader.min.js file on your server.

Usage

Basic usage

$('#dropZone').imageUploader({
    fileField: '#files',
    urlField: '#url',
    url: 'ajaxUpload.php',
    afterUpload: function (data) {
        console.log(data);
    },
    error: function(msg) {
        alert(msg);
    }
});

If you drag and drop an image on the "dropZone" or if you use the classic file button, it will call the url, with the file as an argument. If you specify a url in the "urlField" field, it will call the url with a POST['url'] attribute containing the image url.

Possible options (with default values)

$('#dropZone').imageUploader({
    fileField: null, // the "simple" file input
    urlField: null, // a field which accept an "url", and trigger the upload
    urlFieldSubmit: null, // the submit button for urlField. If null, the urlField gets a "onChange" event
 
    hideFileField: true, // hide the file field to show only the drop zone
    hideUrlField: true, // hide the url field to show only the drop zone
 
    url: 'ajaxUpload.php', // the url called for ajax upload
 
    thumbnails: { // thumbnails options. Set to "false" to hide thumbnails
        div: null, // thumbnails div (ex: "$('#thumbnailsDiv')"), do not set to generate it
        width: null, // thumbnail width, null = image width
        height: null, // thumbnail height, null = image height
        crop: null // null|zoom|fit : null does not crop the image, zoom or fit crop if "width" and "height" are set
    },
 
    maxFileSize: 0, // an error is thrown if the file is bigger than max. 0 means no validation
    allowDuplicate: false, // set to true to allow multiple upload of a file
 
    // all callbacks. The most importants are 'afterUpload' and 'error'
    onFilesSelected: function() { return false; },
    onDragLeave: function(event) { return false; },
    onDragEnter: function(event) { return false; },
    onDragOver: function(event) { return false; },
    onDrop: function(event) { return false; },
    onUploadProgress: function(event) { return false; },
    beforeUpload: function() { return true; },
    afterUpload: function() { return false; },
    error: function(msg) { alert(msg); },
    thumbnailReady: $.noop // if you want to change the thumbnail action
});

Advanced usage

You can access the ImageUploader object by getting the imageUploader data attribute. You can then interact on the object itself.

Example

var imgUrl = 'http://octodex.github.com/images/original.png';
$('#dropZone').data('imageUploader').addFileByUrl(imgUrl);