Multiple image upload with drag-and-drop

ImageUpload.js

/* 
  Requires Prototype

  Usage:
  var upload = new ImageUpload({
    dropElement: $('image-container'),
    onFinished: function(){ alert("YAY") }, // optional
    uploaderURL: "./upload.php",  // optional; if not specified, location.href.
  }); 
  upload.startUpload({ someParam: 12345 });
  
  UploaderURL will receive post requests with:
    imageID: unique incrementing ID of pic
    imageFilename: original filename of pic
    imageData: base64 encoded image ("data:image/jpeg;base64,...")
*/
ImageUpload = Class.create({
  initialize: function(options)
  {
    this.options = Object.extend({
      uploaderURL: location.href,
      onFinished: function(){},
    },options || {});

    if(!this.options.dropElement)
      return;
    if(!this.form)
      this.form = $(this.options.dropElement).up("form");
    if(!this.form)
      return;

    $(this.options.dropElement).observe("dragover",  (function(e){ $(this.options.dropElement).setOpacity( 0.5 ); Event.stop(e); }).bind(this));
    $(this.options.dropElement).observe("dragleave", (function(e){ $(this.options.dropElement).setOpacity( 1.0 ); Event.stop(e); }).bind(this));

    $(this.options.dropElement).observe("drop", (function(e){
      Event.stop(e);

      $(this.options.dropElement).setOpacity( 1.0 );
      $(this.options.dropElement).down('span').hide();
      for (var i = 0; i < e.dataTransfer.files.length; i++)
      {
        var reader = new FileReader();
        reader.index = i;
        reader.file = e.dataTransfer.files[i];
        var funcLoadEnd = (function(e2){
          var div = new Element('div',{class:'image'});
          div.store("fileData",e2.target.result);
          div.store("fileName",reader.file.name);
          var html = "";
          html += "<img src='" + e2.target.result + "' alt='screenshot'/>";
          html += "<span class='delete'>X</span>";
          div.update( html );
          $(this.options.dropElement).insert(div);
          div.select('.delete').each(function(item){
            item.addClassName('clickable');
            item.observe('click',function(){
              item.up(".image").remove();
              if ($(this.options.dropElement).childElements().length == 0)
                $(this.options.dropElement).down('span').show();
            });
          });
          div.observe("mousedown",(function(e3){
            e3.stop();
            this.floater = div;
          }).bind(this));          
        }).bind(this);
        if (reader.addEventListener)
          reader.addEventListener("loadend", funcLoadEnd, false);
        else
          reader.onloadend = funcLoadEnd;
        reader.readAsDataURL(reader.file);
      }
    }).bind(this));
    document.observe('mouseover',(function(e){
      if (this.floater)
      {
        var above = e.findElement('.image');
        if (above && above != this.floater)
        {
          var container = above.parentNode;
          var idx = container.childElements().indexOf(above);
          if (idx >= 0)
            container.insertBefore(this.floater,above);
        }
      }
    }).bind(this));
  
    document.observe('mouseup',(function(e){
      if (this.floater)
      {
        e.stop();
        this.floater = null;
      }
    }).bind(this));    
  },
  startUpload: function(uploadParams)
  {
    var n = 1;
    var total = $(this.options.dropElement).select(".image").length;
    var finished = 0;
    $(this.options.dropElement).select(".image").each((function(item){
      item.addClassName("uploading");
      new Ajax.Request(this.options.uploaderURL,{
        method: 'post',
        parameters: Object.extend({
          imageID: n++,
          imageFilename: item.retrieve("fileName"),
          imageData: item.retrieve("fileData"),
        },uploadParams || {}),
        onSuccess: (function(transport)
        {
          if (transport.responseJSON.error)
          {
            alert( transport.responseJSON.error );
            return;
          }
          if (transport.responseJSON.success)
          {
            item.addClassName("finished");
            finished++;
            if (finished == total)
            {
              if (this.options.onFinished)
                this.options.onFinished();
            }
          }
        }).bind(this)
      });
    }).bind(this));
  },
});