Click here to Skip to main content
11,804,919 members (68,912 online)
Click here to Skip to main content

Tagged as

File Upload in Update Panel

, 25 Oct 2012 CPOL 62.1K 12
Rate this:
Please Sign up or sign in to vote.
AJAX update panel is used to prevent the page to have the full postback.Using update panel we can have partial page postback.


AJAX update panel is used to prevent the page to have the full postback. Using update panel we can have partial page postback. Partial page postback does the following

  1. Improves the performance of the application
  2. Decrease the page load time of the application
  3. Decreases the round trip between the application and server
  4. Only the section in web page which needs to be refreshed gets postback

We know that we can upload file to server using File upload control. However, if we use file upload control inside update panel, then it doesn't works. The reason for this is that file upload control doesn't work with asynchronous postback. In this article, we would be working on making file upload control work with update panel and update progress.

Let's do some coding!  


We would be creating small web application, where we would be have following

  • File upload control to upload the files
  • Upload button to SAVE image and view the uploaded image
  • Process button to show Upload progress control

So let's start

To make AJAX work in your application, we have to first place SCRIPT MANAGER on our page. Now, if you are using master page in your application and your web page inherits master page, then you can place script manager in master page. If you don't want master page to have script manager,you can also place script manager on specific web pages.

Here, I am placing script manager on my web form as I am not inheriting any master page

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

Next we would place update panel on our web page. Inside update panel, we would place file Upload control, Upload button, Process button, Upload progress control and image control. Below is the code

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
              <asp:FileUpload ID="fileUploadImage" runat="server"></asp:FileUpload>
              <asp:Button ID="btnUpload" runat="server" Text="Upload Image" OnClick="btnUpload_Click" />
              <br />
              <asp:Button ID="btnProcessData" runat="server" Text="Process Data" OnClick="btnProcessData_Click" /><br />
              <asp:Label ID="lblMessage" runat="server" Text="Image uploaded successfully." Visible="false"></asp:Label><br />
              <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                      Please wait image is getting uploaded....
              <br />
              <b>Please view the below image uploaded</b><br />
              <asp:Image ID="img" runat="server" Width="100" Height="100" ImageAlign="Middle" />

As told previously, file upload control doesn't works with asynchronous postback, Hence, we would need to postback to get the file uploaded. Here comes the role of TRIGGERS.

Update Panel control has property named as trigger which has 2 properties - PostbackTrigger and AsynchronousTrigger. In these properties we can specify, for which control we want the postback even if it is specified inside update panel.

Below is the update code:

 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
               <asp:FileUpload ID="fileUploadImage" runat="server"></asp:FileUpload>

Below is the code behind code for both Upload button and ProcessData button:

Upload Button code 

protected void btnUpload_Click(object sender, EventArgs e)
           if (fileUploadImage.HasFile)

               fileName = fileUploadImage.FileName;
               fileUploadImage.SaveAs("~/Images/" + fileName);
               img.ImageUrl = "~/Images/" + fileName;

ProcessData Button Code 

protected void btnProcessData_Click(object sender, EventArgs e)
          lblMessage.Visible = true;

I hope with this article will help you to work with fileupload control in update panel.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States
Please visit my blog to read more articles

You may also be interested in...

Comments and Discussions

Questionregarding the update panel Pin
Shbinesh24-Dec-14 0:15
memberShbinesh24-Dec-14 0:15 
QuestionAJAX privacy handling Pin
ms31324-Jun-14 13:37
memberms31324-Jun-14 13:37 
QuestionFile upload Control: ERROR Pin
Kundan19846-Jun-14 0:18
memberKundan19846-Jun-14 0:18 
QuestionFileUpload control behaviour changes in 64 bit Pin
Member 1023940212-Dec-13 0:17
memberMember 1023940212-Dec-13 0:17 
QuestionFile Upload Control Pin
Member 1018507317-Sep-13 1:05
memberMember 1018507317-Sep-13 1:05 
AnswerRe: File Upload Control Pin
Member 1018507317-Sep-13 1:18
memberMember 1018507317-Sep-13 1:18 
QuestionFormatting and... Pin
Sandeep Mewara23-Oct-12 22:17
mvpSandeep Mewara23-Oct-12 22:17 
AnswerFormatting Pin
Clifford Nelson23-Oct-12 21:40
memberClifford Nelson23-Oct-12 21:40 
AnswerStill had Formatting issues Pin
Clifford Nelson24-Oct-12 6:15
memberClifford Nelson24-Oct-12 6:15 
GeneralRe: Still had Formatting issues Pin
Khanna_Varun24-Oct-12 14:36
memberKhanna_Varun24-Oct-12 14:36 
AnswerRe: Still had Formatting issues Pin
Clifford Nelson24-Oct-12 15:43
memberClifford Nelson24-Oct-12 15:43 
GeneralRe: Still had Formatting issues Pin
jagonzalezx30-Oct-13 20:02
memberjagonzalezx30-Oct-13 20:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.151002.1 | Last Updated 26 Oct 2012
Article Copyright 2012 by Khanna_Varun
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid