data with file input not sent to the server

Hello,

I'm encountering an issue when using Inertia's form helper to submit forms that include file inputs, specifically for updating entries. When updating text fields, the data is successfully sent to the server and returned as expected. However, when a file input is changed and the form is submitted, the server receives an empty array instead of the updated data. This issue only occurs when the file input is modified. Text inputs update correctly without issue.

Here's the relevant frontend code:

const { data, setData, post, put, patch, errors, processing, clearErrors, reset } = useForm({
    // ...
})

const submit = () => {
    console.log(data);

    if (type == "create")
        return post(route("logs.store"), { onError: (e) => console.dir(e) })

    // I've tried both put and patch
    patch(route("logs.update", log?.id), {
        onError: (e) => console.dir(e)
    })
}

And the corresponding controller methods:

public function store(Request $request)
{
    return $request;
}

public function update(Request $request, DayLog $log)
{
    return $request;
}

The server response is as follows:

When images are not changed: [{ // data }] When images are changed: []

The console log of the data before the PUT method is:

Object { id: "9b66ee2d-2ad4-47bb-a365-55bd82514cde", date: "2024-02-14", work: "sfd", in: "04:34:00", out: "04:43:00", note: null, payment_method: null, expenses: [], images: FileList(1) }
{
...
id: "9b66ee2d-2ad4-47bb-a365-55bd82514cde"
images: FileList [ File ]
0: File { name: "icon-bg_2.jpg", lastModified: 1699343241488, size: 69276, … }
length: 1
<prototype>: FileListPrototype { item: item(), length: Getter, … }
...
}

Any assistance or insights into why this might be happening would be greatly appreciated

s4muel

2 years ago

Level 50

as from the official inertia documentation (https://inertiajs.com/file-uploads)

Multipart limitations Uploading files using a multipart/form-data request is not natively supported in some server-side frameworks when using the PUT,PATCH, or DELETE HTTP methods. The simplest workaround for this limitation is to simply upload files using a POST request instead.

However, some frameworks, such as Laravel and Rails, support form method spoofing, which allows you to upload the files using POST, but have the framework handle the request as a PUT or PATCH request. This is done by including a _method attribute in the data of your request.

import { router } from '@inertiajs/react'

router.post(`/users/${user.id}`, {
  _method: 'put',
  avatar: form.avatar,
})

Please or to participate in this conversation.