FileReader error: The object is already busy reading Blobs

Question

I\'m making a drag-and-drop file upload system for photo gallery uploads. This is my source code handling dropped files. This one works multiple files if I drop them one by one

Answer 1

I think the error is already given to you.

Failed to execute 'readAsDataURL' on 'FileReader': The object is already busy reading Blobs

So the file reader is already busy but only when you drop multiple files? Then it is probably busy with the first file (and the second crashes).

When you put var reader = new FileReader(); in your jQuery each loop it will work like below:

$.each(files, function(i, j)
{
    var reader = new FileReader();
    $("td.photos span.status").html("Processing file: "+j.name);

    formdata.append('file', j);
    .... <snip>

}

Answer 2

A case that can cause this is when a file reader gets called twice. If it's still running, it will issue this error.

    reader.onload = function( event ) {
            // do stuff
        };
    reader.readAsDataURL( file );

    /* arbitrarily complex code */
    reader.readAsDataURL( file2 );

    /* oops */