How to upload file using ckeditor in php?

Share Me
  • 1

Hello Dev’s,

Now in this example, I am going to give a simple way how we do upload custom file by using CKEDITOR in our PHP application. Now in this tutorial i explain it step by step example with code of How to upload image and also file with CKEDITOR php.

Now we can see a short and also a simple example of php ckeditor custom image upload by using browse button.

Here i give you a full example of How to do custom file upload by using CKEDITOR steps by steps like create a new one file in this file we are integrate CKEDITO and second another file which we are created for uploading custom file.

Following The Step:

1)create one index.php file

2)create cstom file uploading file

Step 1 :Create one index.php file

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

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="robots" content="noindex, nofollow">
    <title>Ckeditor File Upload</title>
    <script src=""></script>
    <textarea cols="10" id="editor1" name="editor1" rows="10" >
        CKEDITOR.replace( 'editor1', {
            height: 300,
            filebrowserUploadUrl: "upload.php",
        } );

Now we will create one photos folder. Now on this folder we will use in our custom file uploading code. So our all custom file which we are uploading from PC to CKEDITOR they all file store on this folder.

Step 1 :Create Custom file uploading file

Now we will creating our costume file uploading file look like this “/upload.php”

// Define file upload path 
$upload_dir = array( 
    'img'=> '/photos/', 
// Allowed image properties  
$imgset = array( 
    'maxsize' => 20000, 
    'maxwidth' => 1024, 
    'maxheight' => 800, 
    'minwidth' => 10, 
    'minheight' => 10, 
    'type' => array('bmp', 'gif', 'jpg', 'jpeg', 'png'), 
// If 0, will OVERWRITE the existing file 
define('RENAME_F', 1); 
 * Set filename 
 * If the file exists, and RENAME_F is 1, set "img_name_1" 
 * $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)); 
        return $fn .$ex; 
$re = ''; 
if(isset($_FILES['upload']) && strlen($_FILES['upload']['name']) > 1) { 
    define('F_NAME', preg_replace('/\.(.+?)$/i', '', basename($_FILES['upload']['name'])));   
    // Get filename without extension 
    $sepext = explode('.', strtolower($_FILES['upload']['name'])); 
    $type = end($sepext);    /** gets extension **/ 
    // Upload directory 
    $upload_dir = in_array($type, $imgset['type']) ? $upload_dir['img'] : $upload_dir['audio']; 
    $upload_dir = trim($upload_dir, '/') .'/'; 
    // Validate file type 
    if(in_array($type, $imgset['type'])){ 
        // Image width and height 
        list($width, $height) = getimagesize($_FILES['upload']['tmp_name']); 
        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($width < $imgset['minwidth'] || $height < $imgset['minheight']){ 
                $re .= '\\n Width x Height = '. $width .' x '. $height .'\\n The minimum Width x Height must be: '. $imgset['minwidth']. ' x '. $imgset['minheight']; 
            if($_FILES['upload']['size'] > $imgset['maxsize']*1000){ 
                $re .= '\\n Maximum file size must be: '. $imgset['maxsize']. ' KB.'; 
        $re .= 'The file: '. $_FILES['upload']['name']. ' has not the allowed extension type.'; 
    // File upload path 
    $f_name = setFName($_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir, F_NAME, ".$type", 0); 
    $uploadpath = $upload_dir . $f_name; 
    // If no errors, upload the image, else, output the errors 
    if($re == ''){ 
        if(move_uploaded_file($_FILES['upload']['tmp_name'], $uploadpath)) { 
            $CKEditorFuncNum = $_GET['CKEditorFuncNum']; 
            $url = 'http://'.$_SERVER['HTTP_HOST'].'/'.'ckeditor/'. $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']) ? "<script>$CKEditorFuncNum, '$url', '$msg')</script>":'<script>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(\' \', \'unfiltered_html\'); alert("'. $msg .'"); var dialog = cke_ob.dialog.getCurrent();dialog.hide();</script>'; 
            $re = '<script>alert("Unable to upload the file")</script>'; 
        $re = '<script>alert("'. $re .'")</script>'; 
// Render HTML output 
@header('Content-type: text/html; charset=utf-8'); 
echo $re;

Read Also : How to Get difference between two dates in days using carbon in laravel

Thanks for read. I hope it help you. For more you can follow us on facebook

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →