PHP CKEditor Custom File Upload Example

By Hardik Savani May 14, 2024 Category : PHP HTML jQuery

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>
<html>
<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex, nofollow">
    <title>File Manager Integration</title>
    <script src="http://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>
</head>
<body>
    <textarea cols="10" id="editor1" name="editor1" rows="10" >
    </textarea>
    <script>
        
        CKEDITOR.replace( 'editor1', {
            height: 300,
            filebrowserUploadUrl: "/fileupload.php",
            
        } );
    </script>
</body>
</html>

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.

Read Also: How to Check File is Exists or Not in PHP?

Step 3: create cstom file uploading file

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

<?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($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.';
        }
    }
  
    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']) ? "window.parent.CKEDITOR.tools.callFunction($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(\'\', \'unfiltered_html\'); alert("'. $msg .'"); var dialog = cke_ob.dialog.getCurrent();  dialog.hide();';
        }
        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:

Read Also: How to Remove Multiple Keys from PHP Array?
http://localhost:8000

I hope it can help you...

Video

Tags :
Previous

Laravel Prevent User to Enter Common Passwords Example
Next

PHP Ajax Infinite Scroll Pagination Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares