Image upload using JQuery + Uploadify + ASP.Net Custom Handler

Recently, I worked on a small POC to upload image files to web server and without a visible postback.

There are many solutions to upload a file to server and among many of them, one of the interesting solution is to use a jquery plugin called Uploadify.

Well, the advantages of Uploadify are

1. You can upload one or more files 
2. It is a Jquery implementation. Works on multiple browsers.
3. Many options to try (Set file size limit, File type filter, Callback after upload etc)
4. You can bend it based on  your needs. Look and feel is customizable.

Visit  www.uploadify.com for documentation.

You can do a small POC yourself now to see it working.

Prerequisite :

1. Download Uploadify script from http://www.uploadify.com/wp-content/uploads/uploadify-v3.0.0.zip
2. Create a new folder by name "Uploadify" and extract the contents of 'uploadify-v3.0.0.zip ' to it.

 Task starts now! 

1. Open Visual Studio & Create a new empty website.
2. Create a folder by name "Uploads" in the root of your solution. (In your solution, you can just do a right click on the website to create a folder). All the files you upload in this POC will be saved in this folder.
3. Copy the "Uploadify" folder and paste it to the root of this solution. Now, your solution will have two folders. Uploadify (which contains the stuff you downloaded) and a empty folder by name 'Uploads".
4. Add a new Web Page to your solution. (Right Click on the root website -> Add New Item and select "Web Form". Give a name and Hit OK)
5. Add the below listing in your ASPX page between the HEAD tags. (Head Section)
6. Now, add this line inside the Form tag of your aspx file
   <input id="fileInput" name="fileInput" type="file"> 
7. Now, you have refereed the Uploadify scripts, jquery and have added the file upload control. Also, notice that you are calling the uploadify function with a set of parameters. Well, i am not explaining the parameters. Just by their names, you can guess what they do.
8. You have to write some server side code which actually uploads the file to server. Let us create a handler for this. Right Click on the root website -> Add New Item and select "Generic Handler". Provide a name as "Upload.ashx"  and hit OK. (Remember, this name is already mentioned in the javascript method Uploadify we wrote so it is important to have the same name for this handler). Your solution now should be something like this
   
   
   
9. Open the handler and you fill find a method by name ProcessRequest. Replace it with below code
   

'VB.Net Listing below.
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Try
            Dim file As HttpPostedFile = context.Request.Files("Filedata")
            Dim filename As String = file.FileName
            Dim filepath As String = HttpContext.Current.Server.MapPath("~").ToString() & "\Uploads\" & filename
            file.SaveAs(filepath)
        Catch ex As Exception
            'Do something
        End Try
 End Sub

And for C# Guys, same listing below

public void ProcessRequest(HttpContext context)
{
 try {
  HttpPostedFile file = context.Request.Files("Filedata");
  string filename = file.FileName;
  string filepath = HttpContext.Current.Server.MapPath("~").ToString() + "\\Uploads\\" + filename;
  file.SaveAs(filepath);
 } catch (Exception ex) {
  //Do Something
 }
}

In the above code, we are receiving the file from the client and specifying location and uploading the file. 

Done!!! . What else are you looking at. Just Run the code and Select few small images to start-with and see it working yourself.