Log in

No account? Create an account
Upload status tracking with Perlbal - brad's life [entries|archive|friends|userinfo]
Brad Fitzpatrick

[ website | bradfitz.com ]
[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

Upload status tracking with Perlbal [Nov. 5th, 2005|12:09 am]
Brad Fitzpatrick
[Tags|, , , , ]

How you can use Perlbal to give your users upload progress bars during browser uploads.... (which for some stupid reason have never shown progress bars....)


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.

  SET role = upload_tracker
  SET listen =
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)

  SET role = reverse_proxy
  SET upload_status_listeners =,

Then use this JavaScript library:


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

Here's an example:


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;


Here's the patch I just did for fotobilder with almost that exact same code above:



- Brad

[User Picture]From: taral
2005-11-06 09:54 pm (UTC)
They don't show upload status bars because of sender-side send buffers.
(Reply) (Thread)
[User Picture]From: brad
2005-11-07 12:19 am (UTC)
I don't buy it. I'd rather have an upload bar that's 128k off out of 5M+.
(Reply) (Parent) (Thread)
[User Picture]From: taral
2005-11-07 05:20 pm (UTC)
Okay... they don't have upload bars because nobody told them they wanted one? Because they don't have a convenient place to put it? Because uploads used to be uncommon?

(Reply) (Parent) (Thread)
[User Picture]From: brad
2005-11-07 06:19 pm (UTC)
Uncommon? I'd buy that.

No place for one? What about that status bar at the bottom where they show other status info?
(Reply) (Parent) (Thread)
[User Picture]From: taral
2005-11-07 07:43 pm (UTC)
*shrug* I was just coming up with possible reasons, hence the :).
(Reply) (Parent) (Thread)