Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

File Upload in Update Panel

, 25 Oct 2012 CPOL
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.

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

Code

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">
            <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 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">
            <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 

 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)
        {
            System.Threading.Thread.Sleep(5000);
            lblMessage.Visible = true;
        }

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

License

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

Share

About the Author

Khanna_Varun

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

Comments and Discussions

 
Questionregarding the update panel PinmemberShbinesh24-Dec-14 1:15 
QuestionAJAX privacy handling Pinmemberms31324-Jun-14 14:37 
QuestionFile upload Control: ERROR PinmemberKundan19846-Jun-14 1:18 
QuestionFileUpload control behaviour changes in 64 bit [modified] PinmemberMember 1023940212-Dec-13 1:17 
QuestionFile Upload Control PinmemberMember 1018507317-Sep-13 2:05 
AnswerRe: File Upload Control PinmemberMember 1018507317-Sep-13 2:18 
QuestionFormatting and... PinmvpSandeep Mewara23-Oct-12 23:17 
AnswerFormatting PinmemberClifford Nelson23-Oct-12 22:40 
AnswerStill had Formatting issues PinmemberClifford Nelson24-Oct-12 7:15 
GeneralRe: Still had Formatting issues PinmemberKhanna_Varun24-Oct-12 15:36 
AnswerRe: Still had Formatting issues PinmemberClifford Nelson24-Oct-12 16:43 
GeneralRe: Still had Formatting issues Pinmemberjagonzalezx30-Oct-13 21: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
Web01 | 2.8.141223.1 | Last Updated 26 Oct 2012
Article Copyright 2012 by Khanna_Varun
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid