HTML5 Image Uploader jQuery

html5-image-uploader.jquery.js

$(document).ready(function() {
  
  var IS_IE = (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0);
  
  $.fn.postFile = function(options) {
    var $self = this;

    var defaults = {
      url: undefined,
      type: "POST",
      data: {},
      onBeforeSendAll: function($elem, files) {},
      onBeforeSend: function($elem, file, xhr, file_id) {},
      onProgress: function($elem, file, xhr, file_id, position, total, percentage) {},
      onSuccess: function(data, $elem, file, xhr, file_id) {},
      onError: function($elem, file, xhr, file_id) {}
    }

    var settings = $.extend({}, defaults, options);

    $self.on('change', function() {

      var files = $self[0].files;

      // Trigger event before sending all files
      if(settings.onBeforeSendAll.call(null, $self, files) === false) return false;

      for(var i = 0; i < files.length; i++) {

        var file_id = 'file-' + randomId(32);

        var file = files[i];
        var reader = new FileReader();
        (!IS_IE) ? reader.readAsBinaryString(file) : reader.readAsDataURL(file);

        reader.onloadend = function(evt)
        {
          // create XHR instance
          xhr = new XMLHttpRequest();

          // send the file through POST
          xhr.open(settings.type, settings.url, true);
          xhr.setRequestHeader("X-File-Name", file.name);
          xhr.setRequestHeader("X-File-Size", file.size);
          xhr.setRequestHeader("X-File-Type", file.type);
          xhr.setRequestHeader("X-File-Data", btoa(JSON.stringify(settings.data)));

          // let's track upload progress
          var eventSource = xhr.upload || xhr;
          eventSource.addEventListener("progress", function(e)
          {
            // get percentage of how much of the current file has been sent
            var position = e.position || e.loaded;
            var total = e.totalSize || e.total;
            var percentage = Math.round((position/total)*100);

            // here you should write your own code how you wish to proces this
            settings.onProgress.call(null, $self, file, xhr, file_id, position, total, percentage);
          });

          // state change observer - we need to know when and if the file was successfully uploaded
          xhr.onreadystatechange = function()
          {
            if(xhr.readyState == 4)
            {
              if(xhr.status == 200)
              {
                // Trigger successful function
                settings.onSuccess.call(null, JSON.parse(xhr.response), $self, file, xhr, file_id);

              } else {
                // Trigger error function
                settings.onError.call(null, $self, file, xhr, file_id);
              }
            }
          }

          // start sending
          if(settings.onBeforeSend.call(null, $self, file, xhr, file_id) === false) return false;
          (!IS_IE) ? xhr.send(window.btoa(evt.target.result)) : xhr.send(evt.target.result);
        }
      }
    });
  }
});

// Generate a random id
function randomId(length)
{
  length = length || 5;

  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for( var i=0; i < length; i++ )
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
}