Image Upload In CKEditor With KCFinder

Image Upload In CKEditor With KCFinder

Posted on February 23, 2017 in APIs & Plugins

CKEditor is the favorite web-based word processor of almost all the web developers. But the issue is, it does not come with an in-built image uploading feature, i.e. CKEditor does not know how to handle image uploads. So today we will assign an assistant who knows how to deal with image uploads and file management.


Our assistant is KCFinder, a free open-source web file manager. It can be integrated into FCKeditor, CKEditor, and TinyMCE WYSIWYG web editors (or your custom web applications) to upload and manage images, flash movies, and other files that can be embedded in an editor’s generated HTML content.

I assume you have already set up your CKEditor into your web page. If you haven’t done it yet, you can follow the instructions in my previous article: CKEditor: Web-based Word Processor For Your Web Pages

Let’s get into our business.

1) Download KCFinder > http://kcfinder.sunhater.com/download

2) Extract the kcfinder directory in the .zip file to the public directory of your project.

3) Open /public/ckeditor/config.js and add code lines as follows;



If you do not want to let your users browse through previously-uploaded files in the server, you can remove/block-comment the first three lines and keep only the last three lines which actually do the uploading part or else you can add user level controls for each feature as per your requirement. Never let users to see the files in your server. If they change the files, other file links can be broken and it will result in huge mess in your application. 

4) Activate KCFinder.

By default KCFinder comes disabled. To change it, go to kcfinder/conf/config.php and under general settings, change the value of ‘disabled’ to falseNow, users can upload and manage files (in our case, the image files) on your web application using CKEditor interface. 

Also, you can configure KCFinder to get various tasks done. See what tweaks you can do to KCFinder here.

5) Now try to upload an image file using the image icon (01) in your CKEditor interface. 
When you click on image icon (01), you will get above Image Properties window. Go to UPLOAD tab (02). Click Choose File (03) and browse through your PC and select the image you want. Now click on Send it to the Server (04). Now automatically your image will be uploaded to the server and a link will be created to your web page. Click OK and you will see the image on your text area of CKEditor. 


comments powered by Disqus