Easy HTML5 File Uploader Plugin With jQuery

A lightweight yet powerful jQuery plugin to create an HTML5 file uploader that features drag'n'drop, ajax uploading, multi-file upload, progress bar, useful options & event handlers and much more. The plugin provide the basic file upload functionality, while leaving the styling up to you.

How to use it:

1. Create a standard file input for the uploader.

<input type="file" multiple id="upload_field">

2. Create a container where you can add the files to the upload queue via drag and drop.

<div id="drop_area">Drag and drop file(s) here</div>

3. Create the HTML for the progress report to display the progress status of file uploading.

<div id="progress_report">
  <div id="progress_report_name"></div>
  <div id="progress_report_status"></div>
  <div id="progress_report_bar_container">
    <div id="progress_report_bar"></div>
  </div>
</div>

4. Initialize the HTML5 uploader.

var $input = $("#upload_field").html5_upload({
    // options here
});

5. Enable the drag'n'drop file upload functionality with HTML5 drop event.

$.event.props.push('dataTransfer');

var $drop = $('#drop_area');
$drop.on( 'dragover dragenter', function(e){ 
  $drop.addClass('file_hover'); 
  return false;
}).on( 'dragleave dragexit', function(e){ 
  $drop.removeClass('file_hover');
  return false;
}).on( 'drop', function(e){            
  if(e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
      $input.trigger('html5_upload.startFromDrop', e );
  }
  return false;
})

6. Default options to customize the HTML5 uploader.

var $input = $("#upload_field").html5_upload({

    // where send files, or function which will return it
    url: null,

    // auto start uploading
    autostart: true,

    // auto clear upload queue
    autoclear: true,

    // stop uploading if an error occurred
    stopOnFirstError: false,

    //  format headers to emulate usual form file sending
    sendBoundary: false,

    // ignore if sendBoundary is false
    fieldName: 'user_file[]',

    // extra fields to send with file upload request (HTML5 only)
    extraFields: {}, 

    // upload method
    method: 'post',

    // status text
    STATUSES: {
      'STARTED'   : 'Started',
      'PROGRESS'  : 'Progress',
      'LOADED'    : 'Loaded',
      'FINISHED'  : 'Finished'
    },

    // http headers
    headers: {
      "Cache-Control":"no-cache",
      "X-Requested-With":"XMLHttpRequest",
      "X-File-Name": function(file){return encodeURIComponent(get_file_name(file))},
      "X-File-Size": function(file){return get_file_size(file)},
      "X-CSRF-Token": $('meta[name="csrf-token"]').attr("content"),
      "Content-Type": function(file){
          if (!options.sendBoundary) return 'multipart/form-data';
          return false;
      }
    }

});

7. Event handlers.

var $input = $("#upload_field").html5_upload({

    onStart: function(event, total) {
        return true;
    },
    onStartOne: function(event, name, number, total) {
        return true;
    },
    onProgress: function(event, progress, name, number, total) {
    },
    onFinishOne: function(event, response, name, number, total) {
    },
    onFinish: function(event, total) {
    },
    onError: function(event, name, error) {
    },
    onBrowserIncompatible: function() {
        alert("Sorry, but your browser is incompatible with uploading files using HTML5 (at least, with current preferences.\n Please install the latest version of Firefox, Safari or Chrome");
    },
    
});

8. You can also set the messages using the following functions.

var $input = $("#upload_field").html5_upload({

    // automatically set messages.
    setName: function(text) {},
    setStatus: function(text) {},
    setProgress: function(value) {},
    genName: function(file, number, total) {
        return file + "(" + (number+1) + " of " + total + ")";
    },
    genStatus: function(progress, finished) {
        if (finished) {
            return options.STATUSES['FINISHED'];
        }
        if (progress == 0) {
            return options.STATUSES['STARTED'];
        }
        else if (progress == 1) {
            return options.STATUSES['LOADED'];
        }
        else {
            return options.STATUSES['PROGRESS'];
        }
    },
    genProgress: function(loaded, total) {
        return loaded / total;
    }

});

---

This awesome jQuery plugin is developed by mihaild. For more Advanced Usages, please check the demo page or visit the official website.