Introduction

When a beginner developer first works with APIs, they tend to focus only on retrieving data or sending text to the server. As they become more comfortable and make more complex requests, they may come across one that requires a particularly annoying content type: multipart/form-data. Multipart/form-data is a type of request content that accepts both file and text data, hence "multipart." While it sounds simple enough, it's not uncommon for developers to receive unexpected errors. In this tutorial, I'm going to show how to properly send multipart/form-data content using JavaScript, with the ExpressJS framework handling the backend.

Prerequisites

This tutorial assumes that you already have an existing project using Express. In order to properly handle images sent to the server, you will need an image processing library. The standard library for this purpose is Multer, which is what will be used for this tutorial. We'll also need to send the data to an image hosting site. One of the more popular options is Cloudinary, which this tutorial will be using. If you haven't done so, download them to your Express folder. You can do so with the following command:

npm install multer cloudinary