Laravel Summernote Editor Image Upload Example

In this article, we will see laravel summernote editor image upload example. there are many editors 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 8.

So, let's see how to implement summernote editor with an image upload example, image upload in summernote editor using laravel 8, how to upload image in summernote, summernote image upload laravel 7/8, laravel 7/8 summernote image upload.

Now, we'll create ImageUploadController.

php artisan make:controller ImageUploadController

Now, add the below code in 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($type, $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 a blade file for view.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Summernote Editor Image Upload Example - Techsolutionstuff</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>Laravel Summernote Editor Image Upload Example - Techsolutionstuff</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>

 


You might also like :

techsolutionstuff

Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of techsolutionstuff.com. Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.

RECOMMENDED POSTS

FEATURE POSTS