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">
<asp:button id="btnUpload" runat="server" text="Upload" onclick="btnUpload_Click">
<asp:label id="Label1" runat="server"> </asp:label></asp:button></cc1:asyncfileupload></contenttemplate>
</asp:updatepanel>
<asp:label id="Label2" runat="server">
</asp:label></asp:image></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 !!