I am having a strange problem when using an Ajax FileUpload control inside an Ajax TabContainer control. For the purpose of illustrating my problem I have included two FileUpload controls in my code shown below. The top FileUpload control is inside the tab container and when the page first loads, the Upload button appears before I select or drag and drop any files to it. The upload button overlaps the standard text that says "Please select file(s) to upload". The other FileUpload control (that is not inside the tab container) does not exhibit this problem. What's also interesting is that if I drop a file in the FileUpload control that's inside the tab container, the issue goes away. Also if I then remove that file, the problem is not present either. So it only appears when the page first loads. I have posted my aspx code below for reference. The code behind file is essentially empty. The Page_Load() event has not code in it and the event handler for AjaxFileUpload1_UploadComplete is empty also. I have scoured the web looking for solutions or similar issues to no avail. Any suggestions or help would be greatly appreciated.
I've also attached a screen capture for reference.
```
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test2.aspx.cs" Inherits="WarrantyEvaluationReport.Test2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>File Upload Test</title>
<style type="text/css">
.demoarea
{
padding:20px;
background:#FFF url(../Image/demotop.png) no-repeat left top;
}
.collapsePanelHeader
{
width:100%;
height:30px;
background-image: url(../Image/bg-menu-main.png);
background-repeat:repeat-x;
color:#FFF;
font-weight:bold;
}
.collapsePanel
{
background-color:white;
overflow:hidden;
}
</style>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
</script>
</head>
<body >
<form id="form1" runat="server" style="height:100%">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
<div style="Width:1100px; margin-left:auto; margin-right:auto"> <%-- "#d3d3d3" (Gray) --%>
<asp:UpdatePanel ID="updatePanelMain" runat="server" >
<ContentTemplate>
<asp:Panel ID="Panel3" runat="server" Height="600px" Width="1100px" >
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="LinkButton1" Collapsed="True"
ExpandedImage="~/Image/expand.jpg" CollapsedImage="~/Image/collapse.jpg" CollapsedText="(Show/Add Attached Files...)"
ExpandedText="(Hide Attached Files...)" ExpandControlID="LinkButton1" TargetControlID="Panel1" ImageControlID="Image1" TextLabelID="Label1">
</ajaxToolkit:CollapsiblePanelExtender>
<div style="float:left; clear:left; width:650px; ">
<%--this is div for the entire collapsible panel including its header--%>
<div ID="CollapseDiv" class="demoarea">
<%--the following link button contains a div so that the user can click anywhere in the div and get the action of the link button--%>
<asp:LinkButton ID="LinkButton1" runat="server" ForeColor="White">
<%--this is the header div (panel) for the collapsible panel--%>
<asp:Panel ID="Panel2" class="collapsePanelHeader" runat="server" style="height:30px;">
<div style="padding:5px; cursor: pointer; vertical-align: middle;">
<div style="float: left;">Attached Files
</div>
<div style="float: left; margin-left: 20px;">
<asp:Label ID="Label1" runat="server" Text="(Show Attached Files...)"></asp:Label>
</div>
<div style="float: right; vertical-align: middle;">
<asp:Image ID="Image1" runat="server" AlternateText="(Show Attached Files...)" ImageUrl="~/Image/expand_blue.jpg" BorderWidth="0px" />
</div>
</div>
</asp:Panel>
</asp:LinkButton>
<%--this is the div (panel) for the panel that actually expands and collapses--%>
<asp:Panel ID="Panel1" class="collapsePanel" runat="server" style="height:0px; padding:5px 5px 5px 5px">
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" Width="100%" AutoPostBack="True" >
<ajaxToolkit:TabPanel ID="AddFilesTabPanel" runat="server" HeaderText="Add Files">
<ContentTemplate>
<div>
<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" OnUploadComplete="AjaxFileUpload1_UploadComplete" Width="100%" />
</div>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</asp:Panel>
</div>
</div>
<div style="width:600px; margin-left:25px">
<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload2" runat="server" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
```
Comments: The issue is fixed and the fix is included in the future release. Related changeset: [fa4ec06](https://ajaxcontroltoolkit.codeplex.com/SourceControl/changeset/fa4ec069bc688ca001ecf6195c0d4afdd9e634a4)
I've also attached a screen capture for reference.
```
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test2.aspx.cs" Inherits="WarrantyEvaluationReport.Test2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>File Upload Test</title>
<style type="text/css">
.demoarea
{
padding:20px;
background:#FFF url(../Image/demotop.png) no-repeat left top;
}
.collapsePanelHeader
{
width:100%;
height:30px;
background-image: url(../Image/bg-menu-main.png);
background-repeat:repeat-x;
color:#FFF;
font-weight:bold;
}
.collapsePanel
{
background-color:white;
overflow:hidden;
}
</style>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
</script>
</head>
<body >
<form id="form1" runat="server" style="height:100%">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
<div style="Width:1100px; margin-left:auto; margin-right:auto"> <%-- "#d3d3d3" (Gray) --%>
<asp:UpdatePanel ID="updatePanelMain" runat="server" >
<ContentTemplate>
<asp:Panel ID="Panel3" runat="server" Height="600px" Width="1100px" >
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="LinkButton1" Collapsed="True"
ExpandedImage="~/Image/expand.jpg" CollapsedImage="~/Image/collapse.jpg" CollapsedText="(Show/Add Attached Files...)"
ExpandedText="(Hide Attached Files...)" ExpandControlID="LinkButton1" TargetControlID="Panel1" ImageControlID="Image1" TextLabelID="Label1">
</ajaxToolkit:CollapsiblePanelExtender>
<div style="float:left; clear:left; width:650px; ">
<%--this is div for the entire collapsible panel including its header--%>
<div ID="CollapseDiv" class="demoarea">
<%--the following link button contains a div so that the user can click anywhere in the div and get the action of the link button--%>
<asp:LinkButton ID="LinkButton1" runat="server" ForeColor="White">
<%--this is the header div (panel) for the collapsible panel--%>
<asp:Panel ID="Panel2" class="collapsePanelHeader" runat="server" style="height:30px;">
<div style="padding:5px; cursor: pointer; vertical-align: middle;">
<div style="float: left;">Attached Files
</div>
<div style="float: left; margin-left: 20px;">
<asp:Label ID="Label1" runat="server" Text="(Show Attached Files...)"></asp:Label>
</div>
<div style="float: right; vertical-align: middle;">
<asp:Image ID="Image1" runat="server" AlternateText="(Show Attached Files...)" ImageUrl="~/Image/expand_blue.jpg" BorderWidth="0px" />
</div>
</div>
</asp:Panel>
</asp:LinkButton>
<%--this is the div (panel) for the panel that actually expands and collapses--%>
<asp:Panel ID="Panel1" class="collapsePanel" runat="server" style="height:0px; padding:5px 5px 5px 5px">
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" Width="100%" AutoPostBack="True" >
<ajaxToolkit:TabPanel ID="AddFilesTabPanel" runat="server" HeaderText="Add Files">
<ContentTemplate>
<div>
<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" OnUploadComplete="AjaxFileUpload1_UploadComplete" Width="100%" />
</div>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</asp:Panel>
</div>
</div>
<div style="width:600px; margin-left:25px">
<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload2" runat="server" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
```
Comments: The issue is fixed and the fix is included in the future release. Related changeset: [fa4ec06](https://ajaxcontroltoolkit.codeplex.com/SourceControl/changeset/fa4ec069bc688ca001ecf6195c0d4afdd9e634a4)