Laravel 7 Ckeditor Image Upload Example

Pinterest LinkedIn Tumblr

Step 1: Install the laravel project using the command line.

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

Step 2: Open project in code and use vs code terminal.

cd laravel7Ckeditor

Step 3: find .env file in root directory setup database configuration.


Step 4: Route

Open routes/web.php file.

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

Step 5: Controller

Create CkeditorController Controller.

php artisan make:controller CkeditorController

Open app/Http/Controllers/CkeditorController.php file.

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>$CKEditorFuncNum, '$url', '$msg')</script>";
            @header('Content-type: text/html; charset=utf-8'); 
            echo $response;

Step 6: Create blade file

Create a new directory ckeditor at resources/views/ directory.
In resources/views/ directory create a new ckeditor.blade.php file.

<!DOCTYPE html>
    <title>Laravel 7 Ckeditor Image Upload Example</title>
    <script src=""></script>
<h1>Laravel 7 Ckeditor Image Upload Example</h1>
<textarea name="editor1"></textarea>
<script type="text/javascript">
    CKEDITOR.replace('editor1', {
        filebrowserUploadUrl: "{{route('ckeditor.upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'

Step 7: Run server

php artisan serve

Write A Comment