How to Image Upload with Summernote in Laravel 11 Tutorial

In this post, I will show you How to Image Upload with Summernote in Laravel 11 application.

Summernote is a WYSIWYG (What You See Is What You Get) editor that allows users to create rich text editors for web pages. It is an open-source, browser-based editor that takes advantage of a jQuery framework to provide a simple, intuitive interface for users to create, edit, and format their text. You Can Learn How to Generate Barcode in Laravel 11

In this tutorial, we will create a posts table with a title and body column. We will create a form with input for the title and Summernote rich textbox for the body, then save it to the database.
Step for How to Image Upload with Summernote in Laravel 11?

Step 1: Install Laravel 11

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel SummernoteImageUpload
cd SummernoteImageUpload

Step 2: Create posts Table and Model

In the first step, we need to create a new migration for adding a “posts” table.

php artisan make:migration create_posts_table

database/migrations/2024_02_17_133331_create_posts_table.php

<?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(): void
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down(): void
    {
        Schema::dropIfExists('posts');
    }
};

Read More