In this post we will see how to upload image in summernote editor. there are many editor available in laravel to save 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, so let's see how to implement summernote editor with image upload example.
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);
list(, $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>Image Upload in Summernote Editor Using Laravel - websolutionstuff.com</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>Image Upload in Summernote Editor Using Laravel-websolutionstuff.com</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>
In this tutorial we will see laravel 8 socialite login with github account. explains how to integrate OAuth github...
Oct-25-2021
In this example we will see how to encrypt and decrypt string in laravel 8 using crypt helper, As we all know laravel fr...
May-07-2021
In this article, we will see how to hide and show columns in datatable in jquery. This example shows how you can ma...
Jun-07-2022
Hey there! I recently faced the need to upgrade my PHP version from 7.4 to the latest 8.0 on my Ubuntu server. It might...
Nov-06-2023