Share this:

Today, We are going to learn Laravel 10 CKEditor Image Upload Example – A Comprehensive Guide. Laravel, a popular PHP web application framework, is known for its elegant syntax and flexibility. It enables developers to build applications of various complexities with ease.

CKEditor, on the other hand, is a widely-used WYSIWYG (What You See Is What You Get) editor that allows users to create content with rich text formatting. In this blog post, we’ll walk you through a step-by-step guide to integrate CKEditor in your Laravel 10 application and implement image uploading functionality.


Before we dive in, make sure you have the following:

  1. A basic understanding of Laravel and PHP.
  2. Laravel 10 installed on your local machine.
  3. Composer, the PHP dependency management tool.
  4. A code editor of your choice.

Step 1: Create a New Laravel 10 Project

To start, create a new Laravel project using the following command in your terminal:

composer create-project --prefer-dist laravel/laravel ckeditor-image-upload-example

Step 2: Create Routes

In this step, we will add three routes with GET and POST methods in the routes/web.php file.

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');
Create Routes
Create Routes

Step 3: Create Controller

Now, create a new controller named CkeditorController with index() and upload() methods. Ensure that you have a media folder in your public directory as images will be stored there.

namespace App\Http\Controllers;

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

class CkeditorController extends Controller
    public function index(): View
        return view('ckeditor');

    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]);
Create Controller
Create Controller

Step 4: Create View File

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


<!DOCTYPE html>
    <title>Laravel CKEditor Image Upload Example -</title>
    <link href="" rel="stylesheet">
    .ck-editor__editable_inline {
        min-height: 300px;
<div class="container">
    <div class="text-center flex items-center justift-center my-5">
        <h1 class="">Laravel CKEditor Image Upload Example -</h1>
        <div class="form-group mb-3">
            <label class="mb-1 font-semibold">Title:</label>
            <input type="text" name="title" class="form-control" placeholder="Title" value="{{ old('title') }}">
        <div class="form-group mb-3">
            <label class="mb-1 font-semibold">Slug:</label>
            <input type="text" name="slug" class="form-control" placeholder="Slug" value="{{ old('slug') }}">
        <div class="form-group mb-3">
            <label class="mb-1 font-semibold">Body:</label>
            <textarea name="editor" id="editor"></textarea>
        <div class="form-group mb-3">
            <button class="btn btn-success mb-2" type="submit">Submit</button>
<script src=""></script>
        .create( document.querySelector( '#editor' ),{
            ckfinder: {
                uploadUrl: '{{route('ckeditor.upload').'?_token='.csrf_token()}}',
        .catch( error => {
        } );
Create View File
Create View File

Run the Laravel App:

All the required steps have been completed. Now, type the following command in the terminal and hit enter to run the Laravel app:

php artisan serve

Next, open your web browser and enter the following URL to view the app output:
Laravel 10 CKEditor Image Upload Example
Laravel 10 CKEditor Image Upload Example

You should now see a form with the CKEditor integrated, allowing you to upload images directly into the editor. This example demonstrates how to incorporate CKEditor into your Laravel application and enable image uploading functionality.

Laravel 10 CKEditor Image Upload Example
Laravel 10 CKEditor Image Upload Example
Laravel 10 CKEditor Image Upload Example
Laravel 10 CKEditor Image Upload Example


In conclusion, this tutorial demonstrated how to integrate CKEditor into a Laravel application and implement image uploading functionality.

By following the steps provided, you have successfully created routes, a controller, and a view file that allows users to upload images directly within the CKEditor. This functionality is particularly useful for content management systems and other web applications where users need to create and manage content with embedded images.

Now you can apply this knowledge to enhance your Laravel projects with rich text editing and image uploading capabilities.

Happy coding!

Share this:

Categorized in: