How to POST with multipart form data using fetch and JavaScript?

Sometimes, we want to POST with multipart form data using fetch and JavaScript.

In this article, we’ll look at how to POST with multipart form data using fetch and JavaScript.

How to POST with multipart form data using fetch and JavaScript?

To POST with multipart form data using fetch and JavaScript, we can send a FormData object as its body.

For instance, we write

const sendData = async (url, data) => {
  const formData = new FormData();

  for (const [key, value] of Object.entries(data)) {
    formData.append(key, value);
  }

  const response = await fetch(url, {
    method: "POST",
    body: formData,
  });

  // ...
};

to create the senData function.

In it, we create a FormData object.

And then we use the for-of loop with Object.entries to loop through the keys and values of each property in data and add them to the formData object with append.

Then we call fetch to make a post request to the url with body set to formData.

Conclusion

To POST with multipart form data using fetch and JavaScript, we can send a FormData object as its body.