Rails PaperClip drag and drop multiple files - ruby-on-rails

Question

I am using PaperClip with Rails to upload files and it works fine, however it would like to implment a drag and drop fileupload that allows for uploading of multiple files. and that each file shoudn't be more than a certain size.
Edit:
Here is what is what i have so far, i have created the javascript part. However i am lost as how to create the controller part:
var $dropArea = $(".drop-area");
$dropArea.bind({
dragover: function () {
$(this).addClass('hover');
return false;
},
dragend: function () {
$(this).removeClass('hover');
return false;
},
drop: function (e) {
e = e || window.event;
e.preventDefault();
e = e.originalEvent || e;
var files = (e.files || e.dataTransfer.files);
var $img = $('<img src="" class="uploadPic" title="" alt="" />');
for (var i = 0; i < files.length; i++) {
(function (i) {
var reader = new FileReader();
reader.onload = function (event) {
var newImg = $img.clone().attr({
src: event.target.result,
title: (files[i].name),
alt: (files[i].name)
});
$("body").append(newImg);
};
reader.readAsDataURL(files[i]);
var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append(files[i].name, files[i]);
xhr.open("POST", 'url', true);
xhr.send(fd);
})(i);
}
return false;
}
});
And this is the basic controller part:
def create
#image = Image.new(params[:image])
if #image.save
respond_to do |format|
format.html { redirect_to action: 'index', :notice => 'Image saved'}
format.js { redirect_to action: 'index', :notice => 'Image saved'}
format.xml { redirect_to action: 'index', :notice => 'Image saved'}
end
else
flash[:notice] = "Error, Please try again"
redirect_to action: 'new'
end
end
How can i do this?
Thanks

Answer 1

After some research, i found that it could be easily done like this:
var dropArea = document.getElementById("droparea"),
viewArea = document.getElementById("previewarea");
dropArea.addEventListener("drop", function(evt){
evt.preventDefault();
evt.stopPropagation();
previewFiles(evt.dataTransfer.files);
return false;
}, false);
function previewFiles(files){
for (i=0; i < files.length; i++){
if (typeof FileReader != "undefined"){
var img = document.createElement("img");
viewArea.appendChild(img);
var reader = new FileReader();
reader.onload = (function(theImg){
return function(evt){
theImg.src = evt.target.result;
}
}(img));
reader.readAsDataURL(files[i]);
}
}
uploadFiles(files);
}
function uploadFiles(files){
var fd = FormData();
var position = 0;
var max = files.length;
if (typeof fd != "undefined"){
function queue(){
if (max >= 1 && position <= max - 1){
fd.append("file", files[position]);
upload();
}
}
function upload(){
$.ajax({
url: '/boxes/hiThere',
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
position = position + 1;
queue();
}
});
}
queue();
}
}
dropArea.addEventListener("dragenter", function(evt){
if (evt){
this.className = "drag-enter";
}
endFn(evt);
}, false);
dropArea.addEventListener("dragleave", function(evt){
this.className = "";
endFn(evt);
}, false);
dropArea.addEventListener("dragover", function(evt){
endFn(evt);
evt.dataTransfer.dropEffect = 'move';
return false;
}, false);
function endFn(evt){
evt.preventDefault();
evt.stopPropagation();
}
and simply add the normal save in rails like this:
def hiThere
box = Box.new(params[:box])
box.user_id = current_user.id
box.file_path = params[:file]
if box.save!
set_flash "File saved sucessfully"
else
set_flash "Error, please try again"
end
respond_to do |format|
format.js { redirect_to action: :index, :notice => "Done" }
end
end