How to upload custome file in ckeditor in php

How to upload custome file in ckeditor in php

In this post we will give you information about How to upload custome file in ckeditor in php. Hear we will give you detail about How to upload custome file in ckeditor in phpAnd how to use it also give you demo for it if it is necessary.

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

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


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

$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']) ? "$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…

Hope this code and post will helped you for implement How to upload custome file in ckeditor in php. 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

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