CKEditor upload image from computer in ASP.NET

This tutorial shows you how to integrate image upload to ckeditor in ASP.NET using c# code. To use ckeditor upload image from computer you need to download ckeditor, then create a new asp.net webforms project. Next, copy the ckeditor has downloaded to your project.

Open Manage Nuget Packages from your visual studio, then install CKEditor for ASP.NET. Open config.js file in ckeditor folder, then modify your code as the following

/**
 * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Simplify the dialog windows.
    config.filebrowserUploadMethod = 'form';
    config.filebrowserUploadUrl = '/uploader/upload.ashx';
};

Add CKEditor for ASP.NET Webform to your visual studio toolbox. Next, Drag the ckeditor control from your visual toolbox to your web page that you want to integrate ckeditor

For example

<div class="jumbotron">
        <h1>ASP.NET</h1>
        <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p>
        <p><a href="http://www.asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
        <CKEditor:CKEditorControl ID="CKEditorControl1" runat="server"></CKEditor:CKEditorControl>
    </div>

Run your project, you can see ckeditor has been integrated into asp.net webforms

Create an uploader folder in your project, then create a Generic Handler file. Next, add the following code allows you to use ckeditor image upload path.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication1.uploader
{
    /// <summary>
    /// Summary description for upload
    /// </summary>
    public class upload : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            if (context.Request.IsAuthenticated)
            {
                HttpPostedFile uploads = context.Request.Files["upload"];
                if (uploads != null)
                {
                    string CKEditorFuncNum = context.Request["CKEditorFuncNum"];
                    string file = System.IO.Path.GetFileName(uploads.FileName);
                    uploads.SaveAs(context.Server.MapPath($"~/images/{file}"));
                    // provide direct URL here
                    string url = $"{context.Request.Url.AbsoluteUri}/images/{file}";
                    context.Response.Write("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>");
                    context.Response.End();
                }
            }
            //redirect to login form
            context.Response.Redirect("/Login.aspx");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Run your project you can see ckeditor image upload browse button

You can also check authentication before uploading a image file.