How to CKeditor Image Upload in Laravel 11?

Teams applying “How to CKeditor Image Upload in Laravel 11?” in a production project can use the platform page to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

Hi, Dev

In this guide, I'll demonstrate how to integrate image uploading functionality using CKEditor within a Laravel 11 application.

CKEditor stands as a web-based, open-source WYSIWYG (What You See Is What You Get) editor, empowering users to manipulate text content directly within a browser. It's a versatile tool, facilitating text formatting, multimedia integration, and HTML code editing without requiring coding expertise. Since its inception in 2003, CKEditor has gained widespread adoption among web developers and content creators for its user-friendly interface and robust capabilities. Developed in JavaScript, it seamlessly integrates into any web application.

In this walkthrough, we'll craft a basic CKEditor instance featuring an image upload functionality that saves images to local storage. To achieve this, we'll establish two routes: one for handling GET requests and another for processing POST requests related to image uploads. Upon selecting an image and submitting it, the image will be securely stored within the 'media' directory.

So, let's delve into the steps required to accomplish image uploads in CKEditor within a Laravel environment.

Step for File Upload with CKeditor in Laravel 11

Step 1: Install Laravel 11

Step 2: Create Route

Step 3: Create Controller

Step 4: Create View File

Run Laravel App

Step 1: Install Laravel 11

First of all, we need to get a fresh Laravel 11 version application using the command below because we are starting from scratch. So, open your terminal or command prompt and run the command below:

composer create-project laravel/laravel example-app

Step 2: Create Route

In this step, we will add three routes with GET and POST method in routes/web.php file. so let's add it.

routes/web.php

<?php

  
use Illuminate\Support\Facades\Route;

  
use App\Http\Controllers\CkeditorController;

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

Step 3: Create Controller

In this step, we have to create new controller as CkeditorController with index() and update() methods.

Make sure you have created media folder in your public directory because images will store on that folder.

so let's update follow code:

app/Http/Controllers/CkeditorController.php

<?php

    
namespace App\Http\Controllers;

    
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;

    
class CkeditorController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index(): View
    {
        return view('ckeditor');
    }

    
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function upload(Request $request): JsonResponse
    {
        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('media'), $fileName);

      
            $url = asset('media/' . $fileName);

  
            return response()->json(['fileName' => $fileName, 'uploaded'=> 1, 'url' => $url]);
        }
    }
}

Step 4: Create View File

In Last step, let's create ckeditor.blade.php for display form with CkEditor and put following code:

resources/views/ckeditor.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How to CKeditor Image Upload in Laravel 11? - NiceSnippets.com</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
	<style>
    	.ck-editor__editable_inline {
        	min-height: 300px;
    	}
    </style>
</head>
<body>

    
<div class="container">
    <div class="card mt-5">
        <h3 class="card-header p-3">How to CKeditor Image Upload in Laravel 11? - NiceSnippets.com</h3>
        <div class="card-body">
            <form>

  
                <div class="form-group">
                    <strong>Title:</strong>
                    <input type="text" name="title" class="form-control" placeholder="Title" value="{{ old('title') }}">
                </div>

          
                <div class="form-group">
                    <strong>Slug:</strong>
                    <input type="text" name="slug" class="form-control" placeholder="Slug" value="{{ old('slug') }}">
                </div>

          
                <div class="form-group">
                    <strong>Body:</strong>
                    <textarea name="editor" id="editor"></textarea>
                </div>

          
                <div class="form-group mt-2">
                    <button class="btn btn-success" type="submit">Submit</button>
                </div>

          
            </form>
        </div>
    </div>
</div>

     
<script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/classic/ckeditor.js"></script>
<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ),{
            ckfinder: {
                uploadUrl: '{{route('ckeditor.upload').'?_token='.csrf_token()}}',
            }
        }).catch( error => {} );
</script>

     
</body>
</html>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

Output: