Ajax file upload is a very popular extension to all ASP.NET web applications. Thanks to ajax it’s possible to upload files without page reload. On top of that user experience can be improved by features like progress bar, drag and drop or possibility to select multiple files at once. ASP.NET developer to incorporate ajax file upload extension has to cope with two major challenges:

1. Find the best, the easiest to integrate and the easiest to tweak JS library
2. Integrate the library with actual ASP.NET application

In this tutorial I will show you how to integrate ASP.NET application with ajax file upload script created by Andrew Valums. I don’t know if this is the best script available out there, but for sure it’s really good. It’s easy to integrate with ASP.NET, easy to tweak and style in a custom way. Here is how to do it:

How to integrate Valums’ Ajax File Upload Script with ASP.NET

First step is to download the latest version from Valums’ site. Here are essential files to use:

• fileuploader.css – default styles, it’s a good starting point to tweak in future
• fileuploader.js – ajax file upload script, this is where the entire logic is
• loading.gif – loading animation, small but cool thing, it’s required by default styles

I have put the above files in the following location in my application:

• [root]\Images\loading.gif
• [root]\Scripts\fileuploader.js
• [root]\Styles\fileuploader.css

On top of that I have added a few additional files:

• [root]\FileUpload.aspx – this is the file where user can upload files. On this page ajax file upload script will be used.
• [root]\FilesUploader.cs – this is http handler which will receive the files, save them and reply to ajax script with appropriate status (success or error). Please remember that http handler to work has to be registered in web.config.

ASP.NET solution with all of the above files you can download from here. I recommend doing so as it will make learning process easier.

Second step is to create ASPX page with upload form. There are three essential parts:

1. Include all relevant scripts and styles:

   <script src="Scripts/fileuploader.js" type="text/javascript"></script>
   <link href="Styles/fileuploader.css" rel="stylesheet" type="text/css" />

2. Add HTML in place where upload form should be:

   <div id="file-uploader-demo">
      <noscript>
         <p>Please enable JavaScript to use file uploader.</p>
         <!-- or put a simple form for upload here -->
      </noscript>
   </div>

3. Enable ajax file upload script:

   <script type="text/javascript">
      function createUploader() {
         var uploader = new qq.FileUploader({
            element: document.getElementById('file-uploader-demo'),
            action: 'FilesUploader.html',
            debug: true
         });
      }
   
      // in your app create uploader as soon as the DOM is ready
      // don't wait for the window to load
      window.onload = createUploader;
   </script>

In the last step, in line 4 script expects to get an ID of div within which form will be automatically added. In next line, it’s specified URL where the form and files will be posted to.

On this stage page for end visitor is ready, it should even render correctly. But it won’t work if you try to upload something. The missing thing is a “thing” on server side which will take uploaded files and save them somewhere (filesystem, database).

Third step is about adding http handler which will receive uploaded files. Here is a code to do that:

public class FilesUploader : IHttpHandler
{
   #region IHttpHandler Members

   public bool IsReusable
   {
      get { return true; }
   } 

   public void ProcessRequest(HttpContext context)
   {
      HttpRequest request = context.Request;

      if (IsIE9(request))
      {
         byte[] buffer = new byte[request.ContentLength];
         using (BinaryReader br = new BinaryReader(request.Files["qqfile"].InputStream))
            br.Read(buffer, 0, buffer.Length);

         string filename = Path.GetFileName(request.Files["qqfile"].FileName);
         File.WriteAllBytes(request.PhysicalApplicationPath + filename, buffer);

         context.Response.Write("{success:true}");
         context.Response.End();
      }
      else
      {
          byte[] buffer = new byte[request.ContentLength];
          using (BinaryReader br = new BinaryReader(request.InputStream))
             br.Read(buffer, 0, buffer.Length);

          File.WriteAllBytes(request.PhysicalApplicationPath + request["qqfile"], buffer);

          context.Response.Write("{success:true}");
          context.Response.End();
       }

       context.Response.Write("{error:\"Upload failed! Unexpected request.\"}");
       context.Response.End();
   }

   private bool IsIE9(HttpRequest request)
   {
      return request["qqfile"] == null;
   }

   #endregion
}

IE9 handles uploaded files in a completely different way than other browsers. Therefore major if checking if file has been uploaded in IE9 is required. Depending on that, there are different methods to access data like file name and input stream.

Uploaded files are copied from request to array of bytes in lines 16 to 18 (for IE9) and 28-30 (for other browsers). In line 21 and 32 array of bytes is saved to a file. Name of file comes from query parameter in majority of browsers. By default name of query parameter is qqfile. File in the above case will be saved in root folder of ASP.NET application. Here is screen showing how the request looks like in firebug:

ASP.NET and Ajax Files Upload

After saving file, in lines 23-24 and 34-35 http handler responds to the ajax file upload script with information that operation was successful. In lines 38 and 39 is an example how to send to the script information about an error.

One more thing – remember please that to make http handler work, it has be registered in web.config:

<httpHandlers>
<add verb="POST" path="FilesUploader.html" type="FirstTestWebApp.FilesUploader"/>
</httpHandlers>

After step three, you should be able to upload a file, server should respond with appropriate response, files should be saved in application root folder. Only one small thing has to be done – you might have noticed that on this stage, loading.gif is not displayed when file is being uploaded.

In fourth step you have to tweak fileuploader.css file to make sure it finds the loading.gif animation. Look for .qq-upload-spinner class, this is where you have to update path to the file.

In this tutorial I have showed you how to integrate ASP.NET application with Valums’ ajax file upload script. On Valums’ page you will find all the options which scripts offers. I will list a few, the most interesting ones:

• ability to validation based on extension of the files
• validation based on file size
• ability add custom query parameters to each upload
• there is also an option to override messages and to trigger custom functions on events like upload complete, upload in progress, on submit or on cancel.

Once again, you can download full, working, ASP.NET with ajax file upload solution from here to experiment with.

If this tutorial was useful for you, please share it with you friends on twitter, facebook or google plus … whatever works best for you.