I have been facing issues while trying to upload photos in Laravel using jQuery AJAX. I keep encountering an error message:
The photo must meet the following criteria: - The photo must be an image. - The photo must be a file of type: jpeg, png, jpg, gif, SVG.
I am perplexed as to why this is happening. What could possibly be wrong with my code below?
Controller Section
I have used the code snippet below to handle the photo uploading process, but it seems to be causing errors multiple times:
$validator = \Validator::make($request->all(), [
'photo' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
if ($files = $request->file('image')) {
//---Insert new file
$destinationPath = 'public/product_images/'; // upload path
$image_path = date('YmdHis') . "." . $files->getClientOriginalExtension();
$files->move($destinationPath, $image_path);
}
$productId = DB::table('products')->insertGetId([
'product_photo' => $image_path
]);
View Section
In the view section, the following code is used to implement the functionality for uploading the photo:
$("#photo").fileinput({
theme: 'fa',
uploadUrl: '{{ route('products.store') }}',
uploadExtraData: function() {
return {
_token: $("input[name='_token']").val(),
};
},
allowedFileExtensions: ['jpg', 'png', 'gif'],
overwriteInitial: false,
maxFileSize: 2000,
maxFilesNum: 5,
slugCallback: function(filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
$('#saveBtnForCreate').click(function(e) {
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "{{ route('products.store') }}",
method: 'post',
enctype: 'multipart/form-data',
cache: false,
dataType: 'JSON',
data: {
photo: $('#photo').val()
},
success: function(result) {
if (result.errors) {
$('.alert-danger').html('An error has occurred in your input!');
$.each(result.errors, function(key, value) {
$('.alert-danger').show();
$('.alert-danger').append('<strong><li>' + value + '</li></strong>');
});
}
}
});
});