---
title: "How to Upload Images in Summernote Editor Using Laravel 12?"
url: "https://magecomp.com/blog/upload-images-in-summernote-editor-laravel-12/"
date: "2026-05-20T12:59:34+00:00"
modified: "2026-05-20T12:59:38+00:00"
author:
name: "Bharat Desai"
url: "https://magecomp.com"
categories:
- "Laravel"
word_count: 1059
reading_time: "6 min read"
summary: "In the tutorial provided here, you will see how to add Summernote (a WYSIWYG editor) along with image upload capabilities in Laravel 12."
description: "Learn how to upload images in Summernote Editor using Laravel 12. Step-by-step guide with example code."
keywords: "Laravel"
language: "en"
schema_type: "Article"
related_posts:
- title: "Leveraging Laravel Helpers: Simplifying Development Tasks"
url: "https://magecomp.com/blog/laravel-helpers/"
- title: "A Comprehensive Guide to Laravel Twilio Integration"
url: "https://magecomp.com/blog/laravel-twilio-integration/"
- title: "Laravel: How to Add Form Validation in the Request Controller"
url: "https://magecomp.com/blog/laravel-add-form-validation-in-the-request-controller/"
---
# How to Upload Images in Summernote Editor Using Laravel 12?
_Published: May 20, 2026_
_Author: Bharat Desai_
In the tutorial provided here, you will see how to add Summernote (a WYSIWYG editor) along with image upload capabilities in Laravel 12.
The goal is to have users create rich text posts as well as upload images directly through Summernote. We will go through the entire process of creating an actual blog module. This includes the migration for creating a posts database, posts table, posts model, posts controller, routes required for managing the posts, and displaying the uploaded images in the Summernote. This is step-by-step, using very simple examples so even beginners will be able to implement, but flexible enough for advanced users as well.
[](https://magecomp.com/services/laravel-development-services/)
## Steps to Upload Images in Summernote Editor Using Laravel 12:
### Step 1: Install Laravel 12
If you don’t have your own Laravel app created, you can run the command below:
```
composer create-project laravel/laravel example-app
```
### Step 2: Create the Posts Table and Model
In this step, we need to create a new migration to add a “posts” table.
```
php artisan make:migration create_posts_table
```
**database/migrations/2024_02_17_133331_create_posts_table.php**
```
id();
$table->string('title');
$table->text('body');
$table->timestamps();
});
}
**
* Reverse the migrations.
*
* @return void
*/
public function down(): void
{
Schema::dropIfExists('posts');
}
};
```
Now, let’s run the migration command:
```
php artisan migrate
```
Now we need to create the Post Model and add the following code:
**app/Models/Post.php**
```
$this->makeBodyContent($value),
);
}
/**
* Write code on Method
*
* @return response()
*/
public function makeBodyContent($content)
{
$dom = new DomDocument();
$dom->loadHtml($content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$imageFile = $dom->getElementsByTagName('img');
foreach($imageFile as $item => $image){
$data = $image->getAttribute('src');
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$imgeData = base64_decode($data);
$image_name= "/uploads/" . time().$item.'.png';
$path = public_path() . $image_name;
file_put_contents($path, $imgeData);
$image->removeAttribute('src');
$image->setAttribute('src', $image_name);
}
return $dom->saveHTML();
}
}
```
### Step 3: Create the Routes
In this step, we need to create some routes for listing posts and creating posts.
**routes/web.php**
```
name('posts.store');
```
### Step 4: Create Controller
In this step, we will create a new PostController where we will be writing the image upload code to process and upload the images to our public/uploads directory. All of your code will be added to the PostController.
**app/Http/Controllers/PostController.php**
```
validate($request, [
'title' => 'required',
'body' => 'required'
]);
$post = Post::create([
'title' => $request->title,
'body' => $request->body
]);
return back()
->with('success','Post created successfully.');
}
}
```
### Step 5: Create Blade File
Here, we need to create a Blade file for the create form. So let’s create one file.
**resources/views/postsCreate.blade.php**
```
Laravel 12 Summernote Editor Image Upload Example
```
### Run Laravel App:
All steps have been completed, and your next step is to type the command below and hit enter to run your Laravel app:
```
php artisan serve
```
After this, open the web browser and type the URL below into the web browser’s address bar and you should see the output generated from your application:
## Conclusion
In this tutorial, we’ve created a rich text editor with image upload capability within Laravel 12. We have set up the database, created models, and established routes and controller logic. We’ve integrated Summernote as the front-end display for images you wish to upload. Once this implementation has been completed, your users will have an easier time uploading and managing images as they create blog posts in the Summernote rich text editor. This method is a good way to improve how you manage content in a Laravel application, and also provides your users with a much nicer experience as they edit content.
[](https://magecomp.com/services/hire-laravel-developer/)
## FAQ
**1. What is Summernote Editor in Laravel?**
Summernote is an open-source WYSIWYG text editor you can use anywhere in your Laravel Application to create rich text content and upload image / file attachments.
**2. How to Upload Images in Summernote Using Laravel 12?**
You can upload images into the Summernote editor by using Summernote’s onImageUpload() method, which will make an AJAX call to your Laravel controller.