ASP.NET FileUpload in UpdatePanel - still not working

Question

Attempting to use a FileUpload or AsyncFileUpload control in an updatepanel on a NET 4.5/C# web application.

I've tried using either standard Scriptmanager or ToolKitScriptManager in my masterpage.

My Save button is set as a PostBackTrigger (tried AsyncPostbackTrigger too).

No matter what, my (Async)FileUpload.HasFile always returns false.

Remove the updatepanel and both uploadcontrols work fine.

What really throws me is that I have this working in another project (scriptmanager in masterpage, Fileupload in updatepanel, SaveButton is PostbackTrigger).

Is there some specific AJAX version or .NET version that can cause problems?

This is extremely frustrating.

I have used this currently and have no issues can you show what code you currently are using perhaps it's a property setting on the UpdatePanel itself that's incorrect.. — MethodMan, Oct 15 '14 at 18:42

callisto · Answer 1 · 2016-06-29T12:28:17.123

15

Adding the button to the UpdatePanel's trigger tag, I got it working:

<asp:UpdatePanel ID="UpdatePanel" runat="server">
    <ContentTemplate>
        <asp:FileUpload ID="FileUpload" runat="server" />
        <asp:Button ID="btnUpload" runat="server" Text="Upload"
           OnClick = "btnUpLoad_OnClick" />               
    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID = "btnUpload" />
    </Triggers>
</asp:UpdatePanel>

I did not have to do anything different server-side (like user5159158's answer).

edited Jun 29 '16 at 12:28

answered Mar 11 '16 at 07:58

callisto

4,921
11
51
92

To my experience, it must be a `PostBackTrigger` explicitly. An `AsyncPostBackTrigger ` did not work for me. – Marcel Dec 02 '19 at 08:57

score 9 · Answer 2 · answered Oct 12 '17 at 04:35

9

In Page_Load add: Page.Form.Attributes.Add("enctype", "multipart/form-data");

answered Oct 12 '17 at 04:35

Tran Anh Hien

687
8
11

2

In a WebForms ASP.NET project, I had achieved sync file upload from inside `UpdatePanel` only after I also set the `enctype` on the Page's Form. Setting the `Button` as a `PostBackTrigger` was necessary but not enough. Also note that you can alternatively write this as `Page.Form.Enctype = "multipart/form-data";`. – liviriniu Jun 13 '20 at 00:23

score 8 · Answer 3 · answered Jul 27 '15 at 05:39

8

File Upload will not work with a partial post back. It requires full page request. So add the below line in your page load.

ScriptManager.GetCurrent(this).RegisterPostBackControl(this.YourControlID);

answered Jul 27 '15 at 05:39

This is an alternative solution to @callisto's PostBackTrigger – Marcel Dec 02 '19 at 08:58

score 6 · Answer 4 · answered Oct 15 '14 at 21:03

FileUpload

FileUpload requires full page request. This is a limitation of the XmlHttpRequest component used in all AJAX frameworks for asynchronous calls to the application.

What really throws me is that I have this working in another project (scriptmanager in masterpage, Fileupload in updatepanel, SaveButton is PostbackTrigger).

I think you are using Full PostBack, although FileUpload is inside **UpdatePanel.

For example,

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>
      <asp:FileUpload ID="FileUpload1" runat="server" />
      <asp:Button ID="SaveButton" runat="server" OnClick="SaveButton_Click" 
          Text="Upload your file" />
   </ContentTemplate>
   <Triggers>
      <asp:PostBackTrigger ControlID="SaveButton" />
   </Triggers>
</asp:UpdatePanel>

AsyncFileUpload

If you use AsyncFileUpload with UpdatePanel, AsyncFileUpload.HasFile should only checked inside UploadedComplete (you cannot check inside Button click event).

The reason is AsyncFileUpload is uploaded the file via Async by itself.

Note: make sure you use ToolkitScriptManager instead of ScriptManager

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="Server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <ajaxToolkit:AsyncFileUpload runat="server" ID="AsyncFileUpload1"
            OnUploadedComplete="AsyncFileUpload1_UploadedComplete" />
        <asp:TextBox runat="server" ID="TextBox1" /><br/>
        <asp:Button ID="SaveButton" runat="server" OnClick="SaveButton_Click"
            Text="Save" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="SaveButton" />
    </Triggers>
</asp:UpdatePanel>

private string FileName
{
    get { return (string)(Session["FileName"] ?? ""); }
    set { Session["FileName"] = value; }
}

protected void SaveButton_Click(object sender, EventArgs e)
{
    string fileName = FileName;
    string path = Server.MapPath("~/App_Data/");
    var fileInfo = new FileInfo(path + FileName);
}

protected void AsyncFileUpload1_UploadedComplete(object sender, 
    AsyncFileUploadEventArgs e)
{
    if (AsyncFileUpload1.HasFile)
    {
        FileName = AsyncFileUpload1.FileName;
        string path = Server.MapPath("~/App_Data/");
        AsyncFileUpload1.SaveAs(path + AsyncFileUpload1.FileName);
    }
}

Other Thoughts

I personally do not like using AsyncFileUpload inside UpdatePanel. Instead, I'll rather use Full PostBack if I need to upload a file.

I am doing some operations with the file once it has been uploaded, and I also would like to display a message which doing the operation. Unfortunately I can't use updatepanel. what method do you recommend? — Si8, Jan 13 '17 at 17:00
I had success with method 1, but I also needed to use Tran Anh Hien's suggestion to add `Page.Form.Enctype = "multipart/form-data";` in the Page_Load event. — Jim B, Oct 23 '20 at 18:43

ASP.NET FileUpload in UpdatePanel - still not working

4 Answers4

FileUpload

AsyncFileUpload

Other Thoughts

Linked