Stop Laravel 9 from redirecting if AJAX validation fails - ajax

Question

I have a Laravel 9 application and I am using Vue 3 and Filepond to create an image uploader experience.
<template>
<file-pond
max-files="1"
name="images"
server="/api/images"
accepted-file-types="image/jpeg, image/png, image/gif, image/webp"
:files="file"
/>
</template>
<script setup>
import vueFilePond from 'vue-filepond'
import 'filepond/dist/filepond.min.css'
const file = ''
</script>
It is very straightforward, it's basically sending the uploaded file to the server at the API endpoint to '/api/images' which is the API endpoint of my Laravel application and it works as expected.
However when I try to validate the request in the Laravel controller, I always get a 302 redirect reponse back in my Vue 3 application. This is how my validator looks like:
public function upload(Request $request)
{
$request->validate(
[
'image' => 'required|image|dimensions:min_width=1,max_height=1|max:4000',
]
);
if ($request->fails())
{
dd('Request failed. App should stop here.');
}
}
I deliberately set the "max_height" to 1 so the validatior fails, for testing. However the app doesn't go to "Request failed.." it just simply redirects (302) the user instead of returning the errors.
I am assuming that Laravel doesn't recognize this as an AJAX request for some reason. Because these request validations always work perfect if I do a simple Vue Axios form submit. I always get the errors in JSON format. But here it's not the case.
I have tried doing this and it was successfully giving me the "Validation fails message":
$validator = Validator::make($request->all(),
[
'image' => 'required|image|dimensions:min_width=1,min_height=1|max:4000',
]);
if ($validator->fails())
{
dd('Validator fails.');
}
However I would want to use a Form Request validation here (so I can put the contents of the validation logic into it's spearate file.)
What I want is: when the image validation fails -> Laravel should return a JSON response with all the errors. Just like when a form validation fails.
What am I missing though? Why isn't it working like it's supposed to in the first situation?

Answer 1

You are mostly just missing the header accept = application/json
That header is the only real difference between an ajax call and a normal request regardless of the route containing "api" or not.
Since the request expects a json response, the exception handler will not send a redirection, it will instead return a json of the error. albeit a validation exception error response or any exception error.