?

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

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
LinkReply

Comments:
[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)