Tuesday, August 17, 2010

Asynchronous File Upload in Asp.net using C# jquery Uploadify

Hello Readers,
You might have a need for uploading files asynchronously in asp.net using c# with jquery.
here i will give u the best tutorial to do this.
You will need to download the jquery pluggin this.download this pluggin from here.
http://www.uploadify.com/download/
after u download this file extract this folder and rename it to uploadify and put it in the root folder of ur project.
Now crate new aspx page from which we will upload file. name it ImageUploader.aspx(you can give any name)
insert the following code in ur header part of ur file.


    

    

    

//reference of css file of uploadify, you will find this in the folder  uploadify
and then in the body of ur page insert the following code...

   
Now let's create the handler to receive the httpPostedData.
Add Generic Handler to ur project(Right click on project from solution explorer and then click on add new item.from the given option select Generic Handler). Name it Uploader.ashx
The code for the handler is as below.
using System;
using System.Web;
using System.Web.SessionState;

public class Uploader : IHttpHandler, IRequiresSessionState
{
    
    public void ProcessRequest (HttpContext context) {
        try
        {
            HttpPostedFile file = context.Request.Files["Filedata"];
            int id = (Int32.Parse(context.Request["id"]));//here we are accessing the passed values from the javascript
            string filename = id.ToString() + file.FileName;
            string filepath = HttpContext.Current.Server.MapPath("~").ToString() + "\\Avatar\\"+filename ;
            file.SaveAs(filepath);
            //your asp.net logic to save file path in database
            context.Response.Write("1");
        }
        catch (Exception ex)
        {
            context.Response.Write("0");
        }
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

} 
It's done just run ur imageupload.aspx page and click on browse button to upload the file.
if u face any problem feel free to contact me on
info@amitech.co
Amit Panchal
www.amitech.co

5 comments:

Dynamo said...

Fantastic!

Works like a charm.

Mr A said...

Hey I have used your given example with no succes , just remove the session thingy coz i dun need to pass any variable just ned to upload the images , but nothing is working just a simple fileupload box is coming , Also i have installed the lates uploadify js

Mr A said...

$(document).ready(function() {

$('#fileInput').uploadify({
'uploader': 'swf/uploadify.swf',
'script': 'Handler.ashx',

'cancelImg': 'images/uploadImage/cancel.png',
'auto': true,
'multi': true,
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.png;*.gif;*.bmp;*.jpeg',
'queueSizeLimit': 90,
'sizeLimit': 4000000,
'buttonText': 'Choose Images',
'folder': 'images',
'onAllComplete': function(event, queueID, fileObj, response, data) {

}
});
});
// ]]>

Kiran said...

Can you just place the working sample as I am unable to get working with the above sample as I am getting error at "AGENT ID".So it will be better if you provide us a sample code.

Pradeep said...

Thanks for the fantastic sample. It work fines.

One thing I was stuck is "AGENT ID" missing.

To overcome this please assign a number to Session["AGENTID"] in the page load.

It is fantastic

Amitech

Hell0 Friends,
i know you are stuck with some serious problems and that's why you are here. So friends i m putting all the solved problems(with solution) that i have faced in my life (technical problems) on this blog.
In case you can not find the proper solutions, feel free to mail me at info@amitech.co
Amit Panchal