Inertia: Assigning a blob to a form does not convert it to FormData

[mattkingshott]

Versions:

• @inertiajs/inertia version: 0.8.4
• @inertiajs/inertia-vue3 version: 0.3.5

Describe the problem:

When assigning a Blob to a form created with useForm, the form's payload is not converted to a FormData object prior to submission. Hence, the uploaded file is never sent.

Steps to reproduce:

form : useForm({
    avatar : Blob,
}),

[reinink]

Hmm, interesting. So this isn't an issue with the form helper, but rather the hasFiles and objectToFormData methods.

Thanks for reporting, we'll have to get this fixed. 👍

[mattkingshott]

Thanks @reinink!

[reinink]

Matt, can you show me an example of your form? I'm trying to test this by manually creating a blob, but Vue is turning it into an Observer, which is making it hard/impossible to check if it's a file (blob):

file: new Blob(['<h1>My title</h1>'], { type: 'text/xml'}),

Also, I'm not sure it will help, but you may want to try and set the forceFormData option to true on your form:

this.form.post('/login', { forceFormData: true })

That will force Inertia to submit the data as FormData. However, I'm still not sure that it will be converted properly, as we don't check for blobs in the objectToFormData method.

[mattkingshott]

Hi Jonathan,

Sorry for not being able to get back sooner. It seems like you've since added a PR to fix this, but in case it is still relevant...

Within a method, I assign a Blob to a form property via a canvas e.g.

canvas.toBlob(blob => this.form.avatar = blob, 'image/jpeg');

Using Vue DevTools, this then appears as a Blob for the property.

Hope his helps (if it is still relevant)

[reinink]

Understood! The change in #515 totally fixes this. Just tried it out myself in Ping CRM. 👍

[reinink]

Published: https://github.com/inertiajs/inertia/releases/tag/v0.8.5

[mattkingshott]

Great!!