ASP.NET FileUpload, Update Panel, Update Progress

Here is an example of a file upload inside an update panel with a upload progress control. I used this with a timer and several other panels as well. The updatepanel and fileupload controls are very finicky to be able to work together.

<asp:Panel ID="Panel_FileUploaded" runat="server" Visible="false">
    You have uploaded your filesuccesfully.
</asp:Panel>

<asp:Panel ID="Panel_FileUpload" runat="server" Visible="true">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
        <Triggers>
            <asp:PostBackTrigger ControlID="Button1" /> 
        </Triggers>
        <ContentTemplate>
            Please upload file from your computer. <br /><br />
            File: <asp:FileUpload ID="FileUpload1" runat="server"  />
            <asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" OnClientClick="javascript:if(document.getElementById('ctl00_Content_FileUpload1').value.length > 0 ){$get('ctl00_Content_UpdateProgress1').style.display='block';$get('ctl00_Content_Button1').style.display='none';}"  />
            <span style="color:Red;"><asp:Label id="Label_Error" runat="server" Visible="false" Text="* Required" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            <img src="work_in_progress.gif" />
            <span style="color:Green;">Working...</span>
        </ProgressTemplate>
    </asp:UpdateProgress>
</asp:Panel>
    protected void Button1_Click(object sender, EventArgs e)
    {
     
        if (!FileUpload1.HasFile)
        {
            Label_Error.Visible = true;
        }
        else
        {
            // check file extension, upload, etc ...
            Panel_FileUploaded.Visible = true;
            Panel_FileUpload.Visible = false;
        }  
    }
Advertisements