Simple uploader

jquery.simpleUploader.js

/**
 * jQuery simpleUploader plugin
 * Base Backbone model, collection and views
 * Version: 1.0
 * Dual licensed under the MIT and GPL licenses
 */

/*

Simple Uploader
===============

Use this plugin to create a multipart form and upload a file on the fly.
Bind the plugin to an element like this:

$('button').simpleUploader({
    // File upload endpoint
    url: 'upload.php',
    // Loader selector
    loading: '.loading',
    // Name of the file input
    name: 'fileToUpload',
    // Callback to execute after upload
    callback: function (response) {
        console.log(response);
    }
});

*/

(function ($) {
    $.fn.simpleUploader = function (options) {

        // Extend the options with defaults
        var defaults = {
                name: '',
                method: 'POST',
                url: '',
                loading: ''
            },
            options = $.extend(true, {}, this.data(), options);

        // Bind the click event of the received element
        this.click(function (e) {
            var button = $(this),
                form = $('<form>');

            // Prevent default
            e.preventDefault;

            // Insert hidden multipart form
            form
                .hide()
                .attr({
                    method: 'POST',
                    enctype: 'multipart/form-data'
                })
                .ajaxForm({
                    url: options.url,
                    timeout: false,
                    uploadProgress: function (event, position, total, percent) {

                        // Increment progress
                        $(options.progressBar).css('width', percent + '%').text(percent + '%');
                    },
                    beforeSubmit: function () {

                        // Hide button and text
                        button.closest('.upload-container').hide();

                        // Show loader
                        $(options.loading).animate({opacity: 1});

                        // Show progress
                        $(options.progressBar).closest('.progress').removeClass('hidden');
                    },
                    complete: function (response) {

                        // Show button and text
                        button.closest('.upload-container').show();

                        // Hide loader
                        $(options.loading).animate({opacity: 0});

                        // Reset progress bar
                        $(options.progressBar).closest('.progress').addClass('hidden');
                        $(options.progressBar).css('width', 0).text('0%');

                        // Remove created form
                        form.remove();
                    },
                    success: function (response) {

                        // Execute callback
                        options.callback(response);
                    },
                    error: function  (xhr, status) {

                        // Execute error callback
                        options.errorCallback(xhr, status);
                    }
                })
                .appendTo('body')
                .append('<input>')
                .find('input')
                .attr({
                    type: 'file',
                    name: options.name
                })
                .on('change', function () {

                    // Check if the browser can access the HTML5 file API
                    if (this.files !== undefined && this.files[0] !== undefined && this.files[0].size !== undefined) {

                        // Check file size
                        if (this.files[0].size > options.maxSize) {

                            // Execute callback
                            options.oversized();

                            // Remove the form
                            form.remove();

                            // Return
                            return false;
                        }
                    }

                    // Send the form when file input changes
                    $(this).closest('form').submit();
                })
                .trigger('click');
        });
        return this;
    };
}(jQuery));