How to fix CKeditor not having upload image feature in laravel project

Question

My ckeditor does not have an upload image feature. I'd like the feature to be available. How does one work around that in laravel?

Answer 1

You can use CKFinder that enables uploading and managing multiple files easily. With the built-in image editor cropping, resizing, rotating, adjusting brightness, contrast, saturation, exposure, and sharpness plus some pre-defined filter presets are available.

<script>
    CKEDITOR.replace( 'editor1', {
        filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
        filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'
    } );

    $('.textarea').wysihtml5();

</script>

Documentation Here

For laravel :

CKEDITOR.replace('editor1', {
    filebrowserUploadUrl: "{{ route('ckeditor.upload', ['_token' => csrf_token() ])}}",
    filebrowserUploadMethod: 'form'
});

In your route :

Route::post('images/upload', 'ImageController@upload')->name('ckeditor.upload');

And your ImageController :

public function upload(Request $request)
 {
     if($request->hasFile('upload')) {
         $originName = $request->file('upload')->getClientOriginalName();
         $fileName = pathinfo($originName, PATHINFO_FILENAME);
         $extension = $request->file('upload')->getClientOriginalExtension();
         $fileName = $fileName.'_'.time().'.'.$extension;
        
         $request->file('upload')->move(public_path('images'), $fileName);
   
         $CKEditorFuncNum = $request->input('CKEditorFuncNum');
         $url = asset('images/'.$fileName); 
         $msg = 'Image uploaded successfully'; 
         $response = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
               
         @header('Content-type: text/html; charset=utf-8'); 
         echo $response;
     }
}

Cheers!!!