HTML5 file upload - stuck on very large files - Firefox only

Question

I am trying to get a HTML5 upload to work well. So far I have it working properly, with no problems at all. The only issue I am having looks like this (Firefox browser only - Chrome works well):

1. load the page
2. try to upload a very large file (over 1GB)
3. upload takes a very long time to start, then progress is all screwed up and it seems to upload the file twice

If between the steps 1 and 2 I upload a smaller file, the large file starts uploading properly, with good progress indication.

To experience this, you need only to try the steps above on the following demo page: http://exposureroom.biz/upload.aspx. The demo page is from a well known example of HTML5 upload: http://www.matlus.com/html5-file-upload-with-progress/ . I didn't write it myself, but it behaves identically with my script and it's accessible.

Is this a browser bug? Has anybody run into this before?

Thanks

Answer 1

I don't think this is a browser bug, but rather a bug in the upload program. I tested with uploading a 1GB and 2GB file and the upload started right away without waiting at all.

Make sure your test is valid but I found the following unexpected behavior.

case 1:
1. begin upload 1G file
2. upload started normally and progress is normal
3. before completing upload, click on Browse and upload a 2G file
4. upload started normally and progress is messed up. showing negative speed and stuff.

case 2:
1. begin upload 2G file
2. upload started normally and progress is normal
3. before completing upload, click on Browse and upload a 1G file
4. upload started normally and progress is messed up. showing negative speed and stuff.

case 3:
1. begin upload a 1G file
2. upload started normally and progress is normal.
3. start a new tab and begin upload a 2G file
4. upload started normally and progress is normal.

looks like your program is not handling the first two test cases, it doesn't look like a browser bug.

before disabling the upload button once file begins, try to find out why "cancel" upload is not working (if you have implemented it). it looks like there are some success to cancel file upload wtih html5 on client side.

Answer 2

This not a bug in Firefox, this is a bug in your program. Reproduced @Ray Cheng's behavior in FF 11.0 and Chrome 18.0.1025.151 on Mac. Did not reproduce OP's problem in either browser, but I suspect it was based on a misunderstanding of what was going on due to the broken feedback in the program.

Ray's tests fail apparently because the upload of the second file doesn't cancel the upload of the first file and the two uploads are updating the same progress bar and using some of the same values (e.g. file size of the last file uploaded) and some unique values (e.g. bytes of this specific upload completed). Or something like that. I didn't dig into the code to deep, but I did find this (Note these variables are in the global scope but are updated by events generated by the XMLHttpRequest object performing the upload):

  var bytesUploaded = 0;
  var bytesTotal = 0;
  var previousBytesLoaded = 0;
  var intervalTimer = 0;

One obvious problem with the current system is if you start to upload a big file and then start to upload a small file, you get ridiculous feedback as shown below after the smaller file finishes uploading, not to mention the first file upload fails. (Note size and percentage of upload compared to size of uploaded file.)

As a start, I recommend disabling the Browse/file select button while an upload is in progress until you fix these other issues.