Home Javascript Upload image using ckeditor in Laravel

Upload image using ckeditor in Laravel

by Shahriar Sagor
Upload image using ckeditor in Laravel

Hello Dev’s, Today now in this article, i will like to share with you how can we use and also install ckeditor with image upload in laravel application. Now i will use simple laravel 8 custom image file upload code also with ckeditor file uploader in laravel project.

Here I will write a very simple example of laravel custom images or file upload with ckeditor. So now you can check this tutorial for your best solution.

Now we will use file browser upload url and also file browser Upload Method function of ckeditor in laravel application. So now if you have ckeditor image upload not working in laravel application then here i will hep you to know how to upload image by using ckeditor in laravel 8 application.

Now here i write a very simple example of image uploading with laravel steps by steps. So now we can easily use in our laravel application. Ckeditor is a most powerful tool for content upload editor. So if we have image upload option also available then it awesome.

So, let’s start and see bellow few steps to getting done with image upload in ckeditor laravel.

Step 1 Create Route

At first we need to create two new routes for display ckeditor form page and another one for image uploading. So let’s create it now.

Route::get('ckeditor', 'CkeditorController@index');
Route::post('ckeditor/upload', 'CkeditorController@upload')->name('ckeditor.upload');

Step 2 Create Controller

Now in this step, we need to create a new controller as CkeditorController with two methods are index() and another one is upload(). Now in index method we will return and view and upload method we will write code for image uploading.

namespace App\Http\Controllers;
use Illuminate\Http\Request;
class CkeditorController extends Controller
     * success response method.
     * @return \Illuminate\Http\Response
    public function index()
        return view('ckeditor');
     * success response method.
     * @return \Illuminate\Http\Response
    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;

Step 3: Create Blade File

Here, we need to create a new file as ckeditor.blade.php and write form logic and ckeditor js code. so let’s do it.


<!DOCTYPE html>
    <title>Laravel Ckeditor Image Upload Example</title>
    <script src="https://cdn.ckeditor.com/4.12.1/standard/ckeditor.js"></script>
<h1>Laravel Ckeditor Image Upload</h1>
<textarea name="editor1"></textarea>
<script type="text/javascript">
    CKEDITOR.replace('editor1', {
        filebrowserUploadUrl: "{{route('ckeditor.upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'

Step 4: Create images folder

Now we are in last step, so we need to create “images” folder on our public directory. so must be create with permission also.

Now we are ready to run our new application of example with laravel. So run bellow command for quick run:

php artisan serve

Now we can open bellow URL on our browser:


Read Also : How to check current date between two dates in PHP ?

Thanks for read. I hope it help you. For more you can follow us on facebook


You may also like