FileUpload in UpdatePanel, ASP.NET, like Gmail

Earlier, I had written this post on how you can accomplish using FileUpload control in UpdatePanel since by default it wasn’t supported.  The post seems to have helped many and keeps being the most visited one.  However, with the new release of Ajax Control Toolkit (v 3.0.30930) released specifically for .NET 3.5 SP1 (with Visual Studio 2008 SP1), there are couple of new controls.  One of them is the AsyncFileUpload control.

Thanks to the codeplex community which keeps getting better and better with time, the Ajax Control Toolkit has grown into one of our largest community contributed controls for ASP.NET with about 43 controls that help in accomplishing rich user experiences in ASP.NET Websites.

The AsyncFileUpload is one simple way of accomplishing what I had written earlier using PostbackTrigger, the regular FileUpload control etc.,  To be able to use the AsyncFileUpload Control, you must have the latest version of AjaxControlToolkit installed.  The other pre-requisites are obviously NET 3.5 SP1 and Visual Studio 2008 SP1 (or the free Visual Web Developer Express Edition)

You can download the pre-requisites from the respective links above.  For downloading the AjaxControlToolkit, visit the CodePlex site.  You can download just the binary files or the Source files as well, if you require to modify.  The Script Files is useful if you want to just work with the client side scripts and not use the server controls.

Once you have downloaded, you would need to add them to Visual Studio or VWD.

1. Open Visual Studio and create a new webapplication or website.  Click to open the ToolBox

2. Right Click and select “Add Tab”

3. Provide a name say “Ajax Control Toolkit”

4. Right Click the newly created tab and select “Choose Items”

5. Click on the “Browse” button in the file dialog that opens and browse to the place where you downloaded the AjaxControlToolkit binaries

6. Typically I would put them under C:\Program Files\Microsoft ASP.NET for consistency.

7. Select the AjaxControlToolkit.dll and it would list all the new controls.

8. Click “Ok” to add all the controls.

9. You should now see under the newly created toolbox tab these controls.

Once you are done with above, create a simple Default.aspx page in the application you created and drop the Script Manager control into your webform.  Next add an UpdatePanel with ContentTemplate.  Inside the ContentTemplate, add the AsyncFileUpload control into the webform as well as a button and 2 labels for the uploading and displaying messages respectively.  The markup looks something like below

<form id="form1" runat="server">
   <div>
       <asp:ScriptManager ID="ScriptManager1" runat="server">
       </asp:ScriptManager>
       <asp:Image ID="img1" runat="server" ImageUrl="~/Images/spin2.png" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
           <ContentTemplate>
               <cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" UploaderStyle="Modern" ThrobberID="img1"  />
       <br />
       <asp:Button ID="btnUpload" runat="server" Text="Upload"
           onclick="btnUpload_Click"   />
           <br />
           <asp:Label ID="Label1" runat="server" /> 
           <br />
           <br />
         </ContentTemplate>
       </asp:UpdatePanel>
       <br />
       <asp:Label ID="Label2" runat="server" />
   </div>
   </form>

Also, you can see that I have added an asp:Image pointing to a spin image that is specified as the ID for ThrobberID in the AsyncFileUpload definition.  This is optional but nice to have since this would display the throbber icon while uploading takes time.

Once you are done, you would need to define the action in the codebehind or in the script

protected void Page_Load(object sender, EventArgs e)
      {
          Label2.Text = DateTime.Now.ToString();
      }

      protected void btnUpload_Click(object sender, EventArgs e)
      {
          AsyncFileUpload1.SaveAs(Server.MapPath((AsyncFileUpload1.FileName)));
          Label1.Text = "You uploaded " + AsyncFileUpload1.FileName;
      }

Notice, the Label in the Page_Load event is just to indicate that indeed the operation happened asynchronously since the time that is displayed initially doesn’t change once you click on Upload button. 

Try running this and you will find that the whole operation happens asynchronously without a full page reload.  Note that, you would need to still put the AsyncFileUpload control inside UpdatPanel for this behaviour.  Otherwise, it would behave like a regular postback control.

You can download the sample code from

Cheers !!

Print | posted on Thursday, October 1, 2009 5:31 AM

Comments on this post

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Much more easier. Finally i felt like we are on a simple but robust path for file uploads. Happen to hit on this post faster, thanks for posting.
Left by setc on Oct 01, 2009 7:11 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
would this work with large files?
Left by k5 on Oct 01, 2009 8:53 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Actually the standard file upload control works in an update panel with a postbacktrigger. The article English is misleading.
Left by Lee on Oct 01, 2009 9:16 AM

# wow. it's cool

Requesting Gravatar...
it's what i am looking for. thanks so much~
Left by Ian lee on Oct 01, 2009 2:14 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
How large a file will this handle?
Left by John Sinnott on Oct 02, 2009 1:19 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...

It's good to see some progress being made on a more useful file uploader control. It works fine in IE8, but does not work properly in firefox 3.53: the throbber item is always visible. Any clues about a workaround for this?
Left by D Field on Oct 02, 2009 2:41 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...

My bad--turns out that I had disable javascript. Never mind!
Left by D Field on Oct 03, 2009 2:13 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
could not make it work with large files, I guess the problem is the persisted storage used (Session)
Left by Santiago on Oct 06, 2009 2:26 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
I can not get it to work when the asyncfileupload control is on a custom control - any suggestions?
Left by bass fish on Oct 13, 2009 8:20 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Oh Great....
Left by Gopi T on Oct 13, 2009 9:57 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Santiago - To enable large files to be uloaded you must modify the web.config..... 4Mb is default but you can change this
Left by Tim on Oct 17, 2009 7:51 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
How does the AsyncFileUpload connect to the button?
Also AsyncFileUpload starts uploading as soon as the file has been choosen. By stating the onUploadedComplete (which is stated UploadedComplete in the sample-page which is quite strange...) to a specific backend function (as a event that is) it should be triggered that way.

Problem with AsyncFileUpload is that it doesn't trigger the specified event. It just seems damn broken... I am using Ajax Toolkit version 3.0.30930.28736
Left by Erik Larsson on Nov 16, 2009 12:52 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Hmmm.... :)
its really kool!
Left by Pranav Ainavolu on Nov 25, 2009 6:24 PM

# Upgrading older dll version causes error in all pages' designer..

Requesting Gravatar...
I upgraded but after this all the pages' designer.cs files are showing the error below in the compilation:

"The type or namespace name 'AjaxControlToolkit' could not be found in the global namespace (are you missing an assembly reference?)"

Any idea on how to upgrade without this error? I removed the toolbox tab, and the bin dll before re-adding all again... no luck.
Left by Tiago on Dec 04, 2009 9:24 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
i use this code but vafter clicking the upload button my file uploader control is disappear
Left by sayan on Dec 14, 2009 7:40 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Isn't it funny that the request to server goes two times; one while selecting file and one while actually uploading file.
Left by Suraj Shrestha on Jan 22, 2010 5:06 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Have you even tested this code? AsyncFileUpload does not work this way.
Left by dfdf on Feb 16, 2010 1:05 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Very nice post. Thanks to the author. Can I use some of the material for filling the tutorial resource http://phpforms.net/tutorial/tutorial.html ?
Left by form builder on Mar 02, 2010 6:15 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Simple and yet useful post. Thanks.
Left by i-hulk on Mar 17, 2010 9:02 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Thanks a lot. Effort appreciated much, man.
Left by kitchen pantry furniture on Mar 24, 2010 11:05 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Thanks for this post!

Excellent buddy!
Left by Cebu SEO Specialist on Mar 27, 2010 8:13 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Any clues about a workaround for this?
Left by cartier jewellery on Apr 11, 2010 7:19 PM

# # re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Try running this and you will find that the whole operation happens asynchronously without a full page reload.
Left by Piilolinssit Hintavertailu on May 02, 2010 4:07 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
It appears that you have put a good amount of effort into your blog and this world require more of these on the Internet these days. The

both of us actually enjoyed your post. I do not have a great deal to say in reply, I just wanted to sign up to reply well done.
Left by cosmetic packaging on May 13, 2010 9:09 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
ASP . Net have good features but unable to understand many .
Left by HID Kit on May 20, 2010 1:22 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Great usable features in all facts for the users.
Left by DNS tools on May 25, 2010 6:50 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
How we can carry upload files with the 2 calling functions ?
Left by network tools on May 25, 2010 6:52 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
goood nice
Left by meksika biberi zayiflama hapi on May 31, 2010 11:42 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
veryy good !!
Left by meksika biberi zayiflama hapi on May 31, 2010 11:53 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Nice and best blog.
Left by Prozac No Prescription on Jun 02, 2010 8:48 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
ASP.Net have define roles because embed engineering involve.
Left by fat burning furnace scam on Jun 10, 2010 1:21 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Problem with AsyncFileUpload is that it doesn't trigger the specified event. It just seems damn broken.
Left by secretariat on Jul 21, 2010 8:35 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
I really like the code work this will be useful for me.
Left by Feeding humming bird on Aug 25, 2010 11:03 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
ASP sure has a lot of features. It is great for me.
Left by Power4home on Aug 31, 2010 4:43 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
I like this blog. and expect more from the blogger...
Left by wii game rental on Sep 10, 2010 3:24 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Thank you for sharing your code! Helped me! :)
Left by Piilolinssien hintavertailu on Sep 14, 2010 3:22 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Thank you for sharing your code...
Left by make up packaging on Sep 20, 2010 10:40 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
ASP is to difficult for me
Left by free web templates on Sep 21, 2010 11:15 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Thanks for putting in the steps.
Left by free car classifieds on Sep 23, 2010 2:58 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Nice way of blogging, hope aalllll readers enjoy..
Left by Prevent Tularemia on Sep 24, 2010 11:59 AM

# Hey!

Requesting Gravatar...
Your post is really very useful. Do keep posting more such things.
Left by yoga in reno on Sep 27, 2010 2:13 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
It just seems damn broken.
Left by music mp3 on Sep 28, 2010 1:00 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
i want to know how to see this uploaded file?
which we can upload?
Left by mississauga personal trainer on Oct 01, 2010 5:16 PM

# Ms

Requesting Gravatar...
The codes for which i was looking from last two days. finally i found. Thanks blogger!!
Left by walkins on Oct 05, 2010 12:23 PM

# re:

Requesting Gravatar...
Wow this code is very interesting and really its working
Left by hair loss products for women on Nov 17, 2010 11:19 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
I'm using VS2010 with ASP.NET Ajax 4.0 controltoolkit.
AsyncFileUpload uploads the file as soon as I select it, no need for an upload button.
But the page is not refreshed, so I can't get the label updated despite I can see how it goes through the label text update line on the codebehind AsyncFileUpload1.UploadedComplete event
Am I missing anything?
Left by matias on Nov 24, 2010 11:59 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
I spent FOREVER looking for this code snippet. Thanks so much for posting...works great.
Left by Steelers Blog on Nov 30, 2010 7:48 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Is there any video for ajax tool kits
Left by Franklin Pumps on Dec 03, 2010 1:51 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
This is buggy. Doesn't seem to work at all on Firefox, is this IE only? It feels not ready for prime time.
Left by Gloam on Dec 30, 2010 3:18 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Thank you for this great information on a complicated, technical topic. Much appreciated.
Left by Birding on Jan 09, 2011 5:08 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Thanks for this it really applies to me.
Left by Eye Webmaster on Jan 24, 2011 8:23 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
It does not work when using Master Page..
So I tried Full PostBack..
<asp:PostBackTrigger ControlID="AddNewImage_BT" />

After Going for Full PostBack, if I click "AddNewImage_BT" twice it works... Strange...
I think there is some issue with ScripManager being on the Master Page..
Any Suggestion??..
Left by Keyur Patel on Feb 18, 2011 8:18 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Thanks for the FileUpload info.
Left by Bird Feeders on Feb 18, 2011 11:18 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Very good article,Thanks for great post
Left by pimples on Feb 18, 2011 1:39 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
I tried the code which you have provided and it wasn't working before. I had to find alternative, but I took your example once again, it seemed to got the job done this time... I hate to code but love people like you who help us out.
Left by wholesale playing cards on Feb 22, 2011 12:30 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Your post is really very useful. Do keep posting such things. Thanks.
Left by canvas prints on Feb 22, 2011 3:39 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Finally i found codes for which i was looking for. Thanks
Left by ladder racks for pickups on Mar 24, 2011 8:36 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Nice post. But of NO USE. because the client will hit the server 2 times. 1 while selecting the file and 2 while pressing the button.

Breakpoint on UploadedComplete event you can see that the event is triggering soon after file got selected in the client.
Left by Rajesh on Mar 25, 2011 5:35 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
i want to know how to see this uploaded file?
which we can upload?
Left by Torrent on Apr 07, 2011 4:09 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
keep posting because you are very useful for us.


Left by torrents on Apr 15, 2011 4:09 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
"Any clues about a workaround for this?" i ve seen no answer till now... Anyway the post have been really helpful till now.
Left by free videos on May 09, 2011 8:14 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
This has has everything I was looking for, thanks!
Left by computer repair braintree on May 15, 2011 11:08 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Great blog. I'm kind of a geek myself and i love to read this blog I'll bookmark it!
Left by road accident compensation on Jun 25, 2011 7:36 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Thanks for doing this! I'm trying to learn more about update panel but it gets conusing :-s
Left by mosquitoes traps on Jul 02, 2011 1:01 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
This blog is not entirely correct. The Upload button is useless as the file is automatically posted back upon selection.
Left by rb on Jul 12, 2011 9:21 AM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Nice Blog !! Thanks for sharing with us.
Left by Dual Flush Toilet on Aug 25, 2011 12:27 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
I'm kind of a geek myself and i love to read this blog I'll bookmark it!
Left by vigrx plus scam on Nov 04, 2011 12:19 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
AsyncFileUpload is NOT possible to use for bigger files, while it keeps whole file content in session !!! I should use FileUpload instead ... :-((
Left by DanoP on Nov 17, 2011 3:33 PM

# re: FileUpload in UpdatePanel, ASP.NET, like Gmail

Requesting Gravatar...
Very informative post. Its really helpful for me and beginner too. Check out this link too its also having a nice post with wonderful explanation on Ajax Toolkit AsyncFileUpload Control in ASP.Net...
http://mindstick.com/Articles/b238f35b-b447-4446-9d04-d0f2d9aadec5/?Ajax%20Toolkit%20AsyncFileUpload%20Control%20in%20ASP.Net
Left by Ajay Singh on Jan 03, 2012 2:43 PM

Your comment:

 (will show your gravatar)