Brad Fitzpatrick (brad) wrote,
Brad Fitzpatrick
brad

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....)

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
Tags: javascript, perl, perlbal, tech, work
Subscribe

  • Happy Birthday!

    Happy 20th Birthday, LiveJournal! 🐐🎂🎉

  • hi

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

  • Why, hello...

    Long time no see. How's my baby doing?

  • Post a new comment

    Error

    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.
  • 5 comments