Ajax style File Upload

Introduction

Lets go through this application step by step

Step 1: 

Create a new website >select the programming language as c#> Name the project as FileuploadAjaxStyle

Step 2: 

Just drag and drop the HTML Fileupload and a button..  Double click on that double it will generate the script automatically.. Add the span and give it a id as message.. We are going to use this span to store the message..Page looks like this 

Step 3: 

Now lets go to the code behind.. Add ICallBackEventHandler interface to the page.. Now the page looks like this..

Step 4: 

Now Just register this page by adding GetCallBackEventReference..

In GetCallbackEventreference we are passing the argumet as arguments, we are calling the callback as results.. results is the place where we are going to store our result.. If error occurs then we are calling the function called onerror.. true means it results asynchronously without postback..

Step 5:

Now we are going to use WebClient in RaiseCallbackEvent which exist in the namespace System.Net..

Now u create anotherpage and give the name as FileuploadTarget.aspx and just run the FileuploadTarget.aspx.. copy the address from the address bar..

UploadFile Method takes 3 parameters as Address,Web method and the Filename.. When u upload the file it is stored in eventArgument..

Step 6:

Now lets add javascript to the Default.aspx page..

Step 7:

Now lets go to code behind of Default.aspx.. We need to return cbref in GetCallbackResult method..

 

Step 8:

Now lets go to the FileuploadTarget.aspx code behind..

We are using HttpPostedFile and retrieving the file from Default.aspx.. Next steps are all basic where i am pointing it to the folder called anup.. Checking whether that Directory exist, if not lets create one and saving the file to the directory which i have create..

Step 9: 

Now its a time to run the application

I hope you people like this application.

Thanks