AsyncFileUpload with HtmlEditorExtender throws validation error

Question

When I have an HTMLEditorExtender on the page (with HTML entered), and try to upload a file with the AJAX AsyncFileUpload control, I get a validation error sometimes:

I think I've narrowed it down - it only throws this error when the uploading is after a postback - with html entered in the TextBox.

Here's an example:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="Button1" runat="server" Text="PostBack" />
<asp:TextBox ID="txtBannerHTML" runat="server" Height="130px" Width="100%" TextMode="MultiLine" />
<asp:HtmlEditorExtender ID="txtBannerHTML_HtmlEditorExtender" runat="server" DisplaySourceTab="True"
    Enabled="True" TargetControlID="txtBannerHTML">
</asp:HtmlEditorExtender>
<asp:AsyncFileUpload ID="AsyncFileUpload3" runat="server" />

To repro:

1. Enter html in the Textbox.

2. Hit the postback button.

3. Try uploading an image.

I do have the sanitizer enabled on the HTMLEditorExtender.

Can anyone repro this?

How do I get the two controls to work together?

Answer 1

Try to handle uploadStarted event of AjaxFileUpload control on client side and force to encode html of HtmlEditorExtender extender:

<script type="text/javascript" >
function uploadStarted(sender, args){
    var editor = $find("<%= txtBannerHTML_HtmlEditorExtender.ClientID %>");
    editor._editableDiv_submit();
}
</script>

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="Button1" runat="server" Text="PostBack" />
<asp:TextBox ID="txtBannerHTML" runat="server" Height="130px" Width="100%" TextMode="MultiLine" />
<asp:HtmlEditorExtender ID="txtBannerHTML_HtmlEditorExtender" runat="server" DisplaySourceTab="True"
    Enabled="True" TargetControlID="txtBannerHTML">
</asp:HtmlEditorExtender>
<asp:AsyncFileUpload ID="AsyncFileUpload3" runat="server" OnClientUploadStarted="uploadStarted" />