In this article, we will see the laravel 10 summernote editor image upload. Here, we will learn about how to upload an image using summernote editor in laravel 10. Summernote is a JavaScript library that helps you create WYSIWYG editors online.

Summernote editor is a simple but customizable, powerful rich text editor for the web. Summernote has a few special features like Paste images from a clipboard and Saving images directly in the content of the field using base64 encoding, so you don't need to implement image handling at all.

So, let's see how to insert a picture into summernote, summernote image upload laravel 10, and image upload in summernote editor using laravel 10.

In this step, we will install laravel 10 using the following command.

composer create-project laravel/laravel laravel-10-summernote-example

 

Then, we will create migration and model using the following command.

php artisan make:migration create_posts_table

Migration:

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
};

Then run the below command for migrate the table to the database.

php artisan migrate

After that, we will create Post Model using the below command.

php artisan make:model Post

app/Models/Post.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Post extends Model
{
    use HasFactory;
    
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'title',
        'description',
    ];
}

 

Now, we will create routes to the web.php file.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SummernoteControler;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('posts/create',[SummernoteControler::class,'create']);
Route::post('posts/store',[SummernoteControler::class,'store'])->name('posts.store');

 

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

php artisan make:controller SummernoteController

app/Http/Controllers/SummernoteControler.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;

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


    public function upload(Request $request)
    {
        $this->validate($request, [
            'title' => 'required',
            '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();
        $post = Post::create([
            'title' => $request->title,
            'description' => $description
        ]);
    }
}

 

Now, we will create summernote.blade.php file. So, add the HTML code to that file.

resources/views/summernote.blade.ph

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 10 Summernote Editor Image Upload Example - Techsolutionstuff</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.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 10 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">
                            <label><strong>Title:</strong></label>
                            <input type="text" name="title" class="form-control" />
                        </div>
                        <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:

• Read Also: Laravel 10 CKEditor Image Upload Example
• Read Also: How To Hide Toolbar In Summernote Editor
• Read Also: How To Install TinyMCE Editor In Laravel
• Read Also: How To Add Loader In HTML Page In jQuery