How To Upload Image Using Ckeditor In Laravel 8

Today in this tutorial, We will explain to you how to upload images using CKEditor in laravel 8. This code is very useful for any project.

we need to store long text, article content, product summary, and different tag content, etc, with the description in our database, we use the CKEditor editors. this editor's use of text stylish is easy to use any content.

I write a very simple example of image uploading with laravel step by step so you can easily use it in your laravel 8. Ckeditor is the most powerful tool for the content editor. so if you have an image upload option also available then it awesome.

Some problem developer CKEditor image upload not working. so this article to use it.

So, let's see below steps to getting done with image upload in CKEditor laravel 8.

How To Upload Image Using Ckeditor In Laravel 8 - Phpcodingstuff.com

CKeditor Image Upload Laravel

This Editor free to install our laravel application. let’s follow the below steps for how to upload image using CKeditor in laravel.

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

Step 1: Install Laravel 8

First of all, We are going to install laravel 8, so first open the command prompt or terminal and go to go to xampp htdocs folder directory using the command prompt. after then run the below command.

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

Step 2: Create Routes

Add the following route code in the “routes/web.php” file.

<?php
/*
|--------------------------------------------------------------------------
| 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@uploadImage')->name('upload');
 
?>

Step 3: Create A Model And Controller

Here below command help to create the controller and model.

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

Article.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Article extends Model
{
    //
	protected $fillable = [
        'title','description', 'author_name'
    ];
}
?>

ArticleController.php

<?php
namespace App\Http\Controllers;
use App\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;
        }
    }	
}
?>

Step 4: Create Blade Files

Finally, We will create the article-form.blade.php file in the “resources/views/” folder directory and paste the below code. we learn How to add CKEditor with image upload in laravel.

article-form.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
     <title>How To Upload Image Using Ckeditor In Laravel 8 - phpcodingstuff.com</title>
    <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 7 Integrate Ckeditor With Example - XpertPhp</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>

Step 5: Run Our Laravel Application

We can start the server and run this example using the below command.

php artisan serve

I hope it can help you...

Robert look

Author, Web Developer (Front-end & Back-end)

My Name is Robert look from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'm working on front-end & back-end web development using popular web technology Languages. That's why I love to share my coding knowledge in a smart way.