Commented Issue: AjaxFileUpload control doesn't work if it's placed on an initially invisible Panel control [27307]

AjaxFileUpload control doesn't work if it's placed on an initially invisible Panel control. Files can be selected on the client side, but if the user clicks the Upload button then the upload will not be finished and it remains in a failed state.

The following example demonstrates how can the problem be reproduced:

<script type=”text/javascript”>
function onClientUploadComplete(sender, e) {
}
</script>

<asp:Button ID="bt1" runat="server" Text="Show upload panel" OnClick="bt1_Click" />
<asp:Panel ID="p1" runat="server" Visible="false">
<asp:AjaxFileUpload ID="ajaxFileUpload" runat="server"
OnClientUploadComplete="onClientUploadComplete"
OnUploadComplete="ajaxFileUpload_OnUploadComplete"
MaximumNumberOfFiles="1" />
</asp:Panel>

------------- Code behind --------------

protected void bt1_Click(object sender, EventArgs e)
{
p1.Visible = true;
}

protected void ajaxFileUpload_OnUploadComplete(object sender, AjaxFileUploadEventArgs file)
{
}

The following script error will be experienced if the user tries to upload any file onto the server:
Sys.ArgumentException: Sys.ArgumentException: Cannot deserialize. The data does not correspond to valid JSON. Parameter name: data

The problem can be worked around by placing another AjaxFileUpload control inside an invisible HTML div tag on the same page attaching the same client and server side upload complete event handlers to both AjaxFileUpload control.

<div style="display:none">
<asp:AjaxFileUpload ID="ghostAjaxFileUpload" runat="server"
OnClientUploadComplete="onClientUploadComplete"
OnUploadComplete="ajaxFileUpload_OnUploadComplete"
/>
</div>

AjaxControlToolkit:
Runtime Version: v4.0.30319
Version: 4.1.60919.0

Target framework: .NET Framework 4.0

Comments: This code works with the version of Ajax Toolkit 4.1.7.1213 aspx page <div style="display: none"> <ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" /> </div> <asp:Panel ID="PnlEdit" runat="server" Visible="false"> <div> <label> Photo</label> <ajaxToolkit:AjaxFileUpload ID="Photo" runat="server" MaximumNumberOfFiles="1" AllowedFileTypes="jpg,jpeg,gif,png,JPG,JPEG,GIF,PNG" OnUploadComplete="Photo_UploadComplete" ThrobberID="PhotoPreview" /> </div> </asp:Panel> c# protected void Photo_UploadComplete(object sender, AjaxFileUploadEventArgs e) { FileInfo f = new FileInfo(e.FileName); string path = MapPath("~/FileUpload/"); if (!Directory.Exists(path)) { Directory.CreateDirectory(path); } ((AjaxFileUpload)sender).SaveAs(path + e.FileId + f.Extension); }