AJAX Html Editor Extender upload image appearing blank

Question

Using AJAX 4 (latest version) I have been working with the html editor extender trying to upload images with text, I have got the Image to upload however it appears blank and when looking at the source, the source of the image is also blank (image below) how do I resolve this upload my selected image?

Answer 1

Include in HtmlEditorExtender an event handler for the ImageUploadComplete event.

<ajaxToolkit:HtmlEditorExtender
    OnImageUploadComplete="MyHtmlEditorExtender_ImageUploadComplete"
    ...

Within the ImageUploadComplete event handler, you need to do two things:

1) Save the uploaded image
2) Provide the URL to the saved image so the image can be displayed within the HtmlEditorExtender

protected void MyHtmlEditorExtender_ImageUploadComplete(
     object sender, AjaxFileUploadEventArgs e)
{
     // Generate file path
     string filePath = "~/Images/" + e.FileName;

     // Save uploaded file to the file system
     var ajaxFileUpload = (AjaxFileUpload)sender;
     ajaxFileUpload.SaveAs(MapPath(filePath));

     // Update client with saved image path
     e.PostedUrl = Page.ResolveUrl(filePath);
} 

Make sure you checked http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/HTMLEditorExtender/HTMLEditorExtender.aspx and http://stephenwalther.com/archive/2012/05/01/ajax-control-toolkit-may-2012-release