How to Upload Image in Laravel 9 with Summernote Editor

In this summernote image upload laravel tutorial, I will show you how to upload image using summernote editor in laravel 9 application. If you are facing a problem like summernote image upload not working then this example is for you. Here i will show you a complete step by step guide on imga eupload with summernote editor.

I will give you a complete example of how to know the example of laravel 9 summernote editor example. Let's see step by step explain laravel 9 summernote image upload. In this article, we will implement how to use summernote editor in laravel 9. We will learn how to install summernote in laravel 9. follow below step for summernote editor in laravel 9.

Step 1: Install Laravel 9

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

composer create-project laravel/laravel example-app

Step 2: Create Post 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

Now update the migration table like:

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, just create a post model and add the code as like bellow:

app/Models/Post.php

namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Post extends Model
{
    use HasFactory;
  
    protected $fillable = [
        'title',
        'body',
    ];
}

Read also: How to Add CKEditor with Image Upload using KCFinder in Laravel

Step 3: Create Route

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

routes/web.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: Create Controller

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

app/Http/Controllers/PostController.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: Create Blade Files

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

resources/views/postsCreate.blade.php

Read also: How to Integrate Summernote Editor in Laravel 9?

Hope it can help you.