ASP.NET FileUpload in UpdatePanel - still not work

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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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);