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 Delete Multiple Records Using Checkbox In Laravel
How To Delete Multiple Records...

In this example, I will show you how to delete multiple records using a single checkbox or how to delete multi...

Read More

May-26-2020

What Is Digital Marketing?
What Is Digital Marketing?

Digital marketing is the component of marketing that utilizes internet and online bas...

Read More

Oct-19-2021

Laravel 10 AJAX CRUD Operations Example
Laravel 10 AJAX CRUD Operation...

In this article, we will see the laravel 10 ajax crud operations example. Here, we will learn about ajax crud operation...

Read More

Feb-27-2023

How to Force Redirect Http to Https in Laravel
How to Force Redirect Http to...

In this small artical we will see how to force redirect http to https in laravel, Here i will show you two method in&nbs...

Read More

Aug-11-2021