Laravel Crop Image Before Upload - php

Question

I'm new to Jquery. I'm building a project with Laravel 7.28. I want users to crop an image before upload. I've searched on the net but all examples upload the image right after cropping. But I want the user to crop but not upload. I want users to upload the cropped image with input fields. Here is my form and script code:
#section('content')
<div class="row">
<div class="col-lg-12 col-12">
<!-- Basic Forms -->
<div class="box">
<div class="box-header with-border">
<h4 class="box-title">Quick Offer Creation</h4>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="card-text">
#if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
</div>
{!! Form::open(['route'=>['quick_offer.store'], 'method' => 'POST', 'class'=> 'form', 'files' => true ]) !!}
<div class="row">
<div class="col-6">
<div class="form-group row col-md-12">
<label for="project_id" class="col-sm-2 col-form-label">Project</label>
<div class="col-sm-10">
<select name="project_id" id="" class="form-control select2">
<option value="">Please Select</option>
#foreach($projects as $project)
<option
value="{{ $project->id }}" {{ old('project_id') == $project->id ? 'selected' : '' }}>{{ $project->code . ', ' . $project->title}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group row col-md-12">
<label for="bedroom" class="col-sm-2 col-form-label">Bedroom</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="bedroom" name="bedroom"
value="{{ old('bedroom') }}" min="1">
</div>
</div>
<div class="form-group row col-md-12">
<label for="location" class="col-sm-2 col-form-label">Location</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="location" name="location"
value="{{ old('location') }}">
</div>
</div>
<div class="form-group row col-md-12">
<label for="status" class="col-sm-2 col-md-2 col-form-label">Status</label>
<div class="col-sm-10 col-md-10">
<select name="status" id="" class="form-control">
<option value="">Please Select</option>
<option value="publish" {{ old('status') == 'publish' ? 'selected' : '' }}>
Publish
</option>
<option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>
Draft
</option>
<option value="review" {{ old('status') == 'review' ? 'selected' : '' }}>
Review
</option>
<option value="unpublish" {{ old('status') == 'unpublish' ? 'selected' : '' }}>
Unpublish
</option>
</select>
</div>
</div>
<div class="form-group row col-md-12">
<label for="photo" class="col-sm-2 col-form-label">
Image
<br>
<small>The photo must be square</small>
</label>
<div class="col-sm-10">
<input type="file" name="photo" class="image form-control" value="{{ old('photo') }}">
</div>
</div>
</div>
<div class="col-6">
<div class="form-group row col-md-12">
<label for="currency" class="col-sm-2 col-md-2 col-form-label">Currency</label>
<div class="col-sm-10 col-md-10">
<select name="currency" id="" class="form-control">
<option value="">Please Select</option>
<option value="TRY" {{ old('currency') == 'TRY' ? 'selected' : '' }}>
(₺) Turkish Lira
</option>
<option value="EUR" {{ old('currency') == 'EUR' ? 'selected' : '' }}>
(€) Euro
</option>
<option value="USD" {{ old('currency') == 'USD' ? 'selected' : '' }}>
($) American Dollar
</option>
<option value="GBP" {{ old('currency') == 'GBP' ? 'selected' : '' }}>
(£) GBP
</option>
</select>
</div>
</div>
<div class="form-group row col-md-12">
<label for="price" class="col-sm-2 col-form-label">Normal Price</label>
<div class="col-sm-10">
<input class="form-control" type="number" id="price" name="price"
min="0" value="{{ old('price') }}">
</div>
</div>
<div class="form-group row col-md-12">
<label for="discounted_price" class="col-sm-2 col-form-label">Discounted Price</label>
<div class="col-sm-10">
<input class="form-control" type="number" id="discounted_price"
name="discounted_price"
min="0" value="{{ old('discounted_price') }}">
</div>
</div>
<div class="form-group row col-md-12">
<label for="button_link" class="col-sm-2 col-form-label">Call to Action Link</label>
<div class="col-sm-10">
<input class="form-control" type="url" id="button_link" name="button_link"
value="{{ old('button_link') }}">
</div>
</div>
<div class="form-group row col-md-12">
<label for="company" class="col-sm-2 col-md-2 col-form-label">Company</label>
<div class="col-sm-10 col-md-10">
<select name="company" id="" class="form-control">
<option value="">Please Select</option>
<option
value="londonist_investments" {{ old('company') == 'londonist_investments' ? 'selected' : '' }}>
Londonist Investments
</option>
<option value="turyap_uk" {{ old('company') == 'turyap_uk' ? 'selected' : '' }}>
Turyap UK
</option>
</select>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row col-md-12">
<label for="key_points" class="col-md-2 col-form-label">Key Points</label>
<div class="col-md-12">
<textarea class="textarea" placeholder="One to each line"
name="key_points" id="key_points"
style="width: 100%; min-height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">{{ old('key_points')}}</textarea>
</div>
</div>
</div>
<div class="col-12">
<div class="form-actions">
<button type="submit" class="btn btn-danger btn-lg">
<i class="fa fa-check-square-o"></i> Save
</button>
</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">Laravel Cropper Js - Crop Image Before
Upload - Tutsmake.com</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-secondary" data-dismiss="modal">Cancel
</button>
<button type="button" class="btn btn-primary" id="crop">Crop</button>
</div>
</div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
{!! Form::close() !!}
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
#endsection
#section('js')
<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: 1,
viewMode: 3,
preview: '.preview'
});
}).on('hidden.bs.modal', function () {
cropper.destroy();
cropper = null;
});
$("#crop").click(function(){
canvas = cropper.getCroppedCanvas({
width: 800,
height: 800,
});
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",
data: {'_token': $('meta[name="_token"]').attr('content'), 'image': base64data},
success: function(data){
console.log(data);
$modal.modal('hide');
alert("Crop image successfully uploaded");
}
});
}
});
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
How can I do that?

Answer 1

Better to do resizing in controller, using intervention/image
Package Link
Tutorial Link
Hope this will be useful.