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: Setting up Multer In order for the server to process image data, Multer will need to be set up.
Before doing so, you will need a location to place these images.
If your Express project was created with Express Generator, then you may use the public folder's default images subfolder to store data; alternatively, you can create your own folder.
Once you've decided on a location for your images, create a new file in your Express folder and import Multer at the top.
This will be your configuration file.
Using Multer's method, create your storage variable to set up the destinations and file names.
Here is an example from one of my own projects: `const storage = multer.diskStorage({ destination: (req, file, cb) => { if(file.fieldname === 'profilepic') { cb(null, '../express-bookmark/public/profilepics'); } else if(file.fieldname === 'chatimage') { cb(null, '../express-bookmark/public/chatimages'); } else if(file.fieldname === 'groupimage') { cb(null, '../express-bookmark/public/groupimages'); } else if(file.fieldname === 'commentimage') { cb(null, '../express-bookmark/public/commentimages'); } else { cb(null, '../express-bookmark/public/postimages'); } }, filename: (req, file, cb) => { cb(null, ); } }); fieldname` property, as it is a crucial part of the uploading process.
More on that later.
Once storage has been set up, you'll need to create and export an upload function to place in the endpoint(s) that require file uploads.
Luckily, all you need to do is assign Multer to a variable and set your storage variable as a parameter of Multer, like so: Now that Multer's been configured, you need to call the upload function in the endpoint that takes file uploads.
Go to the file that contains the endpoint and import the upload function.
If you're uploading a single file to the server, then you must use upload's method, which takes a fieldname as a parameter.
It may look something like this: Alternatively, if you want the option to submit multiple files at once, you may use the method instead.
This takes the fieldname as the first parameter, and the maximum number of images allowed for the second.
Regardless of whether you keep your middleware functions in separate files — as I do — or write them with your routes, the function must be called immediately after your endpoint.
If you place the upload function anywhere else, then the function will not fire, and Multer will not process the file.
Setting up Cloudinary When uploading images to your database, it is important to consider the approach that you're going to use.
If you save your image's binary data, then you could risk overloading your computer's memory when the images are rendered due to the data's size.
This could cause freezes, or even crashes.
This one of the reasons why it's recommended to use third-party hosts to stor