In this article, we will see laravel 9 image upload in summernote editor. there are many editor available in laravel to save the rich text. here we will use summernote editor. summernote editor is a simple but customizable, powerful rich text editor for the web, here you can image upload in summernote editor using laravel 9.
So, let's see image upload in summernote editor using laravel 9, how to upload image in summernote editor in laravel 9, laravel 9 summernote editor with image upload.
Here, I have ceated one controller to upload image in summernote editor.
php artisan make:controller ImageUploadController
Now, copy below code in this location app/Http/Controllers/ImageUploadControler.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ImageUploadController extends Controller
{
public function image()
{
return view('summernote');
}
public function upload(Request $request)
{
$this->validate($request, [
'description' => 'required',
]);
$description=$request->input('description');
$dom = new \DomDocument();
$dom->loadHtml($description, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$images = $dom->getElementsByTagName('img');
foreach($images as $k => $img){
$data = $img->getAttribute('src');
list($type, $data) = explode(';', $data);
$data = base64_decode($data);
$image_name= "/upload/" . time().$k.'.png';
$path = public_path() . $image_name;
file_put_contents($path, $data);
$img->removeAttribute('src');
$img->setAttribute('src', $image_name);
}
$description = $dom->saveHTML();
}
}
Now, create blade file for view.
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Image Upload In Summernote Editor - Websolutionstuff</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet"
href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.js"></script>
</head>
<body>
<div class="row" style="margin-top: 50px;">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h4>Laravel 9 Image Upload In Summernote Editor - Websolutionstuff</h4>
</div>
<div class="panel-body">
<form method="POST" action="{{ route('image.upload') }}">
{{ csrf_field() }}
<div class="form-group">
<strong>Description:</strong>
<textarea class="form-control summernote" name="description">
</textarea>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote({
height: 200,
});
});
</script>
</body>
</html>
You might also like :
In this example we will see laravel 8 one to one relationship example also you can use one to one relationship in l...
Nov-01-2021
In this small post, we will solve the laravel 8 form class not found error, many time we have received errors like the l...
Mar-12-2021
In this article, we will see how to add a jquery datatable column filter dropdown on top. Here, we will learn how t...
Jan-19-2023
In this article, we will see laravel whereBetween query example. SQL provides many different types of methods or qu...
Jan-13-2021