How to Add and Upload an Image using CKEditor

by Paul Freeman-Powell

If you've not heard of CKEditor, it's a free and open-source rich text HTML editor for use on web sites 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 web site. 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 site.

CKEditor, and FCKEditor which came before it, are both great pieces of (did I mention it's free?!) software. However, compliments dispensed with it's time for a criticism: the documentation isn't wonderful. It's better than it used to be and is getting better all the time, but it's still not perfect so you may struggle finding out how to add and upload images.

If you've stumbled upon this article then you probably want to know how to set up CKEditor to allow you to add images into documents that you publish to your web site's Content Management System, Blog or other area with user-generated content. And not only how to insert images, but how to upload them to your web site's server too. Like all things, it's easy when you know how but until you have those little bits of essential information, it can be a bit of a minefield.

This guide is for PHP users and was originally written for the then-latest version of CKEditor as of October 2010 which was 3.4.1. It has since been updated (in September 2010) for version 3.6.1 to take into account some changes made to CKEditor - these are highlighted in red. Naturally, some parts of it may have changed since then with updates, etc. so if this doesn't work for you then just leave a comment below and I'll update the article if I need to. I'm assuming that you already have CKEditor set up and working on your web site. If you haven't, then you need to do that first!

Step 1: Make sure your CKEditor instance includes an "Insert Image" button

To do this, you simply add 'Image' to your toolbar options. If you're using PHP, then your function will need to look something like this:

function richTextBox($fieldname, $value = "") {

$CKEditor = new CKEditor();

$config['toolbar'] = array(

array( 'Bold', 'Italic', 'Underline', 'Strike'),

array('JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'),

array('Format'),

array( 'Font', 'FontSize', 'FontColor', 'TextColor'),

array('Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord' ),

array('Image', 'Table', 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'),

array('Subscript','Superscript'),

array( 'Link', 'Unlink' ),

array('Source')

);

$CKEditor->basePath = '/ckeditor/';

$CKEditor->config['width'] = 975;

$CKEditor->config['height'] = 400;

$CKEditor->editor($fieldname, $value, $config);

}

Notice the Image option highlighted in red. If it's not there, add it in to your function then hit reload on the page your CKEditor text box is on. The button to add an Image into your text should magically appear!

Step 2: Enable the file upload dialogue box

Then, you'll need to unhide the Upload option (pictured). You'll need to open up the JavaScript file which contains settings related to the Image Properties window. This might look a bit daunting, but don't worry; if you follow these instructions to the letter then you'll be fine!

Find the directory in your web site where you've saved and extracted CKEditor, and then it's a couple more directories further down we need to go:

ckeditor\plugins\image\dialogs

Inside that folder is a file called image.js - open this up. If you haven't already got it, I'd recommend the brilliant Notepad++ to use rather than the basic Notepad programme which comes free with Windows.

You then want to hit CTRL+F to bring up a search box, and search for config.filebrowserBrowseUrl. Shortly after that text you will see the value hidden:true; - change it to hidden:false;

Update: in later versions of CKEditor, this may have changed to filebrowserImageBrowseLinkUrl so if you can't find the value listed above, try searching for that instead.

Next, do the same for the value just after the string 'Upload'.

Voilà! You should now have the options as shown in the screenshot, but it won't yet work if you try to use it. Read on for how to programme it to work...

Step 3: Telling CKEditor where your image upload script lives

At the root of the CKEditor folder hierarchy is a file called config.js - open up this file and it should have hardly anything in it, apart from a blank-looking function like this: CKEDITOR.editorConfig = function( config )

You just need to add a line inside this function (inside the curly braces) to tell CKEditor where the script lives which will handle the uploaded image files. In our case, this line is as follows: config.filebrowserUploadUrl = '../ckupload.php'; - easy.

Note: depending on your server's setup you may need to provide the full, absolute URL to your PHP script. A relative URL like in the example above is preferable as you will be able to move your web app from one server to another with less headaches, so try that first but if it doesn't work then just use the full URL.

Following so far? Good, we're very nearly there!

Step 4: Writing the script to handle the image upload in PHP

If you need a refresher on handling uploaded files in PHP, check out PHP's superb documentation. It's at this point that I'll point out how important it is to perform validation checks on anything which you allow users (even validated users) to upload to your web site's server. Just because you're expecting a lovely JPG or PNG image, doesn't mean that's what you're gonna get. If you don't stop me, I could write a PHP script to download the entire contents of your database's members or users table, stealing their passwords and other personal data. Don't be sloppy!

With that firmly in the forefront of your mind, here is a sample ckupload.php script to handle the uploaded image files:

<?
$url = '../images/uploads/'.time()."_".$_FILES['upload']['name'];

//extensive suitability check before doing anything with the file...

if (($_FILES['upload'] == "none") OR (empty($_FILES['upload']['name'])) )

{

$message = "No file uploaded.";

}

else if ($_FILES['upload']["size"] == 0)

{

$message = "The file is of zero length.";

}

else if (($_FILES['upload']["type"] != "image/pjpeg") AND ($_FILES['upload']["type"] != "image/jpeg") AND ($_FILES['upload']["type"] != "image/png"))

{

$message = "The image must be in either JPG or PNG format. Please upload a JPG or PNG instead.";

}

else if (!is_uploaded_file($_FILES['upload']["tmp_name"]))

{

$message = "You may be attempting to hack our server. We're on to you; expect a knock on the door sometime soon.";

}

else {

$message = "";

$move = @ move_uploaded_file($_FILES['upload']['tmp_name'], $url);

if(!$move)

{

$message = "Error moving uploaded file. Check the script is granted Read/Write/Modify permissions.";

}

$url = "../" . $url;

}

$funcNum = $_GET['CKEditorFuncNum'] ;

echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";

Basically, we check that there has actually been a file uploaded, and that it's not empty. Then, most importantly, we check it's actually a JPG or PNG. We do this by checking its MIME type (and NOT by checking its file extension - any hacker could upload a .exe file renamed to .jpg, then rename back to .exe after the check). We also do one final check to make sure the file we're dealing with is definitely the file we think we're dealing with. If that's all fine and dandy, we then use PHP's move_uploaded_file() function to move and rename the file.

You'll notice at the start of the script I've included a current Unix timestamp in the filename. Since this will always be unique, that means that all files uploaded to the folder of uploaded files will never have the same filename. Otherwise, one author might upload a file called fred.jpg to include in his article. If, some months later, he/she or another author wants to upload a file with the same name for another article about someone else called Fred, the first one would get overwritten due to identical filenames. Including a timestamp is a somewhat crude way of getting around this, but it works!

Regardless of the outcome of the PHP if...else statements, which have hopefully resulted in the uploaded file being accepted and saved, we echo a bit of JavaScript to the browser which passes information back to CKEditor's Image Properties box. This contains the URL of where we've saved the image, and a message if needed. I've included a message for the error scenarios, but there's no need for a message indicating successful upload, as this will be obvious anyway.

Step 5: Grant Correct File Permissions to your PHP Script

If you're using IIS to host your web site, you may need to ask your host to set the correct permissions to the folder in which you want to save the image. You need to give Read and Write permissions to the following user: fred\IUSR_caeus.com where "fred" is the machine name and replace "caeus.com" with the name of your site (the user to which the permissions are to be granted). Also, double-check that the directory you're telling PHP to move your images to does actually exist on your web server.

Conclusion

So there we have it - you should now be able to upload and save images to your web site via the CKEditor rich-text box, and insert them into your document too.

If this article has helped you out, or you have any other comments, then please leave a comment in the box below and don't forget to click the buttons to share on Facebook and Twitter!

Paul Freeman-Powell is a technology, software and hardware enthusiast. He founded and owns caeus.com Ltd. and works as a web developer, IT consultant and computer repair technician. In his spare time, he speaks French and Spanish fluently and is also a keen drummer and photographer (but not at the same time). His personal web site can be found at www.paulfp.net.

Follow @paulfp

Your Comments

1. At 01:25 on 19 Nov 2010 Michael Milauskas wrote:

You saved my life with this tutorial. I was looking for 3 solid days for someone to help me get the file/image upload working with CKEditor. This plain english explanation was a godsend. Thank you SO much!

2. At 04:37 on 26 Nov 2010 Alexandr wrote:

Thank you !!!

3. At 21:02 on 8 Dec 2010 kris wrote:

Dear Paul.

I have just installed ckeditor, afterwards i added your script. WHat happens now is that is seems like as if the proper script is being created within a body field but nothing seems to be written to a specific folder in which the uploaded images should appear. I already changed the specific folder rights (chmod 777) but this also did not work.

Help?

Best regards,
Kris

4. At 10:40 on 9 Dec 2010 Paul Freeman-Powell wrote:

Hi Kris,

Thanks for your comment and I'm glad you're finding the article helpful. From what you've said, it sounds like you're running the "ckupload.php" script directly in your browser by typing the URL into the address bar, is this correct?

If so, there are a couple more steps that you need to do beforehand, and then the "ckupload.php" script is actually called by the popup dialogue box from within the CKEditor instance in your web page, rather than you visiting that URL directly. This can only be done once you've enabled the "Insert Image" button on the CKEditor toolbar, and also specified the path to the upload script inside CKEditor's configuration files.

Make sure you carefully follow steps 1-3 in the article and do exactly what they instruct, and if all goes to plan it should work.

Also, can I ask which version of CKEditor you're using, and whether your server software is a Linux or Windows based? (ie., Apache or IIS?)

I hope I've understood your comment correctly and that you manage to get it working. Feel free to post again if you still have issues and I'll do my best to help you out!

Paul

5. At 10:40 on 23 Dec 2010 DINESH MALHOTRA wrote:

thanks a lot first of all. I spent at least 6 hours to understand that
config.filebrowserImageUploadUrl = 'upload/upload.php'; means the script that would handle the uploading of image.I was thinking this would uploads the image into the ckeditor. Now my query is when we press "send it the server" button will this code execute at that time and show the image in the textarea for which i have applied ckeditor. I am confused $_FILES['upload'] ..here upload is the name of the file type in image upload dialog box.

what i want to do is when i click send it to the server the image should be shown in the textarea (ckeditor).

6. At 17:17 on 8 Jan 2011 Edwin wrote:

Kris,

Check the filepath in your ckupload.php
I had the same problem.
I had a folder placed in the root of my website.
(eg. www.yourdomain.com/uploaddir/)
I managed to let it work by:
$url = '../uploaddir/'.time()."_".$_FILES['upload']['name'];

I have an other issue.
How do I activate to browse for images ?
I made the function availible by hidden: false.
But how do I browse on the server ?

7. At 16:03 on 9 Jan 2011 Paul Freeman-Powell wrote:

Hi Edwin,

You don't browse the contents of the remote server, you browse your local computer for the image to upload, which is then uploaded to the upload directory of the server.

Adding functionality to browse the server for images already uploaded is out of the scope of this tutorial, I'm afraid. However, if you know the path to the image then you could manually enter the relative path in the Image Properties box when you insert an image.

Thanks,

Paul

8. At 05:27 on 13 Feb 2011 jaredmun wrote:

Thanks! This was great!

I'm having a problem though- I followed the 4 steps and have had some success. The Upload tab now appears, and I can select images to upload. When I press the button to send to the server, the image seems to upload but then it just kind of shows a small part of a black image and it doesn't show up in my uploads folder and I can't save it in the post.

Any ideas? I'm using the latest CKEditor, 3.5.1. Thanks for the help! You rock!

9. At 21:22 on 21 Feb 2011 Tyler wrote:

Hi Paul,

First, thanks for sharing such an amazing code with us. It's the only code that does exactly what I've been looking for.

I have followed your instructions and double/triple checked my configuration to make sure I didn't make a mistake, but I am having one slight problem.

When I upload the image and select "Send To Server," I'm returned the regular image dialogue, with what would be the new upload-specific URL. The problem is, the image isn't actually uploading, and so even though the URL is correct, I'm only receiving the little broken image icon.

I've tried to CHMOD everything involved with this to 777, but it still won't actually upload.

When I go to the directory I created, I find an error log in there. This is what it says:

[21-Feb-2011 20:27:37] PHP Warning: move_uploaded_file() [function.move-uploaded-file]: Unable to move '/tmp/phpw9LuBg' to 'XXXXXXX/uploads/images/1298320057_blue.jpg' in /XXX/XXXXXXX/public_html/uploads/ckuploader.php on line 22

Do you have any idea what this error means, or how I might be able to fix it? I surely appreciate your help with this.

Thanks Again Paul!

10. At 13:41 on 22 Feb 2011 Paul Freeman-Powell wrote:

Hi Tyler,

It sounds like you have a general PHP issue which will need to be resolved before you can get this all to work. I'd advise that you set up a completely separate PHP upload script and get that working on your server first, then the CKEditor upload should work.

Firstly, are you using Apache or IIS as your server software? If you're using IIS then have you correctly set the permissions on the folders for the IUSR user? If this is a server that you administer yourself then you'll need to set the permissions from within Windows, or otherwise if it is space you rent from a web hosting company, you'll need to get them to set this up for you.

Once you have PHP file uploads working, the script should all work for you.

Good luck!

Paul

11. At 13:44 on 22 Feb 2011 Paul Freeman-Powell wrote:

Hi jaredmun,

That does indeed sound like a strange issue! Firstly I'd suggest you actually navigate to the folder where the image is being uploaded to and check that it has indeed uploaded? Then we can rule that out as the cause of the problem.

Secondly, as you're using a slightly newer version of CKEditor than the one I used when writing the guide, I'd suggest seeing if you can get hold of the slightly older version - things may have changed since then but unfortunately I've not got time at the moment to test my code on the latest version!

I hope that's helpful and that you manage to get it up-and-running soon!

Paul

12. At 07:44 on 24 May 2011 Josh wrote:

This is such a clear and helpful script.
Thanks heaps!!

13. At 14:47 on 25 May 2011 lorado wrote:

Hi.
At first, thank you. This article was very helpful for me. Thank you very much.

And I want to help you also. In your text there are some error. You have to change:
1) in the plugin/image/dialog/image.js
There is only "config.filebrowserImageBrowseLinkUrl" value. So you have to change in ur artikle:
config.filebrowserBrowseUrl to config.filebrowserImageBrowseLinkUrl
2) in config.php for the value "config.filebrowserBrowseUrl" you have to insert the full URL adress to ur upload.php. so:
config.filebrowserUploadUrl = '../ckupload.php';
to
config.filebrowserUploadUrl = 'http://www.you.domain.com/your_path/ckupload.php

That's it. Thank you again ;)

14. At 16:30 on 22 Sep 2011 Paul Freeman-Powell wrote:

Hi lorado,

Thanks for your comment and the tip about the changed variable name. This has been changed in more recent versions of CKEditor. Regarding the URL to the PHP script, the relative URL works for me, but this may be down to your server configuration so my advice to anyone is to take the approach that works best for you.

I've updated the article to reflect this, so thanks again! :-)

Paul

15. At 07:56 on 1 Oct 2011 PHILP SAM wrote:

Thank you somuch;
This code section $funcNum = $_GET['CKEditorFuncNum'] ;
echo "window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');"; -helped me so much

16. At 07:02 on 21 Oct 2011 Janarthanan wrote:

Hi Paul,
I need to load a image from my local drive to ck editor and how to use image insert image icon.

17. At 07:08 on 9 Nov 2011 faridz wrote:

thanks for this tutorial
the most simple and easiest step but very effective

18. At 11:49 on 14 Dec 2011 Roba wrote:

First of all thank u soooo much for this helpful article , i spent days and days searching for that !
i have a problem , i did all the steps written above , but unfortunately after i press on the button send it to server msg " SERVER Not found appears"
the thing that is not clear for me is where to put ckupload.php file in my server ? anf where should the folder images/uploads be ? i expect this is the problem

and thank u again

19. At 16:56 on 30 Dec 2011 Ali Umair wrote:

Hello everyone, this is realy helpfull but im working asp.net not php, so can you tell me how this all will be done in asp.net

Thanks in Advance

20. At 09:50 on 24 Jan 2012 Michael wrote:

Thanks Paul, i tried CKFinder first, which is hardly documented so you're on your own if you want something other then the standard use. Your article helped me building it myself which saves a licence and is more fun too!

21. At 16:25 on 10 Feb 2012 Rob Musquetier wrote:

Great help page, I've changed your upload script a little to allwo more file types:

22. At 16:27 on 12 Feb 2012 Nicolas wrote:

Hi,

when I selected an image and press upload to server I just get the echo script.....etc and no image is uploaded! :/

23. At 08:55 on 15 Mar 2012 manish wrote:

i m using ckeditor 3.6.2
and tried this code but it is not working properly.
is possible plz email the code to me .

24. At 08:19 on 17 Apr 2012 hassan zia wrote:

cant understand step 2 part "Next, do the same for the value just after the string 'Upload'.
i cant find upload in image.js.... or is it a seperate file?

25. At 22:27 on 20 Apr 2012 stick wrote:

AAAAH THANKS !!!!!!!!!

26. At 17:14 on 21 Apr 2012 Ben Jensen wrote:

I Hope you can help me. I followed the instructions, but when I click 'send to server' I get this response regardless of the file type:
window.parent.CKEDITOR.tools.callFunction($funcNum, '$url',

27. At 12:32 on 25 Apr 2012 lucifer wrote:

filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',

where should i keep ckfinder folder n where are those files..ckfinder.html......how will it come to know that from which server from which folder it has to access the images.....where should i add the server and folder address...all tutorials are very confusing...i am using it in jsp page for struts. plz help me...

28. At 12:42 on 25 Apr 2012 lucifer wrote:

Please contact me on pran27gore@yahoo.co.in

29. At 12:22 on 26 Apr 2012 azrel wrote:

I also get error as Ben Jensen

When I click 'send to server' I get this response:
window.parent.CKEDITOR.tools.callFunction($funcNum, '$url',

30. At 13:11 on 26 Apr 2012 Adrien wrote:

I have exactly the same problem Ben Jensen...

Tell me if you find an answer.
Adrie

31. At 06:41 on 27 Apr 2012 Azrel wrote:

Very starnge.
I changet the whole upload script, but it also show some strane error like
; ?>

but upload script is working in other program.

What can be the problem for this strange output.
When I leave just the
it also shows ; ?>

Strange

32. At 13:41 on 27 Apr 2012 Adrien wrote:

I've found the problem !!!

you should remplace

33. At 13:42 on 27 Apr 2012 Adrien wrote:

the tag has been erased !

--> < ? bye < ? php

34. At 13:43 on 27 Apr 2012 Adrien wrote:

by...

35. At 08:28 on 30 Apr 2012 Azrel wrote:

Thanx, now that works.
But when I click to upload, it gives me the error
Error moving uploaded file. Check the script is granted Read/Write/Modify permissions.

I'm working on MOWES portable server, on Windows, so premissions are not a problem.
I try to upload without checking, but without success.

36. At 08:33 on 30 Apr 2012 Azrel wrote:

Ooops,
I forgot to change the url at begining,
Evirything works excellent.

Big thanks to everyone :)

37. At 19:03 on 30 Apr 2012 Andrew wrote:

Hello,

I followed all the instructions but after the file has been uploaded to the temporary folder, it doesn't get moved to the normal folder, but I don't get the move_uploaded_file() error message, rather this:
"Not Found
The requested URL /undefined was not found on this server.
Apache Server at e-a-r-n.net Port 80"
This message appears Between the Send file label and the Send file button on the upload tab after uploading in an iframe/textarea or something like that.

Please help!

38. At 09:44 on 7 May 2012 kyabby wrote:

I get the error "Not Found" when i try to send the file to the server.

39. At 07:24 on 8 May 2012 html5 media player wrote:

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.

40. At 13:43 on 12 May 2012 KAL DEVA wrote:

I ve given img src but it is not displaying.....
Actually i ve to connect database (query-sql)...
Pls can you help me ..

Copyright © caeus.com Ltd. 2010. This article and all its contents are the property of caeus.com Limited and are protected by copyright. You may not distribute, modify, transmit, reuse, repost, or use the content of this article for public or commercial purposes (including text and images) without written permission from caeus.com Limited. The views expressed in this article and sites linked to herein are solely those of the author or individual(s) providing them and do not reflect the opinions of caeus.com Ltd., its parents, affiliates or subsidies. Any trademarks and brands mentioned in this article are the property of their respective owners and their use does not imply any affiliation with, or endorsement by, caeus.com Limited. The content of this article is provided in good faith and for information purposes only; you follow any advice given entirely at your own risk and no responsibility can be taken for any consequences which may arise as a result of following advice given in this article.

Articles & How-To Guides

Follow @caeusdotcom

0844 244 8080

How to Add and Upload an Image using CKEditor

Step 1: Make sure your CKEditor instance includes an "Insert Image" button

Step 2: Enable the file upload dialogue box

Step 3: Telling CKEditor where your image upload script lives

Step 4: Writing the script to handle the image upload in PHP

Step 5: Grant Correct File Permissions to your PHP Script

Conclusion

Your Comments

Articles & How-To Guides

Related Articles

Web Design & Hosting

Photography & Virtual Tours

FREE Useful Utilities

Computer Repairs & Servicing

IT Services & Consultancy

Articles & How-To Guides