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

Here is a previously asked question that may cover this.

Answer 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

Answer 3

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>