Ошибка файла в Inertia

Допустим, человек приложил не картинку, а на экране не видно, что поле не приняли. Форма снова на месте, но непонятно, что нужно выбрать другой файл.

Проверку делает метод validate запроса. Для картинки подходит правило image. Сообщение поля лежит в слоте компонента Form, в объекте errors, по имени поля.

Давайте опишем приём поля с проверкой типа файла:

<?php
	use Illuminate\Http\Request;
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts/create', function () {
		return Inertia::render('Posts/Create');
	});

	Route::post('/posts', function (Request $request) {
		$request->validate([
			'photo' => 'required|image',
		]);

		return back();
	});
?>

Давайте выведем текст ошибки под полем файла:

<script setup>
	import { Form } from '@inertiajs/vue3'
</script>

<template>
	<Form action="/posts" method="post" #default="{ errors }">
		<input type="file" name="photo" />
		<div v-if="errors.photo">
			{{ errors.photo }}
		</div>
		<button type="submit">Save</button>
	</Form>
</template>

Сделайте так, чтобы если к работнику приложили не картинку, под полем было видно сообщение сервера.