HOW TO UPLAD IMAGE IN CKEDITOR BY USING LARAVEL

Previously We discussed how to install CKEditor in Laravel. You can click HERE to read the article.

I have already installed CKEditor. Now I would like to upload the image in the textarea by CKEditor.

 

1. First of all create A route.

Route::post(‘ckeditor/upload’, ‘CkeditorController@upload’)->name(‘ckeditor.upload’);

 

2. Then create Controller named as CKeditor Controller. In cmd type

Php artisan make:controller CkeditorController

 This will make the controller

3. now go to the controller and paste this code.

<?PHP
namespace App\Http\Controllers;
use Illuminate\Http\Request;

use App\Http\Requests;

class CkeditorController extends Controller

{

  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;

        }

    }

}

 

4. Now make a folder named images in public folder

 

5. Now you can add this code. In the view file. Below the <textarea>

<script src=”{{ URL::asset(‘ckeditor/ckeditor.js’) }}”></script>

<script type=”text/javascript”>

    CKEDITOR.replace(‘editor’, {

        filebrowserUploadUrl: “{{route(‘ckeditor.upload’, [‘_token’ => csrf_token() ])}}”,

        filebrowserUploadMethod: ‘form’

    });

</script>

 

You will get Upload button then you can choose and insert according to your requirement.