FileUpload In UpdatePanel HasFile Returns False Asp.Net Ajax

This example shows how to use FileUpload Control In UpdatePanel Using Asp.Net Ajax when FileUpload.HasFile method returns false inside Update Panel.

If you are uploading files with FileUpload Inside Ajax UpdatePanel, Upload fails because few controls doesn't work with Ajax Partial postbacks.

FileUpload HasFile Return False In UpdatePanel

To make full page postback for uploads to work we need to define PostBackTrigger for upload button outside ContentTemplate in html source.

HTML SOURCE
   1:  <asp:ScriptManager ID="ScriptManager1" runat="server"/>
   2:   
   3:  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
   4:  <ContentTemplate>
   5:  <asp:FileUpload ID="FileUpload1" runat="server" />
   6:  <asp:Button ID="btnUpload" runat="server" 
   7:              Text="Upload File" 
   8:              onclick="btnUpload_Click"/>
   9:  <asp:Label ID="lblMessage" runat="server"></asp:Label>
  10:  </ContentTemplate>
  11:   
  12:  <Triggers>
  13:  <asp:PostBackTrigger ControlID="btnUpload" />
  14:  </Triggers>
  15:  </asp:UpdatePanel>

Now we can write code in Click Event of Button to Upload Files With FileUpload Control In UpdatePanel.
protected void btnUpload_Click(object sender, EventArgs e)
    {
        if (FileUpload1.HasFile)
        {
            string fileName = FileUpload1.PostedFile.FileName;
            FileUpload1.SaveAs(Server.MapPath("~/Uploads/" + fileName));
            lblMessage.Text = "File uploaded successfully";
        }
    }

FileUpload Control In UpdatePanel Asp.Net Ajax


If you like this post than join us or share

2 comments:

Anonymous said...

An amazing piece of work here. Most people would not know this. AJAX requires a PostBack for the file upload rather than the AsynPostBack. Thanks


Anonymous said...

Congratulations! Great article!


Find More Articles