I want to integrate cropperjs into a laravel 10 livewire 2 project.
I followed a tutorial and everything works fine.
But I want to remove the controller and the POST route and integrate the code into a livewire component to obtain the same result.
My first view:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Crop Image Before Upload Using Cropper JS - CodingSeeker</title>
<meta name="_token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{{ asset('assets/cropper.css') }}">
<script src="{{ asset('assets/cropper.js') }}"></script>
@livewireStyles
</head>
<style type="text/css">
body {
background: #f6d352;
}
h2 {
font-weight: bold;
font-size: 20px;
}
img {
display: block;
max-width: 100%;
}
.preview {
text-align: center;
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid red;
}
input {
margin-top: 40px;
}
.section {
margin-top: 150px;
background: #fff;
padding: 50px 30px;
}
.modal-lg {
max-width: 1000px !important;
}
</style>
<body>
<livewire:cropimage />
@livewireScripts
</body>
</html>
The livewire component cropimage :
<div>
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2 section text-center">
<h2>Laravel 9 Crop Image Before Upload Using Cropper JS - CodingSeeker</h2>
<input type="file" name="image" class="image">
</div>
</div>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">How to crop image before upload image in laravel 9 CodingSeeker</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<div class="row">
<div class="col-md-8">
<img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
</div>
<div class="col-md-4">
<div class="preview"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="crop">Crop</button>
</div>
</div>
</div>
</div>
</div>
<script>
var $modal = $('#modal');
var image = document.getElementById('image');
var cropper;
$("body").on("change", ".image", function(e) {
var files = e.target.files;
var done = function(url) {
image.src = url;
$modal.modal('show');
};
var reader;
var file;
var url;
if (files && files.length > 0) {
file = files[0];
if (URL) {
done(URL.createObjectURL(file));
} else if (FileReader) {
reader = new FileReader();
reader.onload = function(e) {
done(reader.result);
};
reader.readAsDataURL(file);
}
}
});
$modal.on('shown.bs.modal', function() {
cropper = new Cropper(image, {
aspectRatio: 0,
viewMode: 3,
preview: '.preview'
});
}).on('hidden.bs.modal', function() {
cropper.destroy();
cropper = null;
});
$("#crop").click(function() {
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160,
});
canvas.toBlob(function(blob) {
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
$.ajax({
type: "POST",
dataType: "json",
url: "crop-image-upload-ajax",
data: {
'_token': $('meta[name="_token"]').attr('content'),
'image': base64data
},
success: function(data) {
console.log(data);
$modal.modal('hide');
alert("Crop image successfully uploaded");
}
});
}
});
});
</script>
my web.php
Route::get('/', function () { return view('crop-image-upload');});
Route::post('crop-image-upload-ajax', [CropImageController::class, 'cropImageUploadAjax']);
my controller
class CropImageController extends Controller
{
public function cropImageUploadAjax(Request $request)
{
$folderPath = public_path('upload/');
$image_parts = explode(";base64,", $request->image);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$imageName = uniqid() . '.png';
$imageFullPath = $folderPath . $imageName;
file_put_contents($imageFullPath, $image_base64);
$saveFile = new Image;
$saveFile->description = 'description';
$saveFile->name = $imageName;
$saveFile->save();
return response()->json(['success' => 'Crop Image Uploaded Successfully']);
}
}
I'm a beginner so it's difficult for me to do it without help...
I've done a lot of research on google, chatgpt and googlebard but nothing is conclusive.