People searching “Laravel image validation Vue” attach a file and get “the cover field is required” or a 500. The usual cause is a PUT request. PHP does not parse files on PUT. The file upload guide shows the form. This page is the rule.
TL;DR
- The image rule checks the upload.
- Send it as POST with a file field, including when you are updating.
- Do not point
axios.putat the same URL with aFormDatabody and expect the file to arrive. - Do not run
storage:linkon Laravel Cloud.
The fix#
$validated = $request->validate([
'cover' => ['required', 'image', 'max:2048'],
]);
$path = $validated['cover']->store('covers', 'public');image allows the types Laravel treats as images. max:2048 is kilobytes, so this is 2 MB. A Vue accept="image/*" is a hint to the file picker. It is not the check.
<Form action="/posts" method="post" v-slot="{ errors, processing }">
<input type="file" name="cover" />
<p v-if="errors.cover">{{ errors.cover }}</p>
<button type="submit" :disabled="processing">Upload</button>
</Form>To replace a cover on an existing post, keep method="post" and send _method as put. The Form component does that when the Wayfinder action is an update. Do not point axios.put at the same URL with a FormData body and expect the file to arrive.
What to avoid#
Gotcha
Do not run storage:link on Laravel Cloud. The deploy guide says the symlink does not survive there.
FAQ#
How do I validate an image upload in Laravel and Vue?
The image rule checks the upload. Send it as POST with a file field, including when you are updating.
What goes wrong with Laravel image validation Vue?
Many developers attach a file and get "the cover field is required" or a 500. Do not point axios.put at the same URL with a FormData body and expect the file to arrive.
