Working with AJAX makes websites more interactive as no postback is required but if you need to perform file uploads, then this can become very tricky. At the moment, the XMLHttpRequest object does not support sending files to the server. So real ajax file upload is not possible but there are a few hacks that gives the impression that file upload is being handled by the ajax framework. The most common way of faking ajax file upload is through the use of a hidden iframe. What happens is that the hidden iframe submits the multipart/form-data and the server sends the response back to the iframe. However it is easier to use a plugin of some sort instead of going into the intracacies of building something that someone else has already done.
Using ASP.NET HttpHandler for file uploads
Before I started doing ajax file upload, I used the ajax method of the JQuery’s library to fire off a request to an httphandler in asp.net but the context.Request.Files would always be zero. This meant that no files were being sent to the server and it gave me an index out of bound error. This is how I learnt that ajax does not currently handle files and I began to explore new ways to upload files through javascript.
There are many plugins available but I wanted something that most users will already have on their system. Most people already have javascript installed on their machines and working with that was a better option than having flash based upload plugins. My second requirement was that I needed something very lightweight that would only do the functionality that I need and not offer many more that I would not really use. So I ended up checking a plugin which is called Ajax File Upload.
AjaxFileUpload.js
This ajax file upload script (http://www.phpletter.com/Demo/AjaxFileUpload-Demo/) does exactly what I need but the lack of documentation has made me spent hours trying to figure out how it works. The first problem that I had with it was that my web app was going to send the uploaded file to an http handler which would send back json output confirming whether the upload was successful or not.
$("#btnUpload").click(function () {
//var filename = $("#myfile").val();
$.ajaxFileUpload({
url: "/PostFileHandler.ashx",
secureuri: false,
fileElementId: 'myfile',
dataType: 'json',
success: function (data, status) {
$("#result").html(data.msg);
},
error: function (data, status, e) {
alert("My Custom Error: " + e);
}
});
});
As you can see, I’m already telling the ajax file upload plugin that I’m expecting json output and in my http handler, I was outputting json by having context.Response.ContentType = “application/json” but that did not work and that’s how I spent literally hours trying to fix the problem. Everytime I tried uploading something, a dialog would pop up asking me to download a file from my http handler and when I inspected the content of that file, it had the json output in it. So the plugin was not handling the output correctly. The solution was to change the output response in the handler to context.Response.ContentType = “text/html” which made everything worked but is undoubtedly wrong.
The second problem is that if you try to upload anything greater than 4Mb, you will get the error XML tag name mismatch (expected hr) because the plugin can’t handle it. The solution is to check beforehand the size of the file the user is trying to upload but that ain’t possible with javascript/jquery and you’ll have to use something like flash to get this information.
I’m not sure whether I’ll be sticking to this ajax file upload pluging because of the security issue it poses. Ideally, you don’t want the file to be sent to your server if the size is too big and the reason for that is because it will eat your bandwidth, memory and will be stored in a temp folder on your drive (although it would be deleted afterwards). With flash based uploads, you can restrict what is sent to your server beforehand and prevent denial of service attacks (DoS) by preventing the workload from reaching your server scripts.