FileReader Error: Object is already busy reading Blobs

Question

I make a file upload system with drag and drop for uploading photo galleries. This is my source code for handling dropdown files. This file works with several files, if I drop them one by one, but when I delete several instances at the same time, this error occurs:

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 has already been provided to you.

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

So, the file reader is already taken, but only when you drop a few files? Then it is probably busy with the first file (and the second crash).

When you put var reader = new FileReader(); In each jQuery loop, it will work as shown 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 may cause this is when a file reader is called twice. If it is still running, it will throw this error.

  reader.onload = function( event ) { // do stuff }; reader.readAsDataURL( file ); /* arbitrarily complex code */ reader.readAsDataURL( file2 ); /* oops */