Laravel Summernote Image Upload Example

Laravel 6 , Laravel , Laravel 7

Nicesnippets

540

24-06-2020


Hello Friends,

Today, I am going to learn you how to image upload in sumernote editor laravel application.We will using summernote editor in image upload laravel app. I would like to show you laravel image upload in summernote editor example.

Summernote Wysiwyg is very simple and cool editor. If you use simply textarea and you require to make more tools like bold, italic or image upload, Then you have to choose Summernote plguin.

In this example, I am going to use summernote with bootstrap. So you can simply use summernote editor. If You need summernote editor with image upload in laravel app.

Here I will gove you full example for laravel summernote editor with image upload.

Step 1 : Install Laravel App

In First step, We need to get fresh laravel version application using bellow command. So Let's open terminal and run bellow command.

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

Step 2 : Setup Database Configuration

After successfully install laravel app thenafter configure databse setup. We will open ".env" file and change the database name, username and password in the env file.

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Enter_Your_Database_Name

DB_USERNAME=Enter_Your_Database_Username

DB_PASSWORD=Enter_Your_Database_Password

Step 3 : Add Route

In this step, We will create two route for show summernote and other is post route upload image.So lets add bellow route in route file.

routes/web.php

Route::get('summernote-image',array('as'=>'summernote.get','uses'=>'ImageController@image'));

Route::post('summernote-image',array('as'=>'summernote.image.upload','uses'=>'ImageController@upload'));

Step 4 : Create Controller

In this step, We will create controller using php artisan command and thenafter add two method for view summernote and upload image.

php artisan make:controller ImageController

Successfully run above command thenafter Put bellow code in ImageController.php.

app/Http/Controllers/ImageControler.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller

{

/**

* Show the application dashboard.

*

*

* @return \Illuminate\Http\Response

*/

public function image()

{

return view('summernote');

}

/**

* Show the application dashboard.

*

* @return \Illuminate\Http\Response

*/

public function upload(Request $request)

{

$this->validate($request, [

'description' => 'required',

]);

$description=$request->input('description');

$dom = new \DomDocument();

$dom->loadHtml($description, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

$images = $dom->getElementsByTagName('img');

foreach($images as $k => $img){

$data = $img->getAttribute('src');

list($type, $data) = explode(';', $data);

list(, $data) = explode(',', $data);

$data = base64_decode($data);

$image_name= "/upload/" . time().$k.'.png';

$path = public_path() . $image_name;

file_put_contents($path, $data);

$img->removeAttribute('src');

$img->setAttribute('src', $image_name);

}

$description = $dom->saveHTML();

dd($description);

}

}

Step 5 : Create View File

In this step,We will create blade file view summernote editor.So Lets open view file and put bellow code:

resources/views/summernote.blade.php

<!DOCTYPE html>

<html>

<head>

<title>laravel summernote image upload example - nicesnippets</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js-->

<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.css" rel="stylesheet">

<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.js"></script>

</head>

<body>

<div class="row" style="margin-top: 50px;">

<div class="col-md-8 col-md-offset-2">

<div class="panel panel-primary">

<div class="panel-heading">

<h4>Laravel Summernote Image Upload Example - NiceSnippets.com</h4>

</div>

<div class="panel-body">

<form method="POST" action="{{ route('summernote..image.upload') }}">

{{ csrf_field() }}

<div class="form-group">

<strong>Description:</strong>

<textarea class="form-control summernote" name="description"></textarea>

</div>

<button type="submit" class="btn btn-success">Submit</button>

</form>

</div>

</div>

</div>

</div>

<script type="text/javascript">

$(document).ready(function() {

$('.summernote').summernote({

height: 300,

});

});

</script>

</body>

</html>

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

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000/summernote-image

It will help you...