PHP – How to custom file uploading with CKEDITOR?

PHP – How to custom file uploading with CKEDITOR?

In this post we will give you information about PHP – How to custom file uploading with CKEDITOR?. Hear we will give you detail about PHP – How to custom file uploading with CKEDITOR?And how to use it also give you demo for it if it is necessary.

Today, I am going to show you How to do custom file upload with in CKEDITOR in our PHP application. In this tutorial i explain step by step example code of How to do custom file upload with in CKEDITOR.

Here i give you full example of How to How to do custom file upload with in CKEDITOR step by step like create one file in this file we are integrate CKEDITO and secound another file which we are created for uploadin custom file.

Follow Bellow Few Step:

1)integrate CKEDITOR

2)create one index.php file

3)create cstom file uploading file

Step 1 : integrate CKEDITOR

if your are using CKEDITOR in your aplication so first of fully you must be dowload CKEDITOR fron this link CKEDITOR. you also use cdn for CKEDITOR.

Step 2 : create one index.php file

Now we have download CKEDITOR in our local PC. then we are create our index.php file and this file we are use CKEDITOR

<!DOCTYPE html>



<meta charset="utf-8">

<meta name="robots" content="noindex, nofollow">

<title>File Manager Integration</title>

<script src=""></script>



<textarea cols="10" id="editor1" name="editor1" rows="10" >



CKEDITOR.replace( 'editor1', {

height: 300,

filebrowserUploadUrl: "/fileupload.php",

} );




now we are create one img folder. in this folder we are use in our custom file uploading code. our all custom file which we are uploading from PC to CKEDITOR they all file store in this folder.

Step 3: create cstom file uploading file

Now we are creating our custome file uploading file look like this “/fileupload.php”


$upload_dir = array(

'img'=> '/img/',


$imgset = array(

'maxsize' => 2000,

'maxwidth' => 900,

'maxheight' => 800,

'minwidth' => 10,

'minheight' => 10,

'type' => array('bmp', 'gif', 'jpg', 'jpeg', 'png'),


/** If 0, will OVERWRITE the existing file **/

define('RENAME_F', 1);

$re = '';

if(isset($_FILES['upload']) && strlen($_FILES['upload']['name']) >1) {

define('F_NAME', preg_replace('/.(.+?)$/i', '', basename($_FILES['upload']['name'])));

/** get filename without extension **/

/** get protocol and host name to send the absolute image path to CKEditor **/

$site = '';

$sepext = explode('.', strtolower($_FILES['upload']['name']));

$type = end($sepext); /** gets extension **/

$upload_dir = in_array($type, $imgset['type']) ? $upload_dir['img'] : $upload_dir['audio'];

$upload_dir = trim($upload_dir, '/') .'/';

/** checkings for image **/

if(in_array($type, $imgset['type'])){

list($width, $height) = getimagesize($_FILES['upload']['tmp_name']); /** image width and height **/

if(isset($width) && isset($height)) {

if($width > $imgset['maxwidth'] || $height > $imgset['maxheight']) $re .= '\n Width x Height = '. $width .' x '. $height .' \n The maximum Width x Height must be: '. $imgset['maxwidth']. ' x '. $imgset['maxheight'];


if($_FILES['upload']['size'] > $imgset['maxsize']*1000) $re .= '\n Maximum file size must be: '. $imgset['maxsize']. ' KB.';



else $re .= 'The file: '. $_FILES['upload']['name']. ' has not the allowed extension type.';

/** set filename; if file exists, and RENAME_F is 1, set "img_name_I" **/

/** $p = dir-path, $fn=filename to check, $ex=extension $i=index to rename **/

function setFName($p, $fn, $ex, $i){

if(RENAME_F ==1 && file_exists($p .$fn .$ex)) return setFName($p, F_NAME .'_'. ($i +1), $ex, ($i +1));

else return $fn .$ex;


$f_name = setFName($_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir, F_NAME, ".$type", 0);

$uploadpath = $_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir . $f_name; /** full file path **/

/** If no errors, upload the image, else, output the errors **/

if($re == '') {

/** print_r($_FILES);exit; **/

if(move_uploaded_file($_FILES['upload']['tmp_name'], $uploadpath)) {

$CKEditorFuncNum = $_GET['CKEditorFuncNum'];

$url = $site. $upload_dir . $f_name;

$msg = F_NAME .'.'. $type .' successfully uploaded: \n- Size: '. number_format($_FILES['upload']['size']/1024, 2, '.', '') .' KB';

$re = in_array($type, $imgset['type']) ? "$CKEditorFuncNum, '$url', '$msg')" /** for img **/

: 'var cke_ob = window.parent.CKEDITOR; for(var ckid in cke_ob.instances) { if(cke_ob.instances[ckid].focusManager.hasFocus) break;} cke_ob.instances[ckid].insertHtml('


else $re = 'alert("Unable to upload the file")';


else $re = 'alert("'. $re .'")';


@header('Content-type: text/html; charset=utf-8');

echo '';

Now we are ready to run our example so run bellow command ro quick run:

php -S localhost:8000

Now you can open bellow URL on your browser:


I hope it can help you…


Hope this code and post will helped you for implement PHP – How to custom file uploading with CKEDITOR?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

4  +  4  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US