I want to provide a progress bar for my users who upload very large files. I did some reading and implemented what should be a pretty straightforward solution:
- I have a
<form>element that contains an file input element; itstargetis set to the ID of a hidden iframe. - On the server side, there's some Spring magic that attaches an object to the user's session; the progress of the upload can be queried from this object.
- After submitting the form, I start a repeating Ajax call using
setIntervalthat queries the server for the percent-complete using the aforementioned session object. The call repeats every half-second, skipping the Ajax call if the previous call has not yet completed. I use the data from the call to update thewidthof an onscreen element. When the server call reports that the upload is complete, I clear the interval timer.
I created a 100-megabyte file and uploaded it using my interface. This is using Firefox 3.6.3. What I found is that although the upload takes 20-25 seconds, the progress bar doesn't get updated until the very end. Moreover, the entire browser is basically frozen until the upload completes.
I assumed that my method must be flawed, but I tried the same page using IE6, and was utterly amazed when it behaved as I had designed it to--the progress bar got updated every half second, and the whole upload only took about 15 seconds, much faster than Firefox.
I don't have many add-ons installed, but I tried disabling Firebug and restarting my browser. This marginally improved the performance--I got perhaps a single additional progress bar update mid-upload--but still far from acceptable.
Can anyone tell me what I can do to bring Firefox's performance up to the level of IE6? Ugh, I can't believe I actually typed that.
EDIT:
I just tried uploading a large file from a Firefox 3.6.3 browser on a different machine than the one that's running my web server, and it worked fine. Huh.