Author

Hi there!

I'm Anil Kumar M.S. A technology enthusiast living in Mysore, India. I'm Passionate about .Net, Web Apps, Cloud, Application design and Architecture, Ux, Javascript and Windows Phone.

A Microsoft Certified Technology Specialist and also a Professional Developer in .Net 4 Web. I like travelling, doing Adventure & Love food.

Let's be friends !



Webpage : www.msanil.com
×

Wednesday, November 23, 2011

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

Wednesday, November 23, 2011

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. 
    
    
    
    
  7. Now, add this line inside the Form tag of your aspx file
    <input id="fileInput" name="fileInput" type="file"> 
  8. 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.
  9. 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


  10. Open the handler and you fill find a method by name ProcessRequest. Replace it with below code
  11. '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.


Author : Anil Kumar M.S
A technology enthusiast living in Mysore, India.
You can connect with me on Twitter @MSGuyTweets or on Facebook.
Email me at ms.anil.kumar@gmail.com


Was this post useful?