How to upload images to the server using Ckeditor

 

Introduction

This is my first article to this website. In this article i will teach you something interesting. While i was working on my own application, i found difficult to upload images using Ckeditor. By Default Ckeditor does not allow uploading images to the server. In this article i will teach you how to upload images using Ckeditor.

If you’ve not heard of Ckeditor, it’s a free and open-source rich text HTML editor for use on websites such as this one. In fact, I’m typing into a Ckeditor text box right now as I write this article via our administration back-end of the website. It’s useful for Content Management Systems, Blogs, or anywhere else where you need you users to be able to enter rich text and change styles such as font, size and colour but without the need for technical expertise. Even for those of us who are happy using HTML, it is still a far more elegant and professional-looking way of entering content into a website.

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.

Step1.

Create a new ASP.NET website and name it as Demo_application.

Step 2.

Download Ckeditor from here and add Ckeditor to the root Folder of your Application.

Step 3.

Create a new folder Images in the root Folder of your Application.

Step 4.

Add new ASHX Handler File to your application and name it as "upload.ashx".

Step 5.

Add the Following Code to the ashx file.

<%@ WebHandler Language="C#" Class="Upload" %>

using System;
using System.Web;

public class Upload : IHttpHandler {
    
    public void ProcessRequest (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);
        string url = "/Demo_application/Images/" + file;
        context.Response.End();             
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

Step 6.

Call the Ckeditor Scripts in your .aspx page like below

<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: '/Demo_application/upload.ashx' });
    });
</script>

Step 7.

Add Ckeditor TextBox to your .aspx file with id  txtCkEditor

  <asp:TextBox ID="txtCkEditor" runat="server" TextMode="MultiLine"></asp:TextBox>

Step 8.

You are Done. Now you can Debug Your Application to see the Results.

Step 9.

Click on the image icon.

Step 10.

Click on the Upload tab and look for image on your computer by clicking browse button. 

After Browsing the image click on "send it to server" Button.

Step 11.

Now look for the image that you recently uploaded to your application in images folder. Make sure to refresh the images folder.

Give your Valuable Comments.
comments powered by Disqus
 
Follow me on twitter
About Me
Harpreet Singh
I began programming with C++ when i was 17. Then at the middle of my study .NET came. Then I began to read C# and VB.NET. By the time i learnt SQL and ASP.NET, and developed some websites such as news portals that are active now. Currently i am running my own Software company.
More Articles