With multer, you can upload single or multiple files in addition to text inputs to webpages using Node.js.

Multer makes the otherwise painstaking process of uploading files in Node much easier. In this article, we’ll learn the purpose of Multer in handling files in submitted forms. We will also build a mini-app with a frontend and backend to test uploading a file.

Managing user inputs

Web applications receive all different types of input from users, including text, graphical controls (like checkboxes or radio buttons), and files such as images, videos, and other media. Each of these inputs on forms are submitted to a server that processes the inputs, uses the inputs in some way (perhaps saving it somewhere else), and gives the frontend a “success” or “failed” response.

When submitting forms that contain text inputs, the server (in our case, Node) has less work to do. Using Express, you can seamlessly grab all the entered inputs in the req.body object. For files, however, it’s a bit more complex. Files require more processing, which is where Multer comes in.

Encoding and uploading forms

All forms include an enctype attribute which specifies how data should be encoded by the browser before sending to the server. The default value is application/x-www-form-urlencoded, which supports alphanumeric data. The other encoding type is multipart/form-data, which involves uploading files through forms.

Here are two ways to upload forms with multipart/form-data encoding. The first is by using the enctype attribute:

<form action='/upload_files' enctype='multipart/form-data'>
...
</form>

This sends the form-data to the /upload_files path of your application.

The second is by using the FormData API. The FormData API allows us to build a multipart/form-data form with key-value pairs that can be sent to the server. Here’s how it’s used:

const form = new FormData()
form.append('name', "Dillion")
form.append('image', <a file>)

On sending such forms, it becomes the server’s responsibility to correctly parse the form and execute the final operation on the data.

Multer: an overview

Multer is a middleware designed to handle multipart/form-data in forms. It is similar to the popular Node.js body-parser middleware for form submissions, but differs in that it supports multipart data.

Multer only processes multipart/form-data forms. It does the work of body-parser by attaching the values of text fields in the req.body object and also creates a new object req.file or req.files (for multiple files) which holds information about those files. From the file object, you can pick whatever information is required to post the file to a media management API like Cloudinary.

Now that we understand the importance of Multer, we will build a small app that shows how a frontend app sends three different files at once in a form, and how Multer is able to process the files on the backend to make them available for further use.

Building an app with Multer support

We will start by building the frontend using vanilla HTML, CSS and JS. Of course, you can easily use any framework to do the same.

#node #nodejs #javascript #web-development