Skip to content

Instantly share code, notes, and snippets.

@Gargaj
Last active August 29, 2015 14:23
Show Gist options
  • Save Gargaj/0a70c1b54b5b94ddf52a to your computer and use it in GitHub Desktop.
Save Gargaj/0a70c1b54b5b94ddf52a to your computer and use it in GitHub Desktop.
Multiple image upload with drag-and-drop
/*
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));
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment