Upload Files and other input together with Inertia/Vue/Laravel

Imagine you have an edit page where you can specify name and an image:

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

const form = useForm({
  name: null,
  avatar: null,
})

function submit() {
  form.put('/users')
}
</script>

<template>
  <form @submit.prevent="submit">
    <input type="text" v-model="form.name" />
    <input type="file" @input="form.avatar = $event.target.files[0]" />
    <progress v-if="form.progress" :value="form.progress.percentage" max="100">
      {{ form.progress.percentage }}%
    </progress>
    <button type="submit">Submit</button>
  </form>
</template>

Note, we cant use `<input type=”file” v-model=”form.avatar” />` as Vue does not allow this for input with type file.

Whenever a file is present in the input, Inertija will convert the whole request to a FormRequest. Unfortunatly, Laravel does not support FormData request using PUT .

The effect is, that name would simply be not present, whenever a file is selected.

To fix this, you can add form method spoofing to the form object like this:

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

const form = useForm({
  name: null,
  avatar: null,
  _method: 'PUT'
})

function submit() {
  form.put('/users')
}
</script>

<template>
  <form @submit.prevent="submit">
    <input type="text" v-model="form.name" />
    <input type="file" @input="form.avatar = $event.target.files[0]" />
    <progress v-if="form.progress" :value="form.progress.percentage" max="100">
      {{ form.progress.percentage }}%
    </progress>
    <button type="submit">Submit</button>
  </form>
</template>

Although Inertia.js sends this out sometimes as a FormData or as a regular request, its always accessible like this on the Illuminati/Http/Request:

$request->input('name');
$request->file('avatar');

Hope it helps :)