Having recently delved into the world of Ajax, I've encountered some issues. Allow me to do my best in explaining the problem at hand.
- Currently, I'm engaged in a Laravel 8 project.
- In this project, users are given the choice to select an image, with CropperJS handling this functionality.
- Everything functions smoothly until I try separating the JavaScript and Ajax codes into distinct files, at which point I encounter an error message stating: "The POST method is not supported for this route. Supported methods: GET, HEAD, PATCH." How can I ensure that the Ajax call works seamlessly in separate files?
Routes
Route::get('/image/create', 'ProfileImage\CreateController@create')->name('image.create');
Route::post('/image/store', 'ProfileImage\StoreController@store')->name('image.store');
Controller
public function create()
{
return view('pages.image.create');
}
public function store(StoreProfileImageRequest $request, ProfileImage $profileImage)
{
$profileId = auth()->user()->profile->id;
$validated = $request->validated();
$image = $validated['image_name'];
$this->profileImageRepositoryInterface->storeImage($profileImage, $profileId, $image, $validated);
session()->flash('success', 'Uw afbeelding is succesvol opgeslagen.');
return response()->json(
[
'status' => 'success',
'message' => 'my message.',
'url' => route('profile.index')
]);
}
Form
<form class="text-left"
data-form-output="form-output-global"
data-form-type="contact"
method="post"
enctype="multipart/form-data"
>
@csrf
<div class="member-block-body">
<label for="upload_image">
</label>
<input type="file" name="image_name" class="image" id="upload_image">
</div>
<span class="invalid-feedback ct_invalid_feedback" role="alert"gt;
<strong id="ajax_image_error"></strong>
</span>
</form>
Modal
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalImageCropper" aria-hidden="true">
<div class="modal-dialog ct_modal_lg modal-dialog-centered" role="document"gt;
<div class="modal-content"gt;
<div class="modal-header"gt;
<h5 class="modal-title"gt;
@lang('Afbeelding aanpassen voordat u deze uploadt.')
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"gt;
<span aria-hidden="true">
x
</span>
</button>
</div>
<div class="modal-body"gt;
<div class="ct_img_container"gt;
<div class="row"gt;
<div class="col-md-8"gt;
<img src="" id="sample_image" alt="">
</div>
<div class="col-md-4"gt;
<div class="ct_cropper_image_preview"gt;</div>
</div>
</div>
</div>
</div>
<div class="modal-footer"gt;
<button type="button" id="crop-image" class="btn btn-primary"gt;
@lang('Opslaan')
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal"gt;
@lang('Annuleren")
</button"gt;
</div"gt;
</div"gt;
</div"gt;
</div"gt;
Javascript custom_function.js
$(document).ready(function () {
let $modal = $('#modal');
let image = document.getElementById('sample_image');
let cropper;
$('#upload_image').change(function (event) {
let files = event.target.files;
let done = function (url) {
image.src = url;
$modal.modal('show');
};
if (files && files.length > 0) {
reader = new FileReader();
reader.onload = function (event) {
done(reader.result);
};
reader.readAsDataURL(files[0]);
}
});
$modal.on('shown.bs.modal', function () {
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 3,
preview: '.ct_cropper_image_preview'
});
}).on('hidden.bs.modal', function () {
cropper.destroy();
cropper = null;
});
$('#crop-image').click(function () {
$('#ajax_image_error').text('');
canvas = cropper.getCroppedCanvas({
width: 600,
height: 600
});
canvas.toBlob(function (blob) {
url = URL.createObjectURL(blob);
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
let base64data = reader.result;
$.ajax({
url: '{{ route("image.store") }}',
method: 'POST',
data: {
'_token': '{{ csrf_token() }}',
image_name: base64data
},
success: function (data) {
if (data.status === 'success') {
window.location = data.url;
$modal.modal('hide');
$('#image-preview').attr('src', base64data);
}
},
error: function (data) {
if (data.status === 422) {
let response = $.parseJSON(data.responseText);
$.each(response.errors, function (key, val) {
$('#' + 'ajax_' + key + '_error').text(val[0]);
});
}
}
});
};
});
});
});