showing progressbar progress with ajax request

Question

I want to show progress with jquery ui progress bar when an ajax request fires and when it finishes. The problem is I don\'t know how to set values for the progress bar depe

Answer 1

Edit: For posterity I've left my previous answer below, but seeing as how it doesn't actually answer the question being asked I'm providing a new answer.

Some of the comments on the question have pointed out newer methods of accomplishing this. Thanks to HTML5 and the newer XHR2 it's possible to put callbacks on the progress of AJAX requests. This involves you adding event listeners to the XHR object and providing callbacks to the appropriate properties. This page has good examples for both upload and download and this git repo looks good and has been updated recently.

Also, if you're really interested in digging into the XHR and overrides, this Mozilla doc post should help out a lot as well. And in fact, this doc post seems to be what the git repo I mentioned was based off of.

Old Answer: This is an age old problem for people writing web apps and while Thilo was right, this is no longer as difficult as it once was. The best (imo) current solution is to "chunk" the files you're uploading and update your progress bar every time you upload a chunk. This SO question and it's answer is a good place to start understanding this concept and even how to apply it to your situation.

But suffice it to say, what you'll do is take the file you're uploading and split it up into smaller pieces on the client side. There are several potential benefits to this, but the primary one in this case is that it allows you to know every time a specified percentage of the file has been uploaded to the server. And obviously every time a chunk is uploaded you can update the progress bar accordingly.

Chunking the file like this also allows you to effectively "pause" or "resume" uploads since you can upload different parts of a file at any given time.