How to Upload Image with CKEditor in Laravel

Laravel CKEditor. How to install and use CKEditor with image upload in laravel. In this tutorial, we will learn how to install CKEditor in laravel using the command line. and how to upload images and files in laravel with CKEditor.

How to Install CKEditor Image Upload in Laravel

So first is first go to this link and Download CKeditor source code from CKEditor website.

Extract the CKEditor files and move to the Laravel’s public folder.

Include the CKEditor main JavaScript file in your Laravel blade template. You can see this in the below template that I have added the filebrowserUploadUrl in the config section. And corresponding image upload URL has been in place for the PHP file upload option. You may notice the csrf_token is included the URL to avoid the failure of cross-site validation in Laravel.

<div class="form-group">
	<label class="control-label col-md-3 col-sm-3 col-xs-12">Description <span class="required">*</span>
	</label>
	<div class="col-md-9 col-sm-9 col-xs-12">
		<textarea class="form-control" name="additional_info" id="description" placeholder="" rows="50">{{ old('additional_info') }}</textarea>
	</div>
</div>

Java Script File

<script src="{{ URL::to('lib/ckeditor/ckeditor.js') }}"></script>
<script>
	window.onload = function() {
		CKEDITOR.replace( 'description', {
			filebrowserUploadUrl: '{{ route('upload',['_token' => csrf_token() ]) }}',
                        filebrowserUploadMethod: 'form'
		});
	};
</script>

Once you have done with the blade template, we can move to the main upload part in the controller. So whenever you select an image and send it to the server you will call the above URL mentioned in the CKEDITOR config.

You have to use this Facade in order to work the Input class use Illuminate\Support\Facades\Input;

in routes/web.php

Route::post('upload_image','CkeditorController@uploadImage')->name('upload');

in app/Http/Controllers/CkeditorController.php

public function upload_image(Request $request)
	{
		//return 'hi';
	    if($request->hasFile('upload')) {

	        //get filename with extension
	        $file = $request->file('upload');
	   		$extension = $file->getClientOriginalExtension();
	   		$originalName = str_slug($file->getClientOriginalName());

	        //get filename without extension
	        //$originalName = pathinfo($extension, PATHINFO_FILENAME);
	   
	        //filename to store
	        $fullName = $originalName. '-' .time() . '-' . mt_rand(). '.' . strtolower($extension);
	   
	        //Upload File
	        $disk = 'public';
	        $folder = 'uploads/files';

        	$uploadedFile = $file->storeAs($folder, $fullName, $disk);
	 
	        $CKEditorFuncNum = $request->input('CKEditorFuncNum');
	        $url = Storage::url($uploadedFile); 
	        $msg = 'Image Successfully Uploaded'; 
	        $response = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
	          
	        // Render HTML output 
	        @header('Content-type: text/html; charset=utf-8'); 
	        echo $response;
	    }
	}