How to perform a file upload in an Update Panel

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.

This sample code uploads an mp3 file (with extension validation) to the server and automatically sets the expiry date one month from today. The Upload button causes a page postback.

The “extend” button will add one month to today and generate a new date output. This one is called async.

 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                
class="checkbox"> runat="server" ID="chkHasAudio" AutoPostBack="true" OnCheckedChanged="chkHasAudio_CheckedChanged" Text="Has Audio File?" />
<asp:Panel runat="server" ID="pnlUploadStuff">
class="col-md-4 col-sm-4"> Upload new file:
class="col-md-5 col-sm-5"> ID="fileUploadImage" runat="server">
class="col-md-3 col-sm-3 "> ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" CssClass="btn btn-default pull-right" CausesValidation="false" />
class="clearfix">
<asp:Label runat="server" ID="lblErrorUpload" CssClass="alert alert-danger" />
class="clearfix">
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> <ProgressTemplate> Please wait while the audio is getting uploaded.... </ProgressTemplate> </asp:UpdateProgress> <br /> <i class="fa fa-download"></i> <asp:HyperLink runat="server" ID="hyperFile" Target="_blank" /> <br /> <br /> <i class="fa fa-times"></i> File is available until: <asp:Label runat="server" ID="lblAvailableUntil" CssClass="label label-cyan" /> <asp:Button runat="server" ID="btnExtend" Text="Extend" OnClick="btnExtend_Click" CssClass="btn btn-default" CausesValidation="false" /> </asp:Panel> </ContentTemplate> <Triggers> <asp:PostBackTrigger ControlID="btnUpload" /> <asp:AsyncPostBackTrigger ControlID="btnExtend" /> </Triggers> </asp:UpdatePanel>

Code behind (in c#)

  protected void chkHasAudio_CheckedChanged(object sender, EventArgs e)
        {
            pnlUploadStuff.Visible = chkHasAudio.Checked;
        }

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

                string fileName = fileUploadImage.FileName;
                if (System.IO.Path.GetExtension(fileUploadImage.PostedFile.FileName).ToLower().Replace(".", "") != "mp3")
                {
                    lblErrorUpload.Text = "Please select an MP3 file!";
                    lblErrorUpload.Visible = true;
                }
                else
                {

                    try
                    {
                        fileUploadImage.SaveAs("~/Uploads/" + fileName);
                        hyperFile.Text = fileName;
                        hyperFile.NavigateUrl = "~/Uploads/" + fileName;
                        lblAvailableUntil.Text = DateTime.Now.AddMonths(1).ToShortDateString();
                    }
                    catch (Exception ex)
                    {
                        lblErrorUpload.Text = "Could not save file! " + ex.Message;
                        lblErrorUpload.Visible = true;
                    }
                }
            }
            else {
                lblErrorUpload.Text = "Please select a file!";
                lblErrorUpload.Visible = true;
            }
        }

        protected void btnExtend_Click(object sender, EventArgs e)
        {
            lblAvailableUntil.Text = DateTime.Now.AddMonths(1).ToShortDateString();
        }
Advertisements