Image Upload in Summernote Editor Using Laravel

Websolutionstuff | Jul-09-2021 | Categories : Laravel PHP

In this post we will see how to upload image in summernote editor. there are many editor available in laravel to save rich text here we will use summernote editor.

summernote editor is a simple but customizable, powerful rich text editor for the web, here you can image upload in summernote editor using laravel, so let's see how to implement summernote editor with image upload example.

Here, i have ceated one controller to upload image in summernote editor.

php artisan make:controller ImageUploadController

Now, copy below code in this location app/Http/Controllers/ImageUploadControler.php

 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageUploadController extends Controller
{
    public function image()
    {
        return view('summernote');
    }


    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();

    }
}

 

Now, create blade file for view.

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload in Summernote Editor Using Laravel - websolutionstuff.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>
   
    <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>Image Upload in Summernote Editor Using Laravel-websolutionstuff.com</h4>
                </div>
                <div class="panel-body">
                    <form method="POST" action="{{ route('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: 200,
          });
       });
    </script>
</body>
</html>

 

Recommended Post
Featured Post
How To Create Dynamic Bar Chart In Laravel
How To Create Dynamic Bar Char...

In this article, we will show you how to create a dynamic bar chart in laravel. charts are used to represent data i...

Read More

Jul-01-2020

How To Get Last Record In Laravel 8
How To Get Last Record In Lara...

In this example, we will see how to get the last record in laravel 8. You can simply get the last record using laravel 8...

Read More

Jan-26-2022

How To Integrate Mailchimp API In Laravel 9
How To Integrate Mailchimp API...

In this article, we will see how to integrate mailchimp API in laravel 9. Here we will learn how we can integr...

Read More

Aug-01-2022

How To Check Occupied Disk Space In Laravel
How To Check Occupied Disk Spa...

Many times we need requirements to check the occupied disk space of the server on the admin side and we are checking man...

Read More

Jul-29-2020