I was trying to implement a Drag n' Drop feature in my website. I need to convert the dropped image into Data URI so I can use it with JCrop and upload it after.
drop: function (e) {
e = e || window.event;
e.preventDefault();
e = e.originalEvent || e;
var files = (e.files || e.dataTransfer.files);
var reader = new FileReader();
reader.onload = function (event){
console.log(event.target.result);
};
reader.readAsDataURL(files);
return false;
}
But nothing shows up in the console. Not even undefined
. The files
variable returns an Object FileList with the image I dropped, so the problem is not there. How can I fix this? :(
//applies to only one file.
reader.readAsDataURL(files);
solution:
for(var i=0;i<files.length;i++){
reader.readAsDataURL(files[i]);
}