CKEditor Image Upload in Laravel

by

If you are getting ckeditor image upload not working Laravel issue then you lend a perfect place. Here in this article, we have added an easy way to upload image in ckeditor using the Laravel application.

CKEditor is a web-based, open-source WYSIWYG (What You See Is What You Get) editor that allows users to edit text content in a browser. It is a powerful tool that allows users to create and format text, add images and multimedia, and edit HTML code without any knowledge of coding.

So, let’s see how to upload image using ckeditor in laravel.

#1 Download Laravel App

First, you just need to download or install a fresh Laravel application using the following command.

composer create-project laravel/laravel laravel-ckeditor-images

Now go inside your app:

cd laravel-ckeditor-images

#2 Make Routes

Now, open the routes/web.php file and update the below routes on it.

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\PostController;
   
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
    
Route::get('posts', [PostController::class, 'index']);
Route::post('posts/upload-image', [PostController::class, 'uploadImage'])->name('posts.upload-image');

#3 Create Controller

Now, you need to create a controller where we will update the code upload image in ckeditor through laravel application.

So run the following command and generate the new controller.

php artisan make:controller PostController

After successfully generating the controller now open the app\Http\Controllers\Api\PostController.php file and update the following code on it.

<?php
    
namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
    
class PostController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index(): View
    {
        return view('posts');
    }
    
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function uploadImage(Request $request): JsonResponse
    {
        if ($request->hasFile('image')) {
            $originName = $request->file('image')->getClientOriginalName();
            $fileName = pathinfo($originName, PATHINFO_FILENAME);
            $extension = $request->file('image')->getClientOriginalExtension();
            $fileName = $fileName . '_' . time() . '.' . $extension;
      
            $request->file('image')->move(public_path('media'), $fileName);
      
            $url = asset('media/' . $fileName);
  
            return response()->json(['fileName' => $fileName, 'uploaded'=> 1, 'url' => $url]);
        }
    }
}

#4 Create Blade View File

Next, navigate the resources/views directory and create a new file named posts.blade.php. Now open the resources/views/posts.php and update the following code on it.

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
    .ck-editor__editable_inline {
        min-height: 300px;
    }
    </style>
</head>
    <body>
        <div class="container">
            <h1>Laravel Ckeditor Image Upload Example</h1>
            <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>Description:</strong>
                    <textarea name="editor" id="editor"></textarea>
                </div>
        
                <div class="form-group">
                    <button class="btn btn-success" type="submit">Save</button>
                </div>
        
            </form>
            
        </div>
        
        <script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/classic/ckeditor.js"></script>
        <script>
            ClassicEditor
                .create( document.querySelector( '#editor' ),{
                    ckfinder: {
                        uploadUrl: '{{route('posts.upload-image').'?_token='.csrf_token()}}',
                    }
                })
                .catch( error => {
                    
                } );
        </script>
        
    </body>
</html>

#5 Run your App and Test

Now, it’s time to test our laravel ckeditor upload image to server example. So start your application using the serve command.

php artisan serve

After that hit the url in your browser

http://localhost:8000/posts

Hurrah!! the Laravel image upload using ckeditor Example is over now. I hope you enjoy it.