AsyncFileUpload inside ModalPopupExtender inside TabContainer

Question

I have a TabContainer in which each tab have a ModalPopupExtender. Inside each ModalPopupExtender I've defined an AsyncFileUpload.

My aim is that, when the file has uploaded/failed, it shows a label inside the ModalPopupExtender showing this fact. Also, I want to update the corresponding TabPanel with information about the uploaded file (before or after closing the ModalPopupExtender, it's the same for me).

I think the problem is about having the ModalPopupExtender inside the ContentTemplate's TabPanel, but I don't figure out the solution.

My markup code:

<AjaxControlToolkit:TabPanel ID="tBrochure" runat="server" HeaderText="Brochure" OnDemandMode="Always" EnableViewState="true">
  <ContentTemplate>
    <asp:Label ID="lBrochureDesc" runat="server" Text="In this tab you can set or update the brochure document and its description for the Maintenance Contracts product." /><br /><br />

    <asp:Label ID="lBrochureCurrentFile" runat="server" Text="Current File" CssClass="LabelForTextBox" />:&nbsp;
    <asp:Label ID="lBrochureCurrentFileName" runat="server" Text="" /><br />

    <asp:Label ID="lBrochureCurrentDateTag" runat="server" Text="Upload Date" CssClass="LabelForTextBox" />:&nbsp;
    <asp:Label ID="lBrochureCurrentDate" runat="server" Text="" /><br /><br />

    <asp:Panel ID="pBrochureUploadFileLink" runat="server" style="margin-left: 20px;">
      <asp:ImageButton ID="ibBrochureUploadFile" runat="server" ImageUrl="~/Images/icon_add.png" Width="20px" style="vertical-align: middle" />
      <asp:Label ID="lBrochureUploadFile" runat="server" Text="Upload a new document" style="vertical-align: middle" /><br />
    </asp:Panel>

    <asp:Panel ID="pBrochureUploadFilePopup" runat="server" CssClass="Popup" style="display:none;">
      <asp:Panel ID="pBrochureUploadFilePopupTitleBar" runat="server" CssClass="PopupTitleBar">
        <asp:ImageButton ID="imBrochureUploadFilePopupClose" runat="server" ImageUrl="~/Images/icon_close.png" />
      </asp:Panel>
      <asp:Panel ID="pBrochureUploadFilePopupContent" runat="server" CssClass="PopupContent">
        <asp:Label ID="lBrochureUploadFilePopupTitle" runat="server" CssClass="title" Text="Upload a new file" />
        <AjaxControlToolkit:AsyncFileUpload ID="fuBrochure" runat="server" CompleteBackColor="Green" ErrorBackColor="Red" /><br /><br />
        <asp:Label ID="lBrochureUploadFileStatus" runat="server" Text="" />
        <asp:Label ID="lBrochureUploadFileAdvice" runat="server" Text="The current file will be replaced but a backup of that version will be stored." />
      </asp:Panel>
    </asp:Panel>
    <asp:Button ID="bBrochureDummy" runat="server" style="display:none;" />
    <AjaxControlToolkit:ModalPopupExtender ID="mpeBrochureUpload" runat="server" ClientIDMode="Static"
                                           TargetControlID="pBrochureUploadFileLink"
                                           PopupControlID="pBrochureUploadFilePopup"
                                           CancelControlID="imBrochureUploadFilePopupClose"
                                           PopupDragHandleControlID="pBrochureUploadFilePopupTitleBar"
                                           BackgroundCssClass="PopupBackground" DropShadow="true" />


    <br /><br />

    <asp:Label ID="lBrochureDescription" runat="server" Text="Description" CssClass="LabelForTextBox" />:<br />
    <asp:TextBox ID="tbBrochureDescription" runat="server" TextMode="MultiLine" CssClass="TextBox" Style="height:50px; width:200px; max-width: 900px;"/><br /><br />
    <asp:LinkButton ID="lbBrochureSave" runat="server" Text="Save" CssClass="ButtonWithArrow" />
    <asp:LinkButton ID="lbBrochureCancel" runat="server" Text="Cancel" CssClass="ButtonWithArrow" />
  </ContentTemplate>
</AjaxControlToolkit:TabPanel>

My codebehind:

Protected Sub fuBrochure_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) Handles fuBrochure.UploadedComplete
    If fuBrochure.HasFile Then
        Dim fileName As String = fuBrochure.FileName
        Dim fileType As String = fuBrochure.ContentType
        If Products.updateDoc(productId, Products.DocumentId.Brochure, fileName, fileType) Then
            fuBrochure.SaveAs(MapPath(path + fileName))
        End If
        UpdateBrochurePanel()
        lBrochureUploadFileStatus.Text = "File uploaded succesfully!"
        mpeBrochureUpload.Hide()
    End If
End Sub

Protected Sub fuBrochure_UploadedFileError(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) Handles fuBrochure.UploadedFileError
    lBrochureUploadFileStatus.Text = "Error!"
End Sub

In this code, the lines:

lBrochureUploadFileStatus.Text = "File uploaded succesfully!"
mpeBrochureUpload.Hide()

are not doing anything, but the line

fuBrochure.SaveAs(MapPath(path + fileName))

works fine.

Thanks!

Answer 1

AsyncFileUpload control uses an iframe to post it files to server. This means, nothing on the page is posted back when uploading the file. That is reason your label is not updated

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "size", "top.$get(\"" + lBrochureUploadFileStatus.ClientID + "\").innerHTML = 'File uploaded succesfully!';", true);

you can find a simple example here http://technico.qnownow.com/using-asyncfileupload-control-in-asp-net-ajax/

It is not exactly what you are looking for, but it should help. Hope it helps.