Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I'm facing an issue with my Laravel Inertia.js code when trying to update my posts. During the update process, when I upload a new image, I receive validation errors for the 'title' and 'content' fields even though they are filled out. However, if I update without uploading an image, everything works fine.
<form @submit.prevent="submitForm" class="grid grid-cols-1 gap-x-6 gap-y-8 md:grid-cols-6 md:col-span-2">
<div class="col-span-full">
<div>
<div class="mt-1 rounded-md shadow-sm">
<label for="title" class="block text-sm font-medium leading-6 text-white">Título</label>
<input v-model="form.title" id="title" type="text" name="title" placeholder="Informe o título da categoria" class="mt-1 block w-full transition duration-150 ease-in-out border border-gray-700 placeholder-gray-400 text-gray-200 font-medium rounded-md bg-gray-900 shadow-sm focus:outline-none focus:border-blue-500 sm:text-sm sm:leading-5" />
</div>
<div class="mt-6 rounded-md shadow-sm">
<label for="title" class="block text-sm font-medium leading-6 text-white">Subtítulo</label>
<input v-model="form.subtitle" id="title" type="text" name="title" placeholder="Informe o subtítulo da categoria (opcional)" class="mt-1 block w-full transition duration-150 ease-in-out border border-gray-700 placeholder-gray-400 text-gray-200 font-medium rounded-md bg-gray-900 shadow-sm focus:outline-none focus:border-blue-500 sm:text-sm sm:leading-5" />
</div>
<div class="mt-6 rounded-md shadow-sm">
<label for="title" class="block text-sm font-medium leading-6 text-white">Categoria</label>
<select v-model="form.category_id" id="hs-hidden-select" class="mt-1 font-semibold py-3 px-4 pe-9 block w-56 bg-gray-900 border-gray-800 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600">
<option class="text-white" value="" selected>Selecione uma categoria</option>
<option class="font-semibold text-white" v-for="category in categories" :value="category.id" :key="category.id">
{{ category.title }}
</option>
</select>
</div>
<div class="mt-6 rounded-md shadow-sm">
<label for="title" class="block text-sm font-medium leading-6 text-white">Imagem selecionada</label>
<img :src="props.posts.image_url" alt="Imagem pré-definida" class="mt-2 w-32 h-32">
<label for="image" class="mt-6 block text-sm font-medium leading-6 text-white">Escolha uma nova imagem</label>
<input
type="file"
@input="form.image = $event.target.files[0]"
id="image"
class="mt-1 block w-full border border-gray-200 shadow-sm rounded-lg text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 file:border-0 file:py-2 file:px-4 dark:file:bg-gray-700 dark:file:text-gray-400">
</div>
<div class="mt-6 rounded-md shadow-sm">
<quill-editor
v-model:content="form.content"
content-type="html"
:toolbar="toolbarOptions"
:placeholder="'Escreva o conteúdo da sua postagem'"
theme="snow">
</quill-editor>
</div>
<div class="flex items-center justify-end gap-x-6">
<button type="submit" class="mt-7 rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Salvar publicação</button>
</div>
</div>
</div>
</form>
const form = useForm({ title: props.posts.title, subtitle: props.posts.subtitle, category_id: props.posts.category_id, content: props.posts.content, image: props.posts.image, });
function submitForm() { if(props.posts?.id) { form.put(route('admin.blog.posts.update', props.posts.id), { onError: (error) => { $toast.error(error.title || error.content || error.category_id || error.image, { position: 'bottom', duration: 5000, }) }, }) } }
Please or to participate in this conversation.