Laravel 12 Summernote Image Upload CRUD Example

#laravel #php #summernote #tutorial

In this Laravel 12 guide, we’ll create a complete CRUD system with Summernote integration, including image uploads and validation for the post description field. The application will allow users to add, view, update, and remove blog posts. Each post will include a title (plain text) and a description (rich text with images).

We’ll build a Bootstrap-styled Blade form with jQuery validation to ensure required fields are filled. When a form is submitted, any images embedded in the Summernote editor as Base64 will be automatically processed: the images will be extracted, saved to the public/uploads/ directory, and the HTML content will be updated to reference those file paths instead of Base64 data. This approach keeps the database clean and ensures all image URLs remain valid.

For modern platforms like blogs, knowledge bases, or CMS applications, a rich text editor is essential. It allows users to format content, insert links, and upload images with ease. Summernote is a lightweight and user-friendly WYSIWYG editor that provides exactly that functionality through its toolbar for lists, formatting, hyperlinks, and media.

By default, Summernote embeds images directly as Base64 within the editor’s content. While convenient for transmission, storing Base64 strings in the database is inefficient and can quickly inflate its size. To solve this, we’ll configure Laravel to decode the images, save them as files in the public/ folder, and rewrite the HTML output to use proper file URLs.

Let’s go step by step and implement this feature.

Steps For Laravel 12 Summernote Image Upload CRUD EXample

Step 1: Install Laravel Project
Step 2: MySQL Database Configuration
Step 3: Create Model and Migration
Step 4: Create Controller and Logic for CRUD
Step 5: Create Routes for CRUD
Step 6: Blade Form with Summernote
Step 7: Run Laravel App

Step 1: Install Laravel Pro

Begin by setting up a fresh Laravel 12 application. Make sure your system has PHP 8.2 or higher along with Composer installed. You can generate a new project using the Composer command:

composer create-project laravel/laravel laravel-summernote-blog

This will scaffold a new Laravel app inside a folder named laravel-summernote-blog. Once installed, open the .env file and configure it with your database credentials.

Step 2: MySQL Database Configuration

By default, a new Laravel installation points to SQLite (database/database.sqlite). For this tutorial, we’ll configure it to use MySQL instead. Open your project’s .env file and update the database section like this:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

With these environment variables, Laravel will connect to a MySQL database running on localhost.

Step 3: Create Model and Migration

Next, let’s create a Post model along with its migration and resource controller. The posts table will store two fields:

title (string)
description (text)

Run the following Artisan command:

php artisan make:model Post -mcr

This single command will create:

A migration file in database/migrations/xxxx_xx_xx_xxxxxx_create_posts_table.php
A model in app/Models/Post.php
A resource controller in app/Http/Controllers/PostController.php

Now, open the newly generated migration file and define the table schema.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('description'); 
            $table->timestamps();
        });
    }

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

The migration will set up a table containing an auto-incrementing primary key, a title column, a description column for storing rich text, and the default timestamps.

After defining the schema, run the migration with: