Laravel 10 Summernote Editor Image Upload Example

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.

Step 1: Install Laravel 10

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

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


Step 2: Create Table And Model

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

php artisan make:migration create_posts_table


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) {
     * Reverse the migrations.
     * @return void
    public function down()

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


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 = [


Step 3: Add Route

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


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!



Step 4: Create Controller

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

php artisan make:controller SummernoteController



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',

        $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->setAttribute('src', $image_name);

        $description = $dom->saveHTML();
        $post = Post::create([
            'title' => $request->title,
            'description' => $description


Step 5: Create Blade File

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


<!DOCTYPE html>
    <title>Laravel 10 Summernote Editor Image Upload Example - Techsolutionstuff</title>
  <link href="" rel="stylesheet">
  <script src=""></script>
  <script src=""></script>
  <link href="[email protected]/dist/summernote.min.css" rel="stylesheet">
  <script src="[email protected]/dist/summernote.min.js"></script>
    <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 class="panel-body">
                    <form method="POST" action="{{ route('image.upload') }}">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <input type="text" name="title" class="form-control" />
                        <div class="form-group">
                            <textarea class="form-control summernote" name="description"> 
                        <button type="submit" class="btn btn-success">Submit</button>
    <script type="text/javascript">
        $(document).ready(function() {
               height: 200,


You might also like: