lighty's life: mod_uploadprogress is back

mod_uploadprogress is back

jan — Tue, 01 Aug 2006 16:54:00 +0000

In my ongoing efforts in restructuring the core of lighttpd for the 1.5.0 release I brought mod_uploadprogress back to life.

I talked about mod_uploadprogress a long time ago and since then I got at least one request per month to bring it back again.

It was changed abit since the early days. Instead of XML we send out JSON now. That does the same and easier to parse:

{ 'state' : 'starting' };
...
{ 'state' : 'uploading', 'size' : 87901150, 'received' : 80601372};
{ 'state' : 'done', 'size' : 87901150, 'received' : 87901150};

First you need a file-upload form. It is all standard and only calls our upload-progress updater onSubmit.

  <form id="upload" enctype="multipart/form-data" 
    action="/upload.php" method="post" 
    onsubmit="openProgressBar(); return true;">
  <input type="hidden" name="MAX_FILE_SIZE" value="30000000"  />
  <input name="userfile" type="file" label="fileupload" />
  <input type="submit" value="Send File" />
  </form>

The progress bar in this case are 2 nested div-tags:

  <div>
   <div id="progress" style="width: 400px; border: 1px solid black">
    <div id="progressbar" 
       style="width: 1px; background-color: black; border: 1px solid white">
     &nbsp;
    </div>
   </div>
   <div id="tp">(throughput)</div>
  </div>

Some Javascript with XMLHTTPRequest can tell us about the state of a upload:

<script type="text/javascript">
 interval = null;

function fetch(uuid) {
 req = new XMLHttpRequest();
 req.open("GET", "/progress", 1);
 req.setRequestHeader("X-Progress-Id", uuid);
 req.onreadystatechange = function () {
  if (req.readyState == 4) {
   if (req.status == 200) {
    /* poor-man JSON parser */
    var upload = eval(req.responseText);

    document.getElementById('tp').innerHTML = upload.state;

    /* change the width if the inner progress-bar */
    if (upload.state == 'done' || upload.state == 'uploading') {
     bar = document.getElementById('progressbar');
     w = 400 * upload.received / upload.size;
     bar.style.width = w + 'px';
    }
    /* we are done, stop the interval */
    if (upload.state == 'done') {
     window.clearTimeout(interval);
    }
   }
  }
 }
 req.send(null);
}

function openProgressBar() {
 /* generate random progress-id */
 uuid = "";
 for (i = 0; i < 32; i++) {
  uuid += Math.floor(Math.random() * 16).toString(16);
 }
 /* patch the form-action tag to include the progress-id */
 document.getElementById("upload").action="/upload.php?" + uuid;

 /* call the progress-updater every 1000ms */
 interval = window.setInterval(
   function () {
     fetch(uuid);
   },
   1000
 );
}

 </script>

Now I only have to commit this code to SVN and make a pre-release :)

"mod_uploadprogress is back" by dave

Tue, 22 Aug 2006 18:04:36 +0000

I'd like to try this out, but I can't find the source in svn. Is it in the lighttpd-merge-1.4.x branch?

"mod_uploadprogress is back" by hruske

Tue, 22 Aug 2006 10:17:39 +0000

Boom, make sure you aren't rewriting your url or passing it to fastcgi.

"mod_uploadprogress is back" by wiz

Fri, 18 Aug 2006 07:36:59 +0000

And how to get it?...

"mod_uploadprogress is back" by mod_uploadprogress-lover

Sat, 12 Aug 2006 00:16:24 +0000

Thank YOU! :D

"mod_uploadprogress is back" by Nick

Fri, 11 Aug 2006 06:31:05 +0000

Sweetness!!!!!!!!!! Any clues on how to test it out??

"mod_uploadprogress is back" by Boom

Thu, 10 Aug 2006 16:42:12 +0000

I trying to test this module, but req.open("GET", "/progress", 1); return 404 error code What's wrong?

"mod_uploadprogress is back" by fcicq

Sun, 06 Aug 2006 04:41:36 +0000

Great!!!! I'm waiting for it.....

"mod_uploadprogress is back" by johnny99

Fri, 04 Aug 2006 19:28:39 +0000

That's absolutely fantastic, thanks so much. Been waiting and hoping this would re-appear. Any idea when the pre-release might be available? Or, dare I ask, the general release?

"mod_uploadprogress is back" by ARJ

Tue, 01 Aug 2006 19:39:21 +0000

Yay! This is great. I like the straight-forwardness (is that a word?) We will definitely be making use of this.

"mod_uploadprogress is back" by chernousov

Tue, 01 Aug 2006 17:39:57 +0000

great! doing svn up each few minutes, can't wait for your commit! ;))