Laravel + Inertia + precognition ファイルデータを含んだリクエストをPUTやPATCHで送ると、Laravel側でデータが取得できない問題を解決

どんな現象か

laravel-precognition-vue-inertiaのuseFormを使って、ファイルデータを含めたリクエストをputやpatchメソッドで送ると、Laravel側でリクエストデータが取得できません。

コードは下記のような感じです。（この記事では、フロントエンドをVue.jsで書いています）

<script setup>
import { useForm } from 'laravel-precognition-vue-inertia'
const id = 1
const form = useForm(
    'put', // putメソッドを設定
    `/users/${id}`,
    {
        name: '',
        thumbnailFile: null // ファイルを格納する
    }
)

const submit = () => {
    form.submit({
        preserveScroll: true,
    })
}
</script>

<template>
    <form @submit.prevent="submit">
        <label>Name</label>
        <input v-model="form.name" />
        <label>File</label>
        <input @input="form.thumbnailFile = $event.target.files[0]" type="file" />
        <button :disabled="form.processing">更新</button>
    </form>
</template>

LaravelのWeb.phpでデバックすると、うまく取得できていないことが確認できます。

Route::put('/users/{id}', function(Request $request) {
  dd($request->all(), $request->file('thumbnailFile'));
});

解決方法

useFormのメソッドをpostに設定して、リクエストに_method: 'PUT'を含めるだけでリクエストデータが取得できるようになります。

<script setup>
import { useForm } from 'laravel-precognition-vue-inertia'
const id = 1
const form = useForm(
    'post', // postに変更
    `/users/${id}`,
    {
        _method: 'PUT', // リクエストデータに含める
        name: '',
        thumbnailFile: null
    }
)

const submit = () => {
    form.submit({
        preserveScroll: true,
    })
}
</script>

<template>
    <form @submit.prevent="submit">
        <label>Name</label>
        <input v-model="form.name" />
        <label>File</label>
        <input @input="form.thumbnailFile = $event.target.files[0]" type="file" />
        <button :disabled="form.processing">更新</button>
    </form>
</template>

リクエストデータが取得できます。

原因

PUTやPATCHを使ってファイルアップロードすることを、Laravelがサポートしていないため発生するようです。

気になる方は以下のページを確認してみてください。