FileUpload Doesn’t Work When Nested In UpdatePanel? C#

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                        <asp:FileUpload onchange="clickTheButton();" ID="FileUpload1" runat="server" />
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Button1" />
                </Triggers>
</asp:UpdatePanel>

Button 1 is outside the update panel and the javascript that gets run when a user adds a file in the upload box is this:

function clickTheButton() {
            document.getElementById('<%= Button1.ClientID %>').click();
        }

The problem is simple. FileUpload1.HasFile == false. I don’t know why this is, but when I put it in the update panel it ceases to work.

I have seen some other threads on this. But none of them answer why this is happening, they just point to things you can download.

EDIT: Really my main reason for wanting to do this is so that I can get a ..Uploading File.. Tag to pop up while the client is uploading to the server and once it has completed, display it in a datalist. I just cant get the UpdateProgress to work.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Basically you just need to make your button do a full postback to send the file. Also make sure that you have this.Form.Enctype = “multipart/form-data”; set in your code, or you can put in that page. AsyncPostbacks don’t work with files for security reasons as mentioned, without hacks. (I’ve never been able to get it to work).

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
           <asp:FileUpload onchange="clickTheButton();" ID="FileUpload1" runat="server" />
      </ContentTemplate>
      <Triggers>
         <asp:PostBackTrigger ControlID="Button1" />
      </Triggers>
 </asp:UpdatePanel>

Method 2

For security purposes, browsers don’t let you post files via javascript. Imagine if I could write a little bit a javascript to asynchronously submit the contents of your My Documents folder to my server.

So javascript-ish methods of posting the form, like the XMLHttpRequest used by the UpdatePanel, won’t work.

This post describes a decent work around if you’re on 3.5 SP1. http://geekswithblogs.net/ranganh/archive/2009/10/01/fileupload-in-updatepanel-asp.net-like-gmail.aspx

And this post describes a couple work arounds if you’d prefer not to use the AjaxControlToolkit. http://geekswithblogs.net/ranganh/archive/2008/04/01/file-upload-in-updatepanel-asp.net-ajax.aspx

Method 3

File Upload will not work with a partial post back.
So just add this line at your page load

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

Or use PostBackTrigger.

<Triggers>
            <asp:PostBackTrigger ControlID="YourControlID" />
</Triggers>

Or You need special AsyncFileUpload control as defined in AjaxControl Toolkit.

<ajaxToolkit:AsyncFileUpload OnClientUploadError="uploadError"
     OnClientUploadComplete="uploadComplete" runat="server"
     ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern"
     UploadingBackColor="#CCFFFF" ThrobberID="myThrobber" />

You can check here.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0