File Upload in Update Panel

CodeProject

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.