ASP.NET File Upload with *Real-Time* Progress Bar

After sufficiently embarrassing myself with my earlier post, I decided it was high time I spend a little bit more time understanding this problem.  And lo and behold Jon Galloway has already written up a nice survey on the topic.  So to bone up on the issues I followed all of the links Jon provided as well the ones provided by all of the one-off emails I received in response to my previous post (thanks everyone).

Of all the upload components I checked-out (SWFUpload, FileUp, Flajaxian FileUploader, RadUpload, NeatUpload, ASP.Net File Upload/Download Module, etc...) I was the most interested in the last 2 (NeatUpload and ASP.Net File Upload/Download Module).  They are both free, have my kind of licensing and come with the full source code.

So I downloaded both of these components and played around with plugging them into the demo app I blogged about previously.  Both components include progress bar web controls, but I already have a progress bar widget that I really like.  So my focus was on seeing what it would take to leverage only the HttpModule portion of these components and checking out how I could have the module interface with my progress bar.  Like I mentioned previously, I want something that looks like this ...

NeatUpload Vs. Darren Johnstone's ASP.Net File Upload/Download Module

Both NeatUpload and Darren Johnstone's components seem to have a rather large following, but I chose to see how I could extend Darren's control because it was already using AJAX plus a custom HttpHandler to communication the upload progress back to the client.  And that seems really close to what I wanted.  If this doesn't pan out, NeatUpload actually seems to have a larger following so I will probably go back and revisit this topic using NeatUpload instead.

How it Works

From what I can tell, Darren's component basically works by injecting a hidden INPUT element into the form that contains the file INPUT(s).  The value of the hidden element is a Guid that contains a well-known prefix (Darren uses the token ::DJ_UPLOAD_ID::).  Then as his custom HttpModule is processing the request, it looks to see if the form contains this token.  If so, he tucks the upload progress information into memory using the id value as the index.  Then, if a client wants to query the upload progress, they can query his component using this guid as the look-up value. 

Below is a screen capture of the request body.  The hidden field is highlighted in yellow.       

Querying the Upload Status

The second cool thing about Darren's control is that he has included a custom handler for accessing the progress of an upload.  This makes is pretty simple to get at the upload progress using your favorite AJAX library.  Below is a small snippet of JavaScript that I am using in my demo app for getting at the status of the current upload.   

   1: intervalID = window.setInterval(function(){

   2:  

   3:     var request = new Sys.Net.WebRequest();

   4:     request.set_url('UploadProgress.ashx?DJUploadStatus=' + token + '&ts=' + new Date().getTime());

   5:     request.set_httpVerb('GET');                

   6:     request.add_completed(function(executor){

   7:     

   8:         //  the progress is returned as xml

   9:         var e = executor.get_xml().documentElement;                   

  10:         var empty = e.getAttribute('empty');

  11:     

  12:         if(!empty){

  13:         

  14:             //  extract the attributes I am interested in

  15:             var percent = e.getAttribute('progress');

  16:             var file = e.getAttribute('file');

  17:             var kbs = Math.round(parseInt(e.getAttribute('bytes')) / 1024);    

  18:             var size = Math.round(parseInt(e.getAttribute('size')) / 1024);                        

  19:         

  20:             //  update the progressbar to the new value

  21:             progressBar.set_percentage(percent);

  22:             //  upadte the message

  23:             updateMessage('info', 'Uploading ' + file + ' ... ' + kbs + ' of ' + size + ' KB');

  24:             

  25:             if(percent == 100){

  26:                 //  clear the interval

  27:                 window.clearInterval(intervalID);                        

  28:             }                        

  29:        }                    

  30:     });  

  31:     

  32:     //  invoke the request

  33:     request.invoke();

  34:     

  35: }, 1000);

Sample App

No live demo this time, but I do have a sample application.  You can download it here.

Conclusion

Well, that's about it.  I am curious, how have you handled file uploads in the web apps you have worked on?  3rd party component?  Something home-grown?  One of the components I mentioned above?