Upload large files to the server and keep visual feedback

In my last projects I had to implement a view for upload big files (video files for playing later) and at same time keep visual feedback of the upload progress (depending on the connection speed the upload process can last from a few minutes to hours). After hours of asking to google and to many others sites in internet I concluded the following: for the server side the recommended solution was NeatUpload which is open source and solves the problem in many ways for ASP.NET, the flash solution was discarded quickly (I hate flash, it’s something personal) and it depends on the browser and plugin stuff that finally it’s a mess for the final clients, I was looking for a solution that only involves HTML, JavaScript and server components.

The only thing missing was the JavaScript client and integrating with jQuery. Sad news for finding a plugin that integrates with this solution on the server, there were many jquery uploaders but none of them were able to talk with the server the way I had implemented.

The solution: Using NeatUpload and write a jQuery plugin.

The NeatUpload™ASP.NET component allows developers to stream uploaded files to storage and allows users to monitor upload progress and it is open source. It’s a great solution for those sites that makes intense use of uploading large files (videos, large photos, etc.).

This library offers a lot of ways for integrating it with your application, for example: web controls, httpModule, flash utility, and JavaScript functionality for include in a static HTML file. I think is a good idea also integrating it with the popular jQuery library.

That’s why I wrote a plugin for integrating it with my web application and also some way make easier for the followers of this approach.

Setup NeatUpload with ASP.NET
First of all, let’s see how to use the Brettle.Web.NeatUpload .NET file uploading module, can be found at http://neatupload.codeplex.com/ for setup properly the server side. Just a quick start instructions for use it (extracted from the documentation):

·         Download the file (Brettle.Web.NeatUpload.dll) from the link above.
·         For IIS 6:

1. Add the line below to the configuration/system.web/httpModules section of your Web.config. <add name="UploadHttpModule" type="Brettle.Web.NeatUpload.UploadHttpModule, Brettle.Web.NeatUpload" />
2. (Optional) To allow larger uploads than the default of 4 Mbytes under Microsoft's ASP.NET, you might need to add or modify the following element in your Web.config under configuration/system.web: <httpRuntime maxRequestLength="size_in_kbytes" />

·         For IIS 7+ (Integrated mode)

1. Add the line below to the configuration/system.webServer/modules section of your Web.config to support IIS7's Integrated Pipeline Mode. <add name="UploadHttpModule" type="Brettle.Web.NeatUpload.UploadHttpModule, Brettle.Web.NeatUpload" preCondition="managedHandler"/>
2. (Optional) To allow larger uploads than the 30MB default used by IIS7, add the following to your Web.config under the configuration/system.webServer/security/requestFiltering section: <requestLimits maxAllowedContentLength="size_in_bytes"></requestLimits>

What about the plugin?
Once properly configured the module (if you have any trouble installing it, see http://www.brettle.com/neatupload), we can start with the sample for use it in a plain HTML page and JavaScript.

The propose of this plugin is to encapsulate all dirty stuff related to sending posts to the server, and the user just tell to the plugin which page is going to handle the request in the server and who is going to return the json with the status information. The idea in general terms doesn’t differ so much from the solution found in the research, but I think is a good practical solution. The plugin allows to choose a file and has two buttons (this is fully configurable and I’ll talk about this in further posts) add and upload.

The add button moves the file selected by the user to a “queue” at bottom of the page inside an invisible div with an id auto generated that contains a form and an iframe linked and configured when the form makes the post, the result is displayed in the iframe, but the user doesn’t see nothing of that, the plugin by default also display a div contiguous to the input that contains a cancel link and the filename which also has the same id auto generated for link visual an non visual elements (this is also fully configurable by the plugin’s user).

The upload button starts the “upload engine” which consists in a loop while exists at least one file pending, it coordinates the hidden forms and commands one by one doing submit and in the other hand it’s responsible of set the timers that go to the server and retrieve the status information (copy percent, but is also possible get the copy speed and even the remaining time), the engine is also in charge of removing the group form-iframe once each finished and notifies to the client via callback functions set up in the plugin constructor, it’s also possible to modify all the appearance by implementing these callback functions and writing custom HTML or even a cute jquery-ui progress bar.

In the next post I’ll show you an example step by step with the minimum things necessary for use the NeatUpload and of course the plugin, download here.