[TypeScript] Can't be used as fetch body

MDN example of fetch() with FormData:

const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');

formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);

fetch('https://example.com/profile/avatar', {
  method: 'PUT',
  body: formData
})
.then(response => response.json())
.then(result => {
  console.log('Success:', result);
})
.catch(error => {
  console.error('Error:', error);
});

I imported form-data so that I could test it with jest:

import FormData from 'form-data'

const formData = new FormData();
formData.append('name', 'abc123');

fetch('https://example.com/profile/avatar', {
  method: 'PUT',
  body: formData
})
.then(response => response.json())
.then(result => {
  console.log('Success:', result);
})
.catch(error => {
  console.error('Error:', error);
});

Now it fails with:

Type 'FormData' is not assignable to type 'BodyInit | null | undefined'.
  Type 'FormData' is missing the following properties from type 'URLSearchParams': delete, get, getAll, has, and 3 more.ts(2322)

[aprilmintacpineda]

I’m getting the same typescript error too, I opted not to use this library and just use URLSearchParams.

import 'cross-fetch/polyfill';

async function main() {
  const formData = new URLSearchParams();
  formData.append('value1', 'test');

  const response = await fetch(
    process.env.targetEndpoint,
    {
      method: 'post',
      body: formData
    }
  );

  console.log(response);
}

main();

Since they do the same thing.

[XenoBino]

Since they do the same thing.

@aprilmintacpineda No they don’t do the same thing. URLSearchParams will encode it as application/x-www-form-urlencoded where this library will encode it as multipart/form-data. You can’t upload files with application/x-www-form-urlencoded but with multipart/form-data you can. If you want to upload binary data, use multipart/form-data.