Hello Devs,

In this tutorial, we are going to learn how to upload image in sumernote editor laravel application.

Follow this step by step guide given below:



Step 1 : 

Install Laravel App

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



Step 2 : 

Setup Database Configuration

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 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

php artisan make:controller ImageController


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

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 - Rathorji.in</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>


Run this command:

php artisan serve


Open this URL:

http://localhost:8000/summernote-image


I hope this example helps you.