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.

<?php
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

Article.php

<?php
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'
    ];
}
?>

ArticleController.php

<?php
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>window.parent.CKEDITOR.tools.callFunction($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.

article-form.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <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">               
                  @csrf
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" name="title" class="form-control"/>
                    </div>  
                    <div class="form-group">
                        <label>Description</label>
                         <textarea class="form-control" id="summary-ckeditor" name="summary-ckeditor"></textarea> 
                    </div>  
                    <div class="form-group">
                        <label>Author Name</label>
                        <input type="text" name="author" class="form-control"/>
                    </div>   
                    <div class="form-group">
                        <input type="submit" value="Submit" class="btn btn-primary"/>
                    </div> 
                </form>             
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
    <script>
    CKEDITOR.replace('summary-ckeditor', {
        filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'
    });
    </script> 
</body>
</html>

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.

http://127.0.0.1:8000/article

Recommended Posts

View All

Laravel 9 Bootstrap 5 Auth Scaffolding


I'll show you how to make a Bootstrap 5 Auth Scaffolding in Laravel 9 in this tutorial. Auth Scaffolding uses the Laravel UI package to create a user...

Laravel whereHas and orWhereHas Query Example


laravel whereHas and orWhereHas query example, wherehas and orWhereHas query in laravel, how to use wherehas in laravel

Laravel 9 Razorpay Payment Gateway Integration Example


razorpay payment gateway integration in laravel 9, laravel 9 razorpay pay payment example, laravel 9 razorpay integration, razorpay integration in lar...

Google Map with Multiple Marker and Info Box in Laravel


This tutorial will teach you how to use Laravel to integrate a Google Map with numerous markers and an info box.

Laravel 9 Database Seeder Tutorial Example


Let's go over all of the procedures that will help us understand how the database seeder works in the Laravel application to generate dummy data.