Laravel 8 Ckeditor Image Upload Example Tutorial

May 15, 2021 . Admin

Hi Dev,

Today, i would like to share with you how to use and install ckeditor with image upload in laravel 8. i will use simple laravel image or file upload code with ckeditor file upload in laravel 8 follow step by step.

Now, We will use filebrowseruploadurl

and filebrowserUploadMethod function of ckeditor in laravel 8. so if you have ckeditor image upload not working in laravel 8 then i will help you to how to upload image utilizing ckeditor in laravel.

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

So, let's get started see bellow my steps to getting done with image upload in ckeditor laravel 8.

Step 1: Add Route

Now,Let's get started first step, we will add two routes for display ckeditor form page and another for image uploading in our routes.php file. So, open your route file and add bellow two new routes.

routes/web.php 
<?php
  
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CkeditorController;
/*
|--------------------------------------------------------------------------
| 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('ck-editor', [CkeditorController::class,'index']);
Route::post('ck-editor/imgupload', [CkeditorController::class,'imgupload'])->name('ckeditor.upload');
Step 2: Create Controller

Next, we will integrate two method on CkeditorController with two method index() and imgupload(). So, if you haven't engendered CkeditorController then engender new as bellow, or integrate two method.

app/Http/Controllers/CkeditorController.php 
<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
  
class CkeditorController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('ckeditor');
    }
  
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function imgupload(Request $request)
    {
        if($request->hasFile('upload')) {
            $origin_Name = $request->file('upload')->getClientOriginalName();
            $File_Name = pathinfo($origin_Name, PATHINFO_FILENAME);
            $extension_Name = $request->file('upload')->getClientOriginalExtension();
            $File_Name = $File_Name.'_'.time().'.'.$extension_Name;
        
            $request->file('upload')->move(public_path('images'), $File_Name);
   
            $CKEditorFuncNum = $request->input('CKEditorFuncNum');
            $url = asset('images/'.$File_Name); 
            $msg = 'Image uploaded successfully'; 
            $response = "";
               
            @header('Content-type: text/html; charset=utf-8'); 
            echo $response;
        }
    }
}
Step 3: Add Blade File

Here, we need to create ckeditor.blade.php file and write form logic and ckeditor js code. so let's create incipient blade file and put bellow code:

resources/views/ckeditor.blade.php 
<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Ckeditor Image Upload Example Tutorial- MyWebtuts.com</title>
    <script src="https://cdn.ckeditor.com/4.12.1/standard/ckeditor.js"></script>
</head>
<body>
  
<h1>Laravel 8 Ckeditor Image Upload Example Tutorial- MyWebtuts.com</h1>
<textarea name="editor1"></textarea>
   
<script type="text/javascript">
    CKEDITOR.replace('editor1', {
        filebrowserUploadUrl: "{{route('ckeditor.upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'
    });
</script>
   
</body>
</html>

Step 4: Create images folder

You have to also create new images folder in your public folder for store image.

Now we are ready to run our application example with laravel 8 so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000/ck-editor

I Hope It will help you..

#Laravel 8 #Laravel

You might also like...