From:
http://lists.danga.com/pipermail/perlbal/2005-November/000138.html
In the latest version or two of Perlbal, Perlbal can now help you show a progress bar to users during uploads. Here's how you configure your Perlbal: # Make a service that listens for UDP progress packets. With a single # Perlbal, these packets are only from itself. Sorry, I didn't optimize # for the single host case. CREATE SERVICE uptrack SET role = upload_tracker SET listen = 127.0.0.1:7002 ENABLE uptrack # Then configure your web_proxy service to send those packets once a # second per connection (if the upload actually is requested being # tracked) CREATE SERVICE fotobilder SET role = reverse_proxy .... SET upload_status_listeners = 127.0.0.1:7002, 10.54.0.1:7001 ... Then use this JavaScript library: http://cvs.danga.com/browse.cgi/wcmtools/js/perlbal-uploadtrack.js?rev=1.2 And on your page, use JavaScript to intercept the form submit event and change the form's target to an in-page iframe and kick-off the library doing its tracking (using XmlHttpRequest), calling your callback. (If the client doesn't have javascript, your form submit goes through unchanged...) Here's an example: <script> var uptrack; // our Perlbal upload tracker object, if defined // called from iframe's content on complete, with a URL of where we should go: function onUploadComplete (destURL) { window.location = destURL; } // called by the perlbal upload tracker library: (we pass it this function below) function uploadCallback (data) { if (! (data && data.total)) return; var percent = Math.floor(data.done * 100 / data.total); $("UploadBarInside").style.width = percent + "%"; var status = Math.floor(data.done / 1024) + " kB / " + Math.floor(data.total / 1024) + " kB, " + percent + "% complete"; $("UploadStatus").innerHTML = status; } function submitForm () { if (uptrack) uptrack.stopTracking(); var frm = $("WebUpload"); frm.target = "upiframe"; // change target to our iframe // create the actual Perlbal upload tracker object: uptrack = new UploadTracker(frm, uploadCallback); $("UploadStatus").innerHTML = "Uploading, please wait..."; $("UploadBar").style.display = "block"; return true; } </script> Here's the patch I just did for fotobilder with almost that exact same code above: http://www.livejournal.com/community/fotobilder_cvs/257401.html Enjoy! - Brad