Brad Fitzpatrick (brad) wrote,
Brad Fitzpatrick

Upload status tracking with Perlbal

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 && return;
    var percent = Math.floor(data.done * 100 /;
    $("UploadBarInside").style.width = percent + "%";
    var status = Math.floor(data.done / 1024) + " kB / " + 
Math.floor( / 1024) + " kB, " + percent + "% complete";
    $("UploadStatus").innerHTML = status;

function submitForm () {
    if (uptrack) uptrack.stopTracking();

    var frm = $("WebUpload"); = "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
Tags: javascript, perl, perlbal, tech, work

  • Ukraine

    Nobody reads my LiveJournal anymore, but thank you to everybody in Russia protesting Putin's insane war against Ukraine. (I know it's risky…

  • Happy Birthday!

    Happy 20th Birthday, LiveJournal! 🐐🎂🎉

  • hi

    Posting from the iPhone app. Maybe I'm unblocked now.

  • Post a new comment


    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.