Handling File Uploads in Express with Multer

Introduction

When it comes to web development, understanding HTTP content types is critical. One of the most important content types to be aware of is multipart/form-data. This format is used for uploading files and sending other data through an HTTP POST request.

When you submit a form with multiple fields and file inputs, you’re likely using multipart/form-data This content type is essential for sending different types of data in a single HTTP POST request.

While JSON is an excellent format for sending structured data, it can’t handle file uploads. That’s where multipart/form-data comes in .

multipart/form-data uses in generally in file upload and this article is about that.

---

Why File Uploads Need Middleware?

File upload middleware (such as Multer for Node.js/Express) is essential because it parses, validates, and stores complex multipart/form-data requests, which standard web frameworks cannot process automatically.

Reasons to use middleware:

• Parsing multipart/form-data: Browsers send files using the multipart/form-data encoding, which raw HTTP requests do not parse into a usable object. Middleware translates this raw data into usable req.file or req.body objects.

• Validation and Control: You can limit the file size, file types (e.g., only allowing JPG/PNG), and the number of files, reducing the risk of server abuse, such as filling up disk space.

• Storage Management & Security: Middleware enables secure handling by defining where files are stored (local disk, memory, or cloud) and how they are named, preventing file name collisions or illegal path traversing.

---

What Multer is?

Multer is a third-party middleware library used in Express.js to upload files to the server and store them in a directory. It is specifically designed to handle multipart/form-data, which is the encoding type used when submitting files through HTML forms.

File uploads are an essential part of many applications, such as uploading profile pictures, documents, or media files, and Multer makes this process simple in Express.js.

While Multer is one of the most popular packages for handling file uploads, it is not the only option. There are other multipart form parsers available in the Node.js ecosystem, such as:

• express-fileupload

• Busboy (the library Multer is built on)

• Formidable

• Multiparty

Each package has its own approach and use cases, but Multer is widely preferred because of its simplicity and smooth integration with Express.js.

This is how multer middleware looks like

const multer = require("multer");

// Storage configuration
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "uploads/"); // folder where file will be stored
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + "-" + file.originalname);
  },
});

// Multer middleware
const upload = multer({ storage });

---

Handling Single File Upload in Multer

For single file upload, we place the Multer upload middleware in the route.

The upload middleware provides the .single() method, which is used to handle one file upload.

Inside .single("fieldname"), we pass the file input field name sent from the frontend.

This field name must match the name attribute of the file input in the frontend form.

Example:

Frontend:

<input type="file" name="profilePic" />

Backend:

router.post("/upload", upload.single("profilePic"), (req, res) => {
  console.log(req.file);
  res.send("File uploaded");
});

Here, "profilePic" is the field name that Multer looks for in the incoming multipart/form-data request.

---

Handling Multiple File Uploads in Multer

For multiple file upload, we place the Multer upload middleware in the route.

The upload middleware provides the .array() method, which is used to handle multiple files.

Inside .array("fieldname", maxCount), we pass:

1. fieldname → the name attribute from the frontend input

2. maxCount → maximum number of files allowed

This field name must match the name attribute of the file input in the frontend form.

Example:

Frontend:

<input type="file" name="images" multiple />

Backend:

router.post("/upload", upload.array("images", 5), (req, res) => {
  console.log(req.files);
  res.send("Files uploaded");
});

Here:

• "images" → field name

• 5 → maximum 5 files allowed

Uploaded files will be available in req.files (array of file objects).

---

Storage Configuration Basics

While creating Multer middleware, we can configure storage.

Multer provides two storage engines:

1. memoryStorage()

2. diskStorage()

By default, Multer can use memoryStorage, where the uploaded file is stored temporarily in RAM as a buffer. This is useful for small files or when you want to process the file before storing it, but it is generally not the best approach for regular file uploads because it consumes server memory.

That’s why diskStorage() is commonly used.

In diskStorage(), we pass an object that mainly contains two functions:

1. destination This function decides where the uploaded file will be stored on the server.

2. filename This function decides the name of the file before saving it.

We usually generate a unique filename (for example using timestamp or UUID) because when uploading files to cloud storage or a server, different users may upload files with the same original name, which can cause conflicts or overwriting.

Example:

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "uploads/");
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + "-" + file.originalname);
  },
});

Here:

• destination → stores files inside the uploads folder

• filename → creates a unique filename using timestamp + original filename

---

Serving Uploaded Files

After uploading files to the server (for example inside the uploads folder), those files are not automatically accessible in the browser.

To make them accessible, we serve that folder as a static folder using Express middleware.

Example:

const express = require("express");
const app = express();

// Serve uploaded files
app.use("/uploads", express.static("uploads"));

Now any file inside the uploads folder can be accessed through the browser.

Example:

If file stored in server:

uploads/profile.jpg

Browser URL:

http://localhost:3000/uploads/profile.jpg

How it works:

• app.use() → adds middleware

• "/uploads" → route prefix

• express.static("uploads") → makes the folder publicly accessible

This is useful when you want to display uploaded images, PDFs, or other files directly in frontend.

---

Conclusion

Multer is one of the most popular libraries in Node.js for handling file uploads. It is simple to set up and easy to use. Since it works as middleware, with just a little configuration your file upload system is ready to go.

That said, Multer is not the only option. There are other libraries available in the Node.js ecosystem as well, so for learning and exploration, it’s worth checking them out too and understanding which one fits your use case better.

Hope you found this blog helpful❤️