CODEWITHSUNDEEP
javascriptjquerypythonhtmljquery-plugins
Ger
Ger

Reputation: 754

jQuery File Upload crashing browser

I'm using jquery-filedrop and python/flask to upload files to an uploads folder on my server.

However whenever I select a large file (~80MB+) the browser tab (chrome) instantly crashes.

Looking into the code and from the readme it seems to use HTML5 FileReader() to handle the file upload.

If I take a small chunk of the file by changing these lines:

reader.onloadend = !opts.beforeSend ? send : function (e) {
      opts.beforeSend(files[fileIndex], fileIndex, function () { send(e); });
};

reader.readAsDataURL(files[fileIndex]);

to

reader.onloadend = !opts.beforeSend ? send : function (e) {
      opts.beforeSend(files[fileIndex].slice(0, 1048576), fileIndex, function () { send(e); });
};

reader.readAsDataURL(files[fileIndex].slice(0, 1048576));

Then I can get it to run without an error by only uploading 1MB from each file, so I'm guessing it's a memory issue when the full file is read in.

How could I set it up to loop through small chunks of the file and upload them separately? Or, are there any better workarounds?

Upvotes: 1

Views: 1257

Answers (2)

ramesh babu
ramesh babu

Reputation: 87

Yes, Chrome crashes if you are running the loops with heavy objects. The best thing you can do use Webworkers to process files and then read the chucks.

Resources

Upvotes: 2

darkknight
darkknight

Reputation: 372

If using HTML5 FileReader(), then the file option has a slice method that you can use.

var blob = file.slice(startingByte, endindByte); reader.readAsBinaryString(blob);

For more information: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Upvotes: 0

Related Questions