Laravel Convert base64 and save with php form - php

Question

I am using the Croppie script to edit images before uploading to my server.
https://foliotek.github.io/Croppie/
The problem is Croppie encodes the cropped image in a base64 format. I have created a hidden input and attached the base64 string. I need to know how to grab the string so i can decode it and post it with my form.
I have tried so many methods but i am stuck. Any help will be appreciated
Controller
$post = new Post;
$post->post_category_id = $request->post_category_id;
$post->title = $request->title;
$post->body = $request->body;
$post->meta_description = $request->meta_description;
$post->slug = $request->slug;
$post->user_id = auth()->id();
$image = $request->input('featimage'); // image base64 encoded
preg_match("/data:image\/(.*?);/",$image,$image_extension); // extract the image extension
$image = preg_replace('/data:image\/(.*?);base64,/','',$image); // remove the type part
$image = str_replace(' ', '+', $image);
$imageName = 'image_' . time() . '.' . $image_extension[1]; //generating unique file name;
\Storage::disk('public')->put($imageName,base64_decode($image)
$post->save();
}
View
<form class="form-horizontal" action="{{route('posts.store')}}" method="POST" enctype="multipart/form-data">
{{ csrf_field() }}
<fieldset>
<div class="form-group row"><label class="col-md-2 col-form-label">Title</label>
<div class="col-md-10"><input class="form-control" name="title" type="text"><span class="form-text">Please insert a title <small>eg. Exciting new event coming to London</small>
</span></div>
</div>
</fieldset>
<fieldset class="">
<div class="form-group row"><label class="col-md-2 col-form-label">Category</label>
<div class="col-md-10"><select name="post_category_id" class="custom-select custom-select-sm">
#foreach($postCategories as $postCategory)
<option value="{{ $postCategory->id }}">{{ $postCategory->name }}</option>
#endforeach
</select></div>
</div>
</fieldset>
<fieldset>
<div class="form-group row"><label class="col-md-2 col-form-label">Post Body</label>
<div class="col-md-10">
<textarea type="textarea" class="form-control" rows="10" name="body"></textarea>
</div>
</div>
</fieldset>
<fieldset>
<div class="form-group row"><label class="col-md-2 col-form-label">Meta Description</label>
<div class="col-md-10">
<textarea type="textarea" class="form-control" rows="4" name="meta_description"></textarea>
</div>
</div>
</fieldset>
<fieldset>
<select name="tags[]" multiple="multiple" class="form-control select2-multi">
#foreach($tags as $tag)
<option value="{{ $tag->id }}">{{ $tag->name }}</option>
#endforeach
</select>
</fieldset>
</div>
</div><!-- END card-->
</div>
<div class="col-md-4">
<div class="card card-default">
<div class="card-header">Featured Image</div>
<div class="card-body">
<fieldset>
<figure>
<img src="" class="gambar img-responsive img-thumbnail" id="item-img-output" /></figure>
<input type="hidden" id="featimage" name="featimage">
</fieldset>
<input type="file" class="item-img file center-block" name="upload"/>
</label>
</div>
<div>
</div>
<!-- START card-->
<div class="card card-default">
<div class="card-header">Slug</div>
<div class="card-body">
<div class="input-group mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">www.sixmedia.co.uk/</span></div><input class="form-control" name="slug" type="text" placeholder="slug" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
</div><!-- END card-->
<!-- START card-->
<div class="card card-default">
<div class="card-header">Featured</div>
<div class="card-body">
<div class="col-md-12">
<fieldset>
<div class="form-group row">
#foreach($featured as $feat)
<div class="checkbox c-checkbox"><label><input name="featured[]" type="checkbox" value="{{$feat->id}}"><span class="fa fa-check"></span>{{ $feat->name }} </label></div>
#endforeach
</div>
</fieldset>
</div>
</div>
</div><!-- END card-->
<button class="btn btn-primary btn-block" name="submit">Save</button>
<button class="btn btn-danger btn-block" name="submit">Cancel</button>
</form>
JS
<script type="text/javascript">
$(".gambar").attr("src", "http://www.pngall.com/wp-content/uploads/2/Upload-PNG-Image-File.png");
var $uploadCrop,
tempFilename,
rawImg,
imageId;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.upload-demo').addClass('ready');
$('#cropImagePop').modal('show');
rawImg = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
else {
swal("Sorry - you're browser doesn't support the FileReader API");
}
}
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 500,
height: 281,
},
enforceBoundary: false,
enableExif: true
});
$('#cropImagePop').on('shown.bs.modal', function(){
// alert('Shown pop');
$uploadCrop.croppie('bind', {
url: rawImg
}).then(function(){
console.log('jQuery bind complete');
});
});
$('.item-img').on('change', function () { imageId = $(this).data('id'); tempFilename = $(this).val();
$('#cancelCropBtn').data('id', imageId); readFile(this); });
$('#cropImageBtn').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'base64',
format: 'png',
size: {width: 350, height: 200}
}).then(function (resp) {
$('#item-img-output').attr('src', resp);
$('#featimage').attr('src', resp);
$('#cropImagePop').modal('hide');
});
});
// End upload preview image
</script>

Answer 1

The problem seems to be in your jquery script, you are setting the base64 string as the source of <input type="hidden" id="featimage">
change this:
$('#featimage').attr('src', resp);
to this
`$('#featimage').val(resp);`