Ckeditor Upload Image on server folder using PHP

In this document, we are providing a detailed step by step guide to uploading Image in server folder using PHP script without ckfinder.

Step: 1 Create php file in index.php in your server directory and use ckeditor CDN library.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex, nofollow">
    <title>Hostmystory</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_img.php",
            
        } );
    </script>
</body>
</html>

Step: 2 Create php file name upload_img.php PHP code should be something like below.

if(isset($_FILES['upload'])){
  // ------ Process your file upload code -------
        $filen = $_FILES['upload']['tmp_name']; 
        $con_images = "uploaded/".$_FILES['upload']['name'];
        move_uploaded_file($filen, $con_images );
       $url = $con_images;

   $funcNum = $_GET['CKEditorFuncNum'] ;
   // Optional: instance name (might be used to load a specific configuration file or anything else).
   $CKEditor = $_GET['CKEditor'] ;
   // Optional: might be used to provide localized messages.
   $langCode = $_GET['langCode'] ;
    
   // Usually you will only assign something here if the file could not be uploaded.
   $message = '';
   echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
}

and Create a folder name uploaded for store all image.

See the live demo. The upload is implemented in a non-blocking way, so while the image is being uploaded the user may continue editing the content.

Ckeditor Upload Image on server folder using PHP

Comments / Answer