Skip to content

All topics  /  Laravel

How to Upload Image using Ckeditor in Laravel?

Laravel

Teams applying “How to Upload Image using Ckeditor in Laravel?” in a production project can use the official article to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

Nov 06, 2019

Hii Developer,

In this example,i would like to share with you how to use and install ckeditor with image upload in laravel. i will use simple laravel 6 custom image file upload code with ckeditor file upload in laravel.

I write simple example of laravel 6 custom image or file upload with ckeditor. you can cehck this tutorial.

We will use filebrowseruploadurl and filebrowserUploadMethod function of ckeditor in laravel . so if you have ckeditor image upload not working in laravel then i will hep you to how to upload image using ckeditor in laravel.

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

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

Step 1 Create Route


First we need to create two routes for display ckeditor form page and another for image uploading. so let's create it. 

Route::get('ckeditor', 'CkeditorController@index');
Route::post('ckeditor/upload', 'CkeditorController@upload')->name('ckeditor.upload');

Step 2 Create Controller

In this step, we will create new controller as CkeditorController with two method index() and upload(). in index method we will return and view and upload method we will write code of image uploading.

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 upload(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 3: Create Blade File

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

resources/views/ckeditor.blade.php 

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Ckeditor Image Upload Example</title>
    <script src="https://cdn.ckeditor.com/4.12.1/standard/ckeditor.js"></script>
</head>
<body>

  
<h1>Laravel Ckeditor Image Upload</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

In last step, we need to create "images" folder on your public directory. so must be create with permission.

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

php artisan serve

Now you can open bellow URL on your browser: 

http://localhost:8000/ckeditor

It will help you...

More on this topic