Summernote Image Upload With Example Laravel 8

Today, in this tutorial we learn how to upload images in summernote laravel. this post image upload in summernote using a text editor. We will use summernote editor in the image upload laravel. I would like to show you laravel image upload in summernote text editor with an example.

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

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

Here I will give you a full example for laravel summernote text editor with image upload and summernote insert image URL.

DB Insert | Summernote Image Upload With Example Laravel 8

Laravel 8 Summernote Image Upload With Example

Step 1: Install Laravel App
Step 2: Setting Database Configuration
Step 3: Add Route
Step 4: Create Controller
Step 5: Create View File

Step 1 : Install Laravel App

We need to get a fresh laravel version application using the below command. So Let's open the terminal and run the below command.

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

Step 2 : Setup Database Configuration

We will open the .env file and change the database name, username, and password in the env file to create summernote image upload laravel.

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

We will create two routes for show summernote and the other is post route upload image. So let's add the below route in the 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

We will create a controller using the PHP artisan command and then after adding two methods for view summernote and upload images in implement Summernote Wysiwyg Editor in Laravel.

php artisan make:controller ImageController

Successfully run this command then after Put below 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

We will create a blade file view summernote editor. So let's open the view file and put the below code. we learn upload images from summernote text editor.

resources/views/summernote.blade.php

<html>
<head>
    <title>Summernote Image Upload With Example Laravel 8 - phpcodingstuff.com</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>Summernote Image Upload With Example Laravel 8 - phpcodingstuff.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>

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

php artisan serve

I hope it can help you...

Robert look

Author, Web Developer (Front-end & Back-end)

My Name is Robert look from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'm working on front-end & back-end web development using popular web technology Languages. That's why I love to share my coding knowledge in a smart way.