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: I have the same issue, that when the control is within a tab container, the file selection doesn't function as expected. I found that both the inputFileElement and html5inputFileElement were both visible following the call to _initLayout, which should hide one of them (depending on your browser). So in chrome when the page loaded the inputFileElement was visible (when it shouldn't be) and was the only input that was selectable (another side effect of this is that you can only select 1 file). This means than when you select a file, it doesn't add it to the queue because the the script is expecting files from the html5inputFileElement not the inputFileElement. Weirdly the issue went away when i dynamically added the ajaxfileUpload to the tab control, im still investigating and will hopefully come out with a suitable workaround, so bear with me! I also had some other issues around the input file elements getting marked as disabled when I dynamically added the ajaxfileUpload within a tab control, this was due to the WebForm_OnSubmit override....but thats a different story......