Click here to Skip to main content
15,868,164 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi.

I am having trouble working on FileUpload control inside UpdatePanel.
I actually have 2 scenarios

1. Button is added to AsyncPostBackTrigger but it cannot detect HasFiles of the FileUpload.

2. If button is added as PostBackTrigger in update panel, it causes full page post back which closes my nested grid when it has to remain open. Here is my code.


HTML / ASP.NET

This template field is inside the child gridview of GridView1 (I have 2 nested gridviews)


ASP.NET
<asp:TemplateField HeaderText="Payslip Document" ItemStyle-Width="15%">
<ItemTemplate>
      <asp:UpdatePanel ID="upPayslipUpload" runat="server" UpdateMode="Conditional">
      <Triggers>
          <asp:PostBackTrigger ControlID="btnUpload" /><%--This line causes full page post back--%>
          <%--<asp:AsyncPostBackTrigger EventName="Click" ControlID="btnUpload" />--%>      <%--This line cannot detect HasFile--%>
      </Triggers>
      <ContentTemplate>
        <asp:FileUpload ID="btnPayslipUpload" runat="server"  />
        <asp:Button id="btnUpload" runat="server" CssClass="fas fa-upload" OnClick="btnUpload_Click"></asp:Button>
        <p><asp:Label ID="lblPayslipUploadErr" runat="server" CssClass="error"></asp:Label></p>
                                                                                
     </ContentTemplate>
     </asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>


What I have tried:

Here is my code-behind

C#
protected void btnUpload_Click(object sender, EventArgs e)
        {
            var btnUpload = (Button)sender;
            var gvRow = (GridViewRow)btnUpload.Parent.Parent.Parent.Parent;
            var btnPayslipUpload = (FileUpload)gvRow.FindControl("btnPayslipUpload");
            var lblPayslipUploadErr = (Label)gvRow.FindControl("lblPayslipUploadErr");
            var upPayslipUpload = (UpdatePanel)gvRow.FindControl("upPayslipUpload");
            lblPayslipUploadErr.Text = "";

            if (btnPayslipUpload.HasFile)
            {
                if(FileUploadValidateExt(btnPayslipUpload.FileName))
                {
                    if (FileUploadValidateFileSize(btnPayslipUpload.PostedFile.ContentLength))
                    {

                    }
                    else
                    {
                        lblPayslipUploadErr.Text = $"Maximum size exceeded. Accepted: {maxFileSizeInKB} KB.";
                    }
                }
                else
                {
                    //INVALID FILE NAME
                    lblPayslipUploadErr.Text = $"Please upload a file with extension {fileExtension}";
                }
            }
        }



Here's the design

IMAGE
Posted
Updated 27-Aug-20 23:17pm

FileUpload doesn't work inside an async UpdatePanel, there is no workaround or fix. If you want async upload of a file you'll need to use some other method. There are lots of plug-ins that support async uploads if you google, or html5 has built-in support for it if you google "html5 upload file".
 
Share this answer
 
I will rephrase what @F-ES Sitecore probably intended to share:
FileUpload control is not supported when working along partial update as it requires a full page postback.

What does this translates to, two options:
1. Use a PostbackTrigger on UpdatePanel to make it happen
ASP.NET
<asp:UpdatePanel ID="FormUpdatePanel" runat="server">
    <ContentTemplate>
        <div>
            <asp:FileUpload ID="EntryFile1Upload" runat="server" />
            <br />
            <asp:Button ID="UploadButton" OnClick="UploadButton_Click" runat="server" Text="Upload File" />
        </div>
    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="UploadButton" />
    </Triggers>
</asp:UpdatePanel>
Refer: https://www.surinderbhomra.com/Blog/2018/12/18/Getting-FileUpload-To-Work-Inside-An-UpdatePanel[^]

2. Use another control that supports async file upload.
In past, I have used following: AsyncFileUpload Sample[^]

Also, found a CP article on similar control: Asynchronous File Upload[^]

Give a try.
 
Share this answer
 
I used Asynchronous File Upload and it saved me. Thanks!
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900