Search code examples
javascriptjqueryhtmlfileapi

ReadAsDataURL() doesn't work


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? :(


Solution

  • //applies to only one file.
    reader.readAsDataURL(files); 
    

    solution:

    for(var i=0;i<files.length;i++){
       reader.readAsDataURL(files[i]);
    }