Click here to Skip to main content
15,867,686 members
Articles / Web Development / ASP.NET

File Upload in Update Panel

Rate me:
Please Sign up or sign in to vote.
4.75/5 (4 votes)
25 Oct 2012CPOL2 min read 123K   14   12
File upload in update panel

Background

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. Decreases 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!

Code

We would be creating a small web application, where we would have the 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.NET
<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.NET
<asp:UpdatePanel ID="UpdatePanel1" runat="server"
UpdateMode="Conditional">
          <ContentTemplate>
              <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">
                  <ProgressTemplate>
                      Please wait image is getting uploaded....
                  </ProgressTemplate>
              </asp:UpdateProgress>
              <br />
              <b>Please view the below image uploaded</b><br />
              <asp:Image ID="img" runat="server" Width="100"
              Height="100" ImageAlign="Middle" />
          </ContentTemplate>
      </asp:UpdatePanel>

As told previously, file upload control doesn't work 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.NET
 <asp:UpdatePanel ID="UpdatePanel1"
 runat="server" UpdateMode="Conditional">
           <ContentTemplate>
               <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">
                   <ProgressTemplate>
                       Please wait image is getting uploaded....
                   </ProgressTemplate>
               </asp:UpdateProgress>
               <br />
               <b>Please view the below image uploaded</b><br />
               <asp:Image ID="img" runat="server"
               Width="100" Height="100" ImageAlign="Middle" />
           </ContentTemplate>
           <Triggers>
               <asp:PostBackTrigger ControlID="btnUpload"  />
               <asp:AsyncPostBackTrigger ControlID="btnProcessData" />
           </Triggers>
</asp:UpdatePanel>

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

Upload Button Code

C#
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

C#
protected void btnProcessData_Click(object sender, EventArgs e)
      {
          System.Threading.Thread.Sleep(5000);
          lblMessage.Visible = true;
      }

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

This article was originally posted at http://varunkhanna.blogspot.com/feeds/posts/default

License

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


Written By
United States United States
Please visit my blog http://varunkhanna.blogspot.com/ to read more articles

Comments and Discussions

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

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

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