How to Upload Image using Summernote Editor in Laravel 10?

Hi friends,

Today, I explain how to upload images using summernote editor in laravel 10? in this example, you will learn to add summernote editor in laravel 10 application. you will learn how to upload an image file with summernote editor in Laravel 10 applications. If you are searching for how to image file upload using the Sumernote editor in Laravel 10 application. step by step explain upload image summernote laravel 10.

Adding a Plugin to Summernote is as easy as adding Summernote to the page you want Summernote to appear in. Some Plugins may also dynamically add styles to the DOM when initialized. We typically load the Plugin Script after loading the Summernote Script. Most scripts are added in the head area of the typical HTML page.

Step 1: Download Laravel

Let us begin the tutorial by installing a new Laravel application. if you have already created the project, then skip the following step.

composer create-project laravel/laravel example-app

Step 2: Add Table and Model

in the first step, we need to create new migration for adding the "posts" table:

php artisan make:migration create_posts_table

database/migrations/2022_03_15_133512_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()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
};

now let's run the migration command:

php artisan migrate

now, just create a post model and add the code below:

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',
        'body',
    ];
}

Step 3: Add Route

In this step, we need to create some routes for listing posts and creating posts.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
  
/*
|--------------------------------------------------------------------------
| 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',[PostController::class,'create']);
Route::post('posts/store',[PostController::class,'store'])->name('posts.store');

Step 4: Add Controller

in this step, in this file, we write the image upload code, and the image will upload to the "uploads" folder in the public directory. we need to create PostController and add the following code to that file:

php artisan make:controller PostController

app/Http/Controllers/PostController.php

<?php
   
namespace App\Http\Controllers;
   
use Illuminate\Http\Request;
use App\Models\Post;
   
class PostController extends Controller
{
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function create()
    {
        return view('postsCreate');
    }
      
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function store(Request $request)
    {
        $this->validate($request, [
             'title' => 'required',
             'body' => 'required'
        ]);
 
       $content = $request->body;
       $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);
        }
 
       $content = $dom->saveHTML();
       $post = Post::create([
            'title' => $request->title,
            'body' => $content
       ]);
 
       dd($post->toArray());
    }
}

Step 5: Add Blade Files

here, we need to create blade files for index and create. so let's create one by one file:

resources/views/postsCreate.blade.php

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to Upload Image using Summernote Editor in Laravel 10? - Nicesnippets.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.css" />
</head>
    
<body>
    <div class="container mt-4">
        <h3 class="text-center">How to Upload Image using Summernote Editor in Laravel 10? - Nicesnippets.com</h3>
        <form method="post" action="{{ route('posts.store') }}" enctype="multipart/form-data" class="mt-5">
            @csrf
            <div class="form-group">
                <label><strong>Title:</strong></label>
                <input type="text" name="title" class="form-control" />
            </div>
            <div class="form-group my-3">
                <label><strong>Description:</strong></label>
                <textarea id="summernote" name="body"></textarea>
            </div>
            <div class="form-group text-center">
                <button type="submit" class="btn btn-success btn-block">Publish</button>
            </div>
        </form>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.js"></script>
  
    <script type="text/javascript">
        $(document).ready(function () {
            $('#summernote').summernote({
                height: 300,
            });
        });
    </script>
      
</body>
</html>

Run Laravel App:

All steps have been done, now you have to type the given command and hit enter to run the Laravel app:

php artisan serve

Now, you have to open the web browser, type the given URL and view the app output:

http://localhost:8000/posts/create

I hope it can help you...