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. Click here to see the full demo with network requests From the file object, you can pick whatever information is required to post the file to a media management API like Cloudinary. 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. Multer only processes multipart/form-data forms. It is similar to the popular Node.js body-parser middleware for form submissions, but differs in that it supports multipart data. Multer is a middleware designed to handle multipart/form-data in forms. On sending such forms, it becomes the server’s responsibility to correctly parse the form and execute the final operation on the data. Here’s how it’s used: const form = new FormData() The FormData API allows us to build a multipart/form-data form with key-value pairs that can be sent to the server. This sends the form-data to the /upload_files path of your application. The first is by using the enctype attribute: The default value is application/x-Here are two ways to upload forms with multipart/form-data encoding. Encoding and uploading formsĪll forms include an enctype attribute which specifies how data should be encoded by the browser before sending to the server. Files require more processing, which is where Multer comes in. For files, however, it’s a bit more complex. Using Express, you can seamlessly grab all the entered inputs in the req.body object.

When submitting forms that contain text inputs, the server (in our case, Node) has less work to do. 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. 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. We will also build a mini-app with a frontend and backend to test uploading a file.

In this article, we’ll learn the purpose of Multer in handling files in submitted forms. Multer makes the otherwise painstaking process of uploading files in Node much easier. Dillion Megida Follow I'm a frontend engineer and technical writer based in Nigeria.

Multer file upload example