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 it works but when I drop more than one at the same time this error occures:

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

function handleFiles(files)
{
    var reader = new FileReader();
    var formdata = new FormData();

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

        formdata.append('file', j);

        $.ajax({
            url: "uploadalbum.php",
            type: "POST",
            dataType: "json",
            data: formdata,
            processData: false,
            contentType: false,
            success: uploadfinished
        });

        reader.onload = handleReaderLoad;
        reader.readAsDataURL(j);
    });
}

Any ideas?

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 */