How To Upload Image In Summernote Editor In Laravel 9
Tags: laravel9, uploadimage, summernote, editor
Published: 2022-12-12 05:30:00

In this article, we will see how to upload image in summernote editor in laravel 9. 

there are many editors 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 laravel 9 image upload in summernote editor.

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

Here, I have created a controller to upload images in the summernote editor.

```
php artisan make:controller SummernoteImageUploadController
```

Now, add the below code SummernoteImageUploadControler.php

app/Http/Controllers/SummernoteImageUploadControler.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, we will create a blade file for viewing.

```
<!DOCTYPE html>
<html>
<head>
    <title>How To Upload Image In Summernote Editor In Laravel 9 - 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>How To Upload Image In Summernote Editor In Laravel 9 - 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>
``` 

---

- **_[Read Also: Laravel 9 Drag And Drop File Upload Using Dropzone JS](https://techsolutionstuff.com/post/laravel-9-drag-and-drop-file-upload-using-dropzone-js)_**

- **_[Read Also: Laravel 9 Get Current User Location Using IP Address](https://techsolutionstuff.com/post/laravel-9-get-current-user-location-using-ip-address)_**