Today, we'll show you how to submit images using CKEditor in Laravel 9. (Laravel 9 CKeditor Image Upload). Like TinyMCE, CKEditor is a sort of WYSIWYG HTML editor.

The WYSIWYG HTML editors are used when we need to store lengthy text, article content, product summaries, and other tag content along with the description in our database.

In order to install CKEditor in Laravel, you can refer to our prior article.

Free installation of our Laravel application's WYSIWYG editor. Let's see how to upload an image using CKeditor in Laravel by following the steps below.

Table of Contents

  1. Install Laravel
  2. Create Route
  3. Create a Model and Controller
  4. Create Blade Files
  5. Run Our Laravel Application

Install Laravel

We will install Laravel 9 so first, open the terminal or command prompt and use the command prompt to navigate to the xampp htdocs folder directory. then execute the command below.

composer create-project --prefer-dist laravel/laravel laravel9_ckeditor

Create Route

In the "routes/web.php" file, add the following route code.

use App\Http\Controllers\ArticleController;

| 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('/', function () {
   // return view('welcome');	

Route::post('upload_image',[ArticleController::class, 'uploadImage'])->name('upload');


Create a Model and Controller

The commands listed below assist in creating the controller and model.

php artisan make:controller ArticleController --resource --model=Article


namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Article extends Model
     use HasFactory;
     protected $fillable = [
        'title','description', 'author_name'


namespace App\Http\Controllers;
use App\Models\Article;
use Illuminate\Http\Request;
use Response;
class ArticleController extends Controller
    public function index()
        return view('article-form');
    public function uploadImage(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>$CKEditorFuncNum, '$url', '$msg')</script>";
            @header('Content-type: text/html; charset=utf-8'); 
            echo $response;

Create Blade Files

The article-form.blade.php file will then be created with the following code pasted into the resources/views/ subdirectory directory.


<!DOCTYPE html>
<html lang="en">
    <link href="" rel="stylesheet">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="text-center">Laravel 9 Integrate Ckeditor With Example - CodeSolutionStuff</h1><br> 
                <form method="post" action="{{ route('store.article') }}" class="form form-horizontal">               
                    <div class="form-group">
                        <input type="text" name="title" class="form-control"/>
                    <div class="form-group">
                         <textarea class="form-control" id="summary-ckeditor" name="summary-ckeditor"></textarea> 
                    <div class="form-group">
                        <label>Author Name</label>
                        <input type="text" name="author" class="form-control"/>
                    <div class="form-group">
                        <input type="submit" value="Submit" class="btn btn-primary"/>
    <script src=""></script>
    <script src="" type="text/javascript"></script>
    <script src="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
    CKEDITOR.replace('summary-ckeditor', {
        filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'

Run Our Laravel Application

Finally, we will create the article-form.blade.php file and paste the following code in the resources/views/ subdirectory directory.

php artisan serve

Now, we'll execute our example by navigating to the URL listed below in a browser.

Recommended Posts

View All

Laravel where and orWhere Condition Example

how to use where and orwhere condition in laravel 8, laravel 8 where and orwhere condition, where and orwhere laravel 8 example, orwhere and where in...

How to perform CURL requests using ixudra/curl in Laravel

Laravel&#39;s ixudra package offers an effective method for making HTTP requests using curl.

How To Use WYSIHTML5 Editor In Laravel 9?

wysihtml5 editor example, laravel wysihtml5 editor example, wysihtml5 laravel, wysihtml5 editor example in laravel, wysihtml5 with laravel, wysihtml5...

Laravel 8/7/6 Google ReCaptcha v2 Form Validation

In form validation, Laravel 8,7,6 uses Google v2 Captcha/Re-Captcha. You will learn how to add Google v2 ReCaptcha form validation to a Laravel form i...

Helper Function Example in Laravel 8

helper function example in laravel 8, laravel 8 global helper function, how to use global helper function in laravel 8, add helper function in laravel