[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)

Issue Analytics

State:
Created 2 years ago
Reactions:7
Comments:8

Top GitHub Comments

2reactions

aprilmintacpinedacommented, Mar 16, 2022

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.

1reaction

XenoBinocommented, Apr 28, 2022

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.

Top Results From Across the Web

Using fetch with TypeScript - Kent C. Dodds

In EpicReact.dev workshops, when I'm teaching how to make HTTP requests, I use the GraphQL Pokemon API. Here's how we make that request:...

How to Use fetch with TypeScript -- newline - Fullstack.io

The main problem with fetch function is that it isn't a generic function. This makes it harder to type response data without writing...

promise - How to use fetch in TypeScript - Stack Overflow

fetch in Typescript, but I cannot cast the response directly to my custom type: I am hacking my way around this by casting...

TypeError: cannot use 'in' operator to search for 'x' in 'y'

Make sure the object you are inspecting isn't actually null or undefined . const foo = null; "bar" ...

The starting point for learning TypeScript

Get Started. Quick introductions based on your background ... JavaScript. How to use TypeScript-powered JavaScript tooling. JS Projects Utilizing TypeScript ...