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
first of all, we need to get a fresh Laravel 8 version application using the below command, So open your terminal OR command prompt and run the below command:
composer create-project laravel/laravel blogStep 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_tabledatabase/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 migratenow, 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
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;
Route::get('posts/create',[PostController::class,'create']);
Route::post('posts/store',[PostController::class,'store'])->name('posts.store');Step 4: Create Controller
in this step, we write image upload code in this file, which will be uploaded to the “upload” folder in the public directory. we need to create PostController and add the following code to that file:
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
here, we need to create blade files for index and create. so let’s make 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>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 serveNow you can open the bellow URL on your browser:
localhost:8000/posts/createI hope it can help you...