Click here to Skip to main content
15,501,490 members
Articles / Web Development / ASP.NET
Technical Blog
Posted 5 Jul 2013


16 bookmarked

Image upload with CKEditor

Rate me:
Please Sign up or sign in to vote.
4.89/5 (12 votes)
5 Jul 2013CPOL2 min read
How to upload an image to our website and embed it in CKeditor.

CKeditor is one of the most widely used WYSIWYG editors for web applications. Overtime, the CKeditor continued to evolve by adding new features that made HTML text editing a lot easier. When using a WYSIWYG editor, we will often need to upload image to server and embed it in the HTML content. By default, the CKeditor supports embedding an image that is already uploaded or from an external source by providing its URL.

In this article, let’s see how we can upload an image to our website and embed it in CKeditor using the easy solution below. The CKeditor has a property called filebrowserImageUploadUrl which will provide an option to upload images to the server when configured. This property takes a file uploader (a page or a handler) url to upload the selected image to the server. The handler that is responsible for uploading the image should return back the URL of the image to display in the CKeditor. Once filebrowserImageUploadUrlproperty is configured, you will be able to see a new tab called “Upload” in Image Properties pop-up of CKeditor.

Follow the below steps to integrate image upload functionality with CKEditor in ASP.NET. Here the solution.

  1. Create a New ASP.NET Website “CKeditorDemo”.
  2. Download CKEditor and extract in your web folder root.
  3. Create a new folder named “Images” in your web folder root.
  4. Add the new ASHX Handler file (.ashx) “Upload.ashx” and Copy Paste below code into “Upload.ashx”
  5. C#
    <%@ WebHandlerLanguage="C#"Class="Upload"%>
    using System;
    using System.Web;
    public class Upload : IHttpHandler{    
        public voidProcessRequest (HttpContext context) {
           HttpPostedFile uploads = context.Request.Files["upload"];
           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 = "http://localhost/CKeditorDemo/Images/"+ file;  
             "+                                             CKEditorFuncNum + 
             ", \"" + url + "\");</script>");
        public boolIsReusable {
            get { return false; }
  6. Call the script and declare Textbox with ID="txtCkEditor" in .aspx file
  7. XML
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
    CKEDITOR.replace('<%=txtCkEditor.ClientID %>', 
      { filebrowserImageUploadUrl:  '/CKeditorDemo/Upload.ashx' }); //path to "Upload.ashx"
    <asp:TextBox ID="txtCkEditor" TextMode="MultiLine" runat="server"></asp:TextBox>
  8. You are done with the setting. Now run the website you will see the CKEditor configured in the page.
  9. Image 1

  10. Then choose the image icon in the CKEditor to upload the Image.
  11. Image 2

  12. Select the image by clicking Browse button in Upload tab and select “Send it to the Server” button to save the image in server.
  13. Image 3

  14. The uploaded image is displayed in the CKEditor after clicking “OK”.
This article was originally posted at


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Comments and Discussions

QuestionReally working! Pin
eraniichan12-Dec-17 5:25
Membereraniichan12-Dec-17 5:25 
QuestionNot working at all Pin
Praveen SKumar5-Apr-16 19:42
MemberPraveen SKumar5-Apr-16 19:42 
GeneralMy vote of 5 Pin
adinas30-Mar-15 23:01
Memberadinas30-Mar-15 23:01 
SuggestionSimple tool for Image uploading for ASP.NET Pin
Member 1111975029-Sep-14 22:50
MemberMember 1111975029-Sep-14 22:50 
QuestionImage upload server side error Pin
Member 1095011521-Jul-14 23:50
MemberMember 1095011521-Jul-14 23:50 
QuestionFile Upload shows error Pin
Member 104559897-Jan-14 21:00
MemberMember 104559897-Jan-14 21:00 
QuestionThanks Pin
ondera27-Dec-13 13:36
Memberondera27-Dec-13 13:36 
Questionhow multiple ckeditor image upload work in a page ? Pin
rakeshswain19-Dec-13 19:44
professionalrakeshswain19-Dec-13 19:44 
AnswerRe: how multiple ckeditor image upload work in a page ? Pin
ondera27-Dec-13 13:29
Memberondera27-Dec-13 13:29 
I used 2 editor in one page :

<div class="icerik-form-eleman-kap-extended">
                <div class="form-elaman-baslik">
                    Kısa Metin</div>
                <div class="form-elaman-ayrac">
                <div class="form-elaman">
                    <script type="text/javascript">
                        $(function () {
                            CKEDITOR.replace('<%=txtKisaMetin.ClientID %>',
  { filebrowserImageUploadUrl: '/Upload.ashx' }); //path to "Upload.ashx"
                        <CKEditor:CKEditorControl ID="txtKisaMetin" BasePath="/ckeditor/" runat="server"></CKEditor:CKEditorControl>
            <div class="icerik-form-eleman-kap-extended">
                <div class="form-elaman-baslik">
                <div class="form-elaman-ayrac">
                <div class="form-elaman">
                                        <script type="text/javascript">
                                            $(function () {
                                                CKEDITOR.replace('<%=txtMetin.ClientID %>',
  { filebrowserImageUploadUrl: '/Upload.ashx' }); //path to "Upload.ashx"
                        <CKEditor:CKEditorControl ID="txtMetin" BasePath="/ckeditor/" runat="server"></CKEditor:CKEditorControl>

GeneralRe: how multiple ckeditor image upload work in a page ? Pin
rakeshswain16-Jan-14 20:48
professionalrakeshswain16-Jan-14 20:48 
Generalcode Pin
Member 1041050918-Nov-13 21:10
MemberMember 1041050918-Nov-13 21:10 
Questioncan you share the demo to me Pin
NWPU_Tbeck6-Nov-13 23:04
MemberNWPU_Tbeck6-Nov-13 23:04 
QuestionHow to upload image in ckeditor Pin
Member 1023523627-Aug-13 3:56
MemberMember 1023523627-Aug-13 3:56 
QuestionThanks good article Pin
qofacevic3-Aug-13 21:32
Memberqofacevic3-Aug-13 21:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.