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: Hi, Same is the situation with me also. I have placed AjaxUploadFile in visible state while page load and placed inside a UpdatePanel. Trigger will raised the AjaxUploadFile to visible state when clicked on a button. Everything works fine, AjaxUploadFile also displays on the webpage but while uploading the file, it was unable to upload. I guess error lies at the client end. But all the above problem get solved, if I made the AjaxUploadFile module visible when the page loads. I have installed the latest update of Toolkit provided by Codeplex. Thanks Rahul Saud IT Professional Lumbini Bank Limited Nepal