Save image into folder using HTMLEditorExtender - Asp.Net

1 comment

First add the HTMLEditorExtender ajax control into your page.

Add HTMLEditorExtender into 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>



Use 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.


Use Following code to upload image into folder.

Create folder name as "image".

Below code 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);
    }  
}

1 comment:

  1. I have changed code for upload images.
    Go to Below Link to complete solution -

    HTMLEditorExtender Sample Example

    ReplyDelete