Laravel 9 Image Upload In Summernote Editor

Websolutionstuff | Mar-24-2022 | Categories : Laravel PHP

In this article, we will see laravel 9 image upload in summernote editor. there are many editor available in laravel to save the 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 9.

So, let's see image upload in summernote editor using laravel 9, how to upload image in summernote editor in laravel 9, laravel 9 summernote editor with image upload.

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);
            $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>Laravel 9 Image Upload In Summernote Editor - Websolutionstuff</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 9 Image Upload In Summernote Editor - Websolutionstuff</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 :

Recommended Post
Featured Post
Laravel 10 Multiple Image Upload Example
Laravel 10 Multiple Image Uplo...

In this article, we will see laravel 10 multiple image examples. Here, we will learn about how to upload multiple i...

Read More

Mar-17-2023

Laravel 8 Many To Many Relationship Example
Laravel 8 Many To Many Relatio...

In this example we will see laravel 8 many to many relationship example. Use many to many relationship in lara...

Read More

Nov-15-2021

Laravel 8 Socialite Login with Facebook Account
Laravel 8 Socialite Login with...

In this tutorial, we will learn laravel 8 socialite login with facebook account, as you all know currently many websites...

Read More

Mar-08-2021

How to Uninstall Composer on Ubuntu 23.04
How to Uninstall Composer on U...

Hey there! If you've found your way to this guide, chances are you're looking to bid farewell to Composer on you...

Read More

Jan-22-2024