ASP.NET File Upload with *Real-Time* Progress Bar - redux
So, guess who just got the memo ...
Uploading large files with ASP.NET is difficult.
Every ASP.NET Developer and their Mother
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
No live demo this time, but I do have a sample application. You can download it here.
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?
That's it. Enjoy!