FileUpload Doesn't Work When Nested In UpdatePanel?

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