Laravel with Packages | Laravel Summernote Image Upload Example

This post will give you an example of a laravel summernote image upload. step by step explain upload image summernote laravel. you can understand the concept of image upload in summernote editor laravel. if you want to see an example of a laravel image upload in summernote then you are in a right place.

As we know, summernote provides image upload by default. but when you upload an image in summernote editor then they convert the image into a base64 string image and send it as content. that content if we store in the database then latter it can be an issue with database size. so the best way is when you upload an image then it should store the image in our public or storage folder.

here I will give you a simple example of an image that will upload to the folder. you can also use this example in laravel 6, laravel 7, laravel 8, and laravel 9 versions.

Just let’s follow the below step and see the preview below:

Step 1: Create Laravel Project

composer create-project laravel/laravel blog

Step 2: Create Post Table and Model

php artisan make:migration create_posts_table

database/migrations/2021_07_13_140744_create_posts_table.php

<?php

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

class CreatePostsTable 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, create the post model and add code as below:

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;

protected $fillable = [
'title',
'body',
];
}

Step 3: Create Route

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\PostController;

Route::get('posts/create',[PostController::class,'create']);
Route::post('posts/store',[PostController::class,'store'])->name('posts.store');

Step 4: Create Controller

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= "/upload/" . 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

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>Laravel Summernote Editor Image Upload Example</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
</head>

<body>
<div class="container mt-5">
<h1>Laravel Summernote Editor Image Upload Example - ItSolutionStuff.com</h1>
<form method="post" action="{{ route('posts.store') }}" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label>Title</label>
<input type="text" name="title" class="form-control" />
</div>
<div class="form-group">
<label>Description</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://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#summernote').summernote({
height: 450,
});
});

</script>
</body>
</html>

Now we are ready to run our example. so run the below command so quick run:

php artisan serve

Now you can open the bellow URL on your browser:

localhost:8000/posts/create

I hope it can help you...

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store