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

Question

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

Answer 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>