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 issue also face me, but I can't solve it till now!!! I have ajaxToolkit:AjaxFileUpload withen a multiview page (on a view initially invisible) When I navigate into the view , and then, try to load a file, I got the same error "Sys.ArgumentException: Sys.ArgumentException: Cannot deserialize. The data does not correspond to valid JSON. Parameter name: data" I have the latest ver. of ajaxToolkit:AjaxFileUpload 7…., and also I tried this work around <div style="display:none"> <ajaxToolkit:AjaxFileUpload ID="ghostAjaxFileUpload" runat="server" OnClientUploadComplete="onClientUploadComplete" OnUploadComplete="ajaxFileUpload_OnUploadComplete" /> </div> With this work around, the first error disappeared, but I got another error " Error: error raising upload complete event and start new upload " Note: when I displayed the ajaxToolkit:AjaxFileUpload view, at the page's start, the error disappeared and the files have been loaded without errors. Any help? Thanks