We will use filebrowseruploadurl and filebrowserUploadMethod function of Ckeditor in Laravel 5. 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.
First we need to create two routes for display Ckeditor form page and another for image uploading. so let’s create it.
routes/web.php
Route::get('ckeditor', 'CkeditorController@index');
Route::post('ckeditor/upload', 'CkeditorController@upload')->name('ckeditor.upload');
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;
}
}
}
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 5 Ckeditor Image Upload Example - ItSolutionStuff.com</title>
<script src="https://cdn.ckeditor.com/4.12.1/standard/ckeditor.js"></script>
</head>
<body>
<h1>Laravel 5 Ckeditor Image Upload Example - ItSolutionStuff.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>
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 5.8 so run bellow command for quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/ckeditor
I hope it can help you…
Thanks for reading ❤
If you liked this post, share it with all of your programming buddies!
Follow me on Facebook | Twitter
☞ PHP with Laravel for beginners - Become a Master in Laravel
☞ Projects in Laravel: Learn Laravel Building 10 Projects
☞ Laravel for RESTful: Build Your RESTful API with Laravel
☞ Fullstack Web Development With Laravel and Vue.js
☞ Laravel 5.8 Ajax CRUD tutorial using Datatable JS
☞ Laravel 5.8 Tutorial from Scratch for Beginners
☞ Build RESTful API In Laravel 5.8 Example
☞ Login with Google in Laravel 5.8 App using Socialite Package
☞ Laravel PHP Framework Tutorial - Full Course for Beginners (2019)
#laravel #php #web-development #image