Save image into folder using HTMLEditorExtender – ASP.NET Example

Updated on October 15, 2015     Kisan Patel

This post will explain how to use and integrate the ASP.Net AJAX Control Toolkit HtmlEditorExtender Rich Text Editor in a website and how to save image into folder using HTMLEditorExtender.

So lets first add the HTMLEditorExtender ajax control into your page.

Next, add HTMLEditorExtender ajax control inside UpdatePanel control like below code.

<asp:UpdatePanel ID="updatePanel1" runat="server">                   
            <ContentTemplate>  
                <asp:TextBox runat="server" ID="txtBox2" TextMode="MultiLine" Columns="50" Rows="10"
                    Text="Hello <b>world!</b>" /><br />
                <ajaxToolkit:HtmlEditorExtender ID="htmlEditorExtender2" TargetControlID="txtBox2"
                    runat="server" DisplaySourceTab="True" OnImageUploadComplete="ajaxFileUpload_OnUploadComplete">
                    <Toolbar>                       
                        <ajaxToolkit:Bold />
                        <ajaxToolkit:Italic />
                        <ajaxToolkit:Underline />
                        <ajaxToolkit:HorizontalSeparator />
                        <ajaxToolkit:JustifyLeft />
                        <ajaxToolkit:JustifyCenter />
                        <ajaxToolkit:JustifyRight />
                        <ajaxToolkit:JustifyFull />
                        <ajaxToolkit:CreateLink />
                        <ajaxToolkit:UnLink />
                        <ajaxToolkit:InsertImage />                       
                    </Toolbar>
                </ajaxToolkit:HtmlEditorExtender>
                <asp:Button runat="server" Text="Submit content" ID="submit" />
            </ContentTemplate>
        </asp:UpdatePanel>

ImageUploadComplete: this event raised on the server when an image is uploaded successfully. In this event an instance of AjaxFileUploadEventArgs is passed in the argument that contains file name, size and content type.

Next, Create folder name as “image” then add below code to save the images into image folder.

using System;
using AjaxControlToolkit;
public partial class HTMLEditorExtender : CommonPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.QueryString["preview"] == "1" && !string.IsNullOrEmpty(Request.QueryString["fileId"]))
        {
            var fileId = Request.QueryString["fileId"];
            var fileContents = (byte[])Session["fileContents_" + fileId];
            var fileContentType = (string)Session["fileContentType_" + fileId];
            if (fileContents != null)
            {
                Response.Clear();
                Response.ContentType = fileContentType;
                Response.BinaryWrite(fileContents);
                Response.End();
            }
        }
    }
    protected void ajaxFileUpload_OnUploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
    {       
        if (e.ContentType.Contains("jpg") || e.ContentType.Contains("gif")
            || e.ContentType.Contains("png") || e.ContentType.Contains("jpeg"))
        {
            Session["fileContentType_" + e.FileId] = e.ContentType;
            Session["fileContents_" + e.FileId] = e.GetContents();
        }
        // Set PostedUrl to preview the uploaded file.
        e.PostedUrl = string.Format("?preview=1&fileId={0}", e.FileId);
    }   
}

Done!