Commented Issue: BUG: AjaxFileUpload inserted inside a ModalPopupExtender in TabContainer : AJAX Control Toolkit is May 2012 [27152]

The AjaxFileUpload inserted inside a ModalPopupExtender, all inside a TabContainer. After selecting the file does not start loading the file. Problem that arises when not using the TabContainer.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<script type="text/javascript">

function UploadCompleteClient(sender, args) {
try
{

alert("Success: UploadCompleteClient");
}
catch(e)
{
alert(e.message);
}
}

</script>

<ajaxToolkit:TabContainer ID="TabContainer" runat="server" Width="100%">
<ajaxToolkit:TabPanel ID="TabPanel" HeaderText="TabPanel UploadPopUp" runat="server">
<ContentTemplate>
<asp:Button ID="imgOpenPnlUpload" Text="Upload" ToolTip="Open ModalPopUp" runat="server" />
<asp:Panel ID="PnlUpload" Height="600px" Width="900px" runat="server" Style="display: none;background-color:Black;">
<table border="0" cellpadding="2" cellspacing="0" style="width: 99%; border-collapse: collapse;">
<tbody>
<tr>
<td align="left">
<asp:Label ID="Label2" runat="server" Text="Upload modal pop up" CssClass="titoloPagina" />
</td>
<td align="right">
<asp:Button ID="imgClosePnlUpload" Text="Close" ToolTip="Close ModalPopUp" runat="server" />
</td>
</tr>
<tr>
<td align="left" colspan="2">
<ajaxToolkit:AjaxFileUpload ID="ajaxUpload" OnUploadComplete="ajaxUpload_OnUploadComplete"
OnClientUploadComplete="UploadCompleteClient" runat="server" />
</td>
</tr>
</tbody>
</table>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderPnlUpload" runat="server" BehaviorID="mdlPopupPnlUpload"
TargetControlID="imgOpenPnlUpload" PopupControlID="PnlUpload" BackgroundCssClass="modalBackground"
CancelControlID="imgClosePnlUpload" />
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</asp:Content>

///CodeBehide

public void ajaxUpload_OnUploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
try
{
//ajaxUpload.SaveAs(e.FileName);

}
catch (Exception ex)
{

}
}

Comments: Ok, its a little hacky (very hacky), but it seems to work for me for now... I defined a new function on the AjaxFileUpload.pre.js, and manually called it when the client changes the tab....so the new public function is force: function() { this._initLayout(); this._html5InputFile.disabled = ''; this._inputFileElement.disabled = ''; }, and the following is called when the tab is changed on the client... AjaxControlToolkit.AjaxFileUploadItem.prototype.force(); It basically resets the input file elements visibility again when the tab is changed (and thus when the control becomes visible).