Updateprogress never stops or hides even after work is completed

Question

Below is the code i have on my aspx page. I am trying to gray out page with a loading image using the asp:UpdateProgress control. Everything works, except the asp:UpdateProgress control never completes, even when the work is completed and the page is updated??? I am using a master page. I have to be missing something simple that ends the process.

<asp:UpdateProgress ID="UpdateProgress1" runat="server" 
    AssociatedUpdatePanelID="updatepanel1" DynamicLayout="false" DisplayAfter="0">
    <ProgressTemplate>
        <div id="overlay">
            <div id="modalprogress">
                <div id="theprogress">
                    <img alt="" src="ajax-loader.gif" />
                </div>
           </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" AllowedFileTypes="xml" 
            AutoStartUpload="true" MaxFileSize="30000" MaximumNumberOfFiles="1" 
            OnUploadComplete="AjaxFileUpload1_UploadComplete" Mode="Auto"
            runat="server" ClearFileListAfterUpload="True" />

        <asp:Button ID="btnReadXml" Text="Button" runat="server" 
            OnClick="btnReadXml_Click" />
        <br />
        <asp:Label ID="lblmessage" runat="server" Font-Bold="true"> 
        </asp:Label>
        <br />
        <FTB:FreeTextBox ID="txtAddendum" ToolbarLayout="SelectAll, Cut, Copy, 
            Paste, Delete, Undo, Redo;|Bold,Italic,Underline,BulletedList"
            runat="server" Height="500px" Width="100%">
        </FTB:FreeTextBox>
    </ContentTemplate>
</asp:UpdatePanel>

CSS:

<style>
    #overlay {
        position: fixed;
        z-index: 99;
        top: 0px;
        left: 0px;
        background-color: #FFFFFF;
        width: 100%;
        height: 100%;
        filter: Alpha(Opacity=80);
        opacity: 0.80;
        -noz-opacity: 0.80;
    }

    #theprogress {
        background-color: #038890;
        width: 110px;
        height: 24px;
        text-align: center;
        filter: Alpha(Opacity=100);
        opacity: 1;
        -noz-opacity: 1;
    }

    #modalprogress {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -11px 0 0 -55px;
        color: white;
    }

    body > #modalprogress {
        position: fixed;
    }
</style>

Answer 1

The problem is that you're using a AjaxFileUpload control inside an update panel. AjaxFileUpload controls force full postbacks -- this is unavoidable. There is no async postback for this control, and no point in them being inside an update panel, as issues could arise...

What's probably happening is that the postback caused by the AjaxFileUpload control starts the UpdateProgress control, but because the postback is not asynchronous, it "never ends" (because it never began asynchronously, it was just a synchronous postback).