Saving crop image with laravel - php

Question

I started learning laravel, and attempt to make a website with it. I'm trying implement "uploading a crop image". I'm using croppie https://foliotek.github.io/Croppie/ and manage to successfully displaying on the browser.
Now, I want to save the image to the database. I'm struggling at this stage, I've spent hours searching and trying but it doesn't seem to work. I've read that laravel doesn't use the patch method to send crop images as well as I need ajax. Can someone help me how I would get the base64 from the form. This is my form:
<form action="{{route('program.updateImage', ['id'=> $program->id])}}" method="post" enctype="multipart/form-data">
{{ method_field('PATCH') }}
{{ csrf_field() }}
<div id="crop" class="croppie-container">
</div>
<a class="upload-file">
<span>Upload</span>
<input type="file" name="image" id="upload"><br>
</a>
<br>
<input type="submit" name="submit" value="Save image">
</form>
This is my route:
Route::patch('program/image/{id}', 'ProgramController#updateImage')->name('program.update');
Code for croppie
$(function() {
var basic = $('#crop').croppie({
viewport: {
width: 400,
height: 200
},
boundary: { width: 400, height: 300 },
});
basic.croppie('bind', {
url: '{{asset('images/'.$program->image)}}'
});
});
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#crop').croppie('bind', {
url: e.target.result
});
}
reader.readAsDataURL(input.files[0]);
}
}
$('.upload-file input').on('change',function(){
readFile(this);
});
and my function:
public function updateImage(Request $request, $id){
//$this->validate($request, array('image' => 'mimes:jpeg,jpg,png'));
$program = Program::find($id);
//list($type, $data) = explode(';', $data);
//list(, $data) = explode(',', $data);
//$data = base64_decode($data);
echo $request;
}

Answer 1

Here jquery code for upload image
$('#crop_img_upload_button').on('click', function (e) {
var image_data = $('#crop').croppie('result', 'base64');
if (image_data != '') {
var formData = $('#crop_it_form').serialize();
$.ajax({
type: "POST",
url: "uploadUrl",
data: formData,
cache: false,
success: function (data)
{
//response here
}
});
} else {
// validation msg here
}
});
});

Answer 2

To get base64 of image use this :
var base64 = $('#crop').croppie('result', 'base64');