How to upload custome file in ckeditor in php

25039 views 5 years ago PHP

Hello everyone we are sharing a one very helpfull ckeditor tutorials, some time you integrate ckeditor in you php project and you want to add functionality to upload image from your local computer with ckeditor.

so we are making one ckeditor script which very usefull to all for upload any file local computer to server without add ckeditor file browsing plugin.

this ckeditor script is very easy for implement in your code. and everyone to able to change and add some his/her own functionality in this ckeditor script.

please follow some simple step and successfully implement custome file uploading with ckeditor in any php project.

step : 1 create following folders and files

1. create "img" folder
2. create index.php file
3. create upload.php file

we are create all file and folder in our project, so now we are show how to implement ckeditor

step : 2 create index.php file

create one index.php file for simple configure ckeditor for show ckeditor in browser this way...

<!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: "/upload.php",
	} );
  </script>
</body>

now simple run this file and browser and check your ckeditor properly show in your browser if incase not show then please one check which you add ckeditor CDN for js is proper or not.

step : 3 create upload.php file

[ADDCODE]

now we are create upload.php file for upload image file local to live server look like this

<?php
$upload_dir = array(
    'img'=> '/postimages/',
);
$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 = 'http' . (isset($_SERVER['HTTPS']) ? 's' : '') . '://' . $_SERVER['HTTP_HOST'].'/';
    $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 or audio
    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(\'<audio src="'. $url .'" controls></audio>\', \'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 '<script>'. $re .';</script>';

now goto your project homw root directory and simple type php -S localhost:800 for run php server

and type localhost:8000 in browser

we hope this ckeditor tutorial is helpfull to you...

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]