Upload multiple files using jQuery and ASP.NET

A few weeks back I needed a control that allowed me to upload multiple files to a SQL database going through an ASP.NET ashx handler. Also, the whole control needed to be implemented client side and the best option if using jQuery.

I spent lots of time trying to find some good control that didn’t used Flash. Most of the controls available out there were pure based Flash applications or a combination of jQuery + Flash. None were pure jQuery and supported the option of multiple files. Then I found Andrew Valums jQuery upload control. It was pretty easy to install and configured. The only drawback is that uses iframe for uploading the file, but this is transparent to the end user, so I decided to give it a try.

Here’s how it works:

Download the control

Go the website and download the control. Keep in mind there are two versions: one GPL and another one with the MIT license. I went with the one with the MIT license. You can download it here.

Place the control on your page

Use the following HTML code to place it:

<div id="uploadRegion">
<div>
<input id="button3" type="file" />
</div>
<p>Uploaded files:</p>
<ol id="infoUploadedFiles" class="files"></ol>
</div>

jQuery code to create the control

new AjaxUpload('#button3', { action: 'filehandler.ashx',
name: 'myfile',
data: { '' },
onComplete : function(file, response){
var fileResponse = $.parseJSON(response);

$(‘<li></li>’).appendTo($j(‘#infoUploadedFiles’)).text(file);
}
});

ASP.NET code to handle and receive the file

HttpPostedFile file = context.Request.Files[0];

string name = Path.GetFileName(file.FileName);
string ext = Path.GetExtension(file.FileName);

byte[] fileContent = new byte[file.ContentLength];
file.InputStream.Read(fileContent, 0, file.ContentLength);

After receiving the file in a byte array proceed to save it to the hard disk or a database, as needed.