| Brad Fitzpatrick 2005-11-05, 2:45 am |
| 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/wcm...rack.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/communit...cvs/257401.html
Enjoy!
- Brad
|