FormData support

[danielroe]

Seems a good idea for using [object FormData] to append proper content-type (adding in short)

Originally posted by @pi0 in #36 (comment)

Other notes:

• validate formdata content or ensure we're not in browser environment to avoid setting header when sending files/blobs
• Content-Disposition header

[jshimkoski]

Very interested in gaining access to the Content-Disposition header. That is something we need for our project.

[IsraelOrtuno]

I did not know about Content-Disposition and also I don't really understand why I have to pass the formData variable to body and Content-Disposition header but this seems to work:

const formData = new FormData()

formData.append('avatar', avatar)
formData.append('model', model)
formData.append('id', id)

$fetch('/avatar', {
  method: 'POST',
  body: formData,
  headers: { 'Content-Disposition': formData }
})

[bernlorbis]

Still a bug in nuxt 3

[posva]

I think the problem comes from the content-length header. The error happens before sending the request:

  cause: RequestContentLengthMismatchError: Request body length does not match content-length header
      at AsyncWriter.write (node:internal/deps/undici/undici:10139:19)
      at writeIterable (node:internal/deps/undici/undici:10103:23) {
    code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'

Axios seems to be able to send the same exact request

[danielroe]

@posva We're seeing people encounter issues with undici - do you encounter the same issue if you downgrade y our node version?

[posva]

I get the same result with both node 18 and node 16 (latest patchs)

[maximlopin]

I did not know about Content-Disposition and also I don't really understand why I have to pass the formData variable to body and Content-Disposition header but this seems to work:

const formData = new FormData()

formData.append('avatar', avatar)
formData.append('model', model)
formData.append('id', id)

$fetch('/avatar', {
  method: 'POST',
  body: formData,
  headers: { 'Content-Disposition': formData }
})

when I set Content-Disposition to an arbitrary string, it works too

[TusharRoy23]

const formData = new FormData();
const keys = Object.keys(payload);
keys.forEach(key => {
        formData.append(key, payload[key]);
});
$fetch(`/data-imports/`,
      {
        method: 'POST',
        body: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
    )
      .then(res => {
        console.log(res);
      })
      .catch(error => {
        console.log(error);
      });

Can't send FormData. Any updates?
By the way, I am using it in the Nuxt-2-bridge as the default package.

[TusharRoy23]

const formData = new FormData();
const keys = Object.keys(payload);
keys.forEach(key => {
        formData.append(key, payload[key]);
});
$fetch(`/data-imports/`,
      {
        method: 'POST',
        body: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
    )
      .then(res => {
        console.log(res);
      })
      .catch(error => {
        console.log(error);
      });

Can't send FormData. Any updates? By the way, I am using it in the Nuxt-2-bridge as the default package.

The issue has been resolved after removing the Content-type from the request header and the browser will detect that automatically. And also check in the request header if the Accept: */* is like that or not.

[Hebilicious]

As mentioned by @TusharRoy23, when using formData, do not specify a 'Content-Type' header, as it will automatically be set by fetch.
@posva do you have a repro for this error 🙏🏽 ?

[posva]

I don't have one anymore but should be reproducible (if still there) when trying to send images, something like https://vueuse.org/core/useFileDialog/#usefiledialog.

[TusharRoy23]

@Hebilicious I don't have. But If you still having this issue then you have to forcefully remove the Content-type from the header.

[geminigeek]

any solution to this, having same issue ,

EDIT: my server had issue , its working fine

[Lukeharris30]

I am having this issue. I am not setting the content type, but I am setting auth headers.

It keeps sending the content-type as application/json

[sanyaches]

Meanwhile, Axios works great with this setup without any magic. Just create its instance in nuxt plugin

[tewshi]

I can confirm from the latest version:

• do not manually set content-type header, it will be detected and set (with extra things like boundary)
• no need to set content-disposition manually

[danielroe]

Excellent. If anyone is still experiencing this, please let me know and I'll happily reopen.

[belfortf]

Hi, using nuxt 3, this doesn't work for me:

const formData = new FormData();
Object.keys(fields).forEach((field) => {
        formData.append(field, fields[field]);
});

formData.append('file', new Blob([JSON.stringify(content)], { type: 'application/json' }));

//Investigate in the future why $fetch doesn't work!!!
const response = await $fetch(url, {
            method: 'POST',
            body: formData
 });

console.log('Response: ',response);

It also doesn't work if I don't specify { type: 'application/json' } for the file.

Any ideas what I should do? My workaround at the moment is to use fetch instead of $fetch.

[maximierung]

@belfortf assuming you mean that the form body is not being sent, both JSON and form bodies work fine for me. The content information headers should be set automatically too. Could you provide some code of how you handle the incoming request? Or if the error is something else maybe provide the error?