Ajax style File Upload

Anup1252000
Posted by in ASP.NET category on for Advance level | Views : 22809 red flag

In this article we are going to see the fileupload without postback.. We are going to do this by using ICallbackEventHandler..


 Download source code for Ajax style File Upload

Introduction
In this article we are going to use FileUpload in ajax style by using IcallBackEventHandler.. By using this method performance of your application is going to increase .. You are going to see this article in c# while downloading you get in vb also..



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

Page copy protected against web site content infringement by Copyscape

About the Author

Anup1252000
Full Name: anup hosur
Member Level:
Member Status: Member
Member Since: 8/1/2009 2:37:23 AM
Country: India
https://wordpress.com/pages/anuphosur.wordpress.com
https://wordpress.com/pages/anuphosur.wordpress.com
He is the .net developer with around 8 years of experience in technologies like c#, WCF, WPF and Asp.net. https://wordpress.com/pages/anuphosur.wordpress.com

Login to vote for this post.

Comments or Responses

Posted by: Sandy954 on: 8/3/2009
hi anup,
this is sandy,
u done a gr8 job, this article really help mee alot.
thank u so much.
keep posting articles.

Regards.
sandy.

Posted by: Anup1252000 on: 8/3/2009
Thanks for your comments sandy..
Posted by: SheoNarayan on: 8/4/2009
Thanks for nice article Anup, Keep it up!
Posted by: Utsav on: 9/1/2009
hello anup, thanks for your great article.
it helped me a lot.

i have used ur article on my project. can u help me on more validaing the file that has been uploaded by user. such as
file must not exceed more than 2mb
validating file with its extension.
checking whether the file has been selected or not.
etc.

with best regards,
Utsav
Posted by: Anup1252000 on: 9/1/2009
hi utsav.. u need to write these lines of code in web.config under system.web.. <httpRuntime maxRequestLength="2097151" enable="true"/>
Posted by: Chuongxl on: 10/1/2009
after downloaded source code

build :not error
but i can't upload file

i allway recieve messegage "upload failed"
please help me??
Posted by: Chuongxl on: 10/1/2009
after downloaded source code

build :not error
but i can't upload file

i allway recieve messegage "upload failed"
please help me??
Posted by: Bavarod on: 11/30/2010 | Points: 25
Does not work with Firefox 3.6.x

Login to post response

Comment using Facebook(Author doesn't get notification)