When a user tries to upload a photo, a resume, or a video through a web form, the browser faces the same problem. Standard HTTP requests are designed for text — usernames, passwords, search queries. A file is binary data, often large, and cannot simply be pasted into a regular JSON body. The browser needs a special packing format. The server needs a special unpacking tool. That is why file uploads require middleware, and that is where Multer comes in.

1. Why File Uploads Need Middleware

By default, Express does not know what to do with incoming files. When a browser sends a standard form submission, the data arrives as simple text. But when a form includes a file input, the browser switches to multipart/form-data encoding. This format splits the submission into multiple parts — some containing text fields, others containing binary file chunks — separated by boundary markers.

Without middleware, Express sees this incoming stream as raw, jumbled data. It does not automatically parse the boundaries, extract the files, or decide where to save them. It is like receiving a truckload of unlabeled moving boxes and being told, "Figure it out."

Middleware sits between the raw request and your route handler. It intercepts the multipart stream, parses the boundaries, pulls out the files, and attaches them to the request object in a clean, usable format. Only then does your route handler run.

2. What Multer Is

Multer is a Node.js middleware designed specifically for handling multipart/form-data. It is the most popular tool in the Express ecosystem for file uploads, and for good reason: it is minimal, flexible, and stays out of your way.

Think of Multer as the doorman with a toolbox. It receives the boxes, checks what is inside, decides where to store them, and hands you a neat inventory list. Your job is simply to tell the doorman the rules: "Accept one profile picture," or "Accept up to five gallery images," or "Save everything to the uploads/ folder."

Install it like any other package:

npm install multer

3. Handling a Single File Upload

Let us start simple. A user wants to upload one avatar image.

First, configure Multer with basic storage settings:

const express = require('express');
const multer = require('multer');
const app = express();

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

const upload = multer({ storage: storage });

Here, diskStorage tells Multer to save files to the local filesystem. The destination function sets the folder. The filename function renames the file to avoid collisions — in this case, by prefixing the original name with a timestamp.

Now, create a route that uses this upload configuration:

app.post('/profile', upload.single('avatar'), (req, res) => {
  console.log(req.file); // Details about the uploaded file
  res.send('Avatar uploaded successfully!');
});

The upload.single('avatar') middleware tells Multer to look for a single file field named avatar in the incoming form. If it finds one, it processes the file, saves it to disk, and attaches a req.file object containing metadata like filename, size, and mimetype. Your route handler then runs as normal.

4. Handling Multiple File Uploads

Sometimes users need to upload more than one file — a photo gallery, document attachments, or product images. Multer handles this with upload.array():

app.post('/gallery', upload.array('photos', 5), (req, res) => {
  console.log(req.files); // Array of uploaded files
  res.send(`${req.files.length} photos uploaded.`);
});

upload.array('photos', 5) accepts up to five files from the form field named photos. Instead of req.file, the files are stored in req.files as an array. You can loop through them, validate their types, or save their names to a database.

For more complex forms with mixed file fields, Multer also offers upload.fields(), but as a beginner, mastering single() and array() covers most real-world needs.

5. Storage Configuration Basics

Multer offers two built-in storage engines. The one we used above is diskStorage, which saves files to your server's hard drive. This is perfect for learning and small applications.

The alternative is memoryStorage, which keeps files in RAM as Buffer objects. This is useful if you want to process files before saving them — for example, resizing an image with a library like Sharp — but it is not suitable for large files because it consumes server memory.

For now, stick with diskStorage. Create an uploads/ folder in your project root, and Multer will handle the rest. Just remember: if the folder does not exist, you may need to create it programmatically or manually before running your server.

6. Serving Uploaded Files

Uploading files is only half the job. Users need to view or download them later. Express provides a built-in middleware called express.static to serve files from a directory:

app.use('/uploads', express.static('uploads'));

Now, if a user uploads an avatar named 1712345678900-profile.jpg, they can access it directly at:

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

This bridges the gap between storage and delivery. Your application stores the file, records its path in a database, and serves it back when requested.

7. Visual Diagram Ideas

Diagram A: Client to Server to Storage Flow Draw a browser window on the left with a form containing a file input. An arrow labeled multipart/form-data points to a server box in the middle. Inside the server, show a small gate labeled Multer Middleware that intercepts the stream. An arrow exits the gate to a folder icon labeled uploads/. Finally, an arrow returns to the browser labeled 200 OK. This shows the upload lifecycle from submission to storage.

Diagram B: Multer Middleware Execution Flow Draw a horizontal pipeline. A raw request enters from the left as a jumbled stream. It passes through a box labeled Multer that sorts the stream into two clean outputs: req.body (text fields) and req.file or req.files (binary files). Only then does the stream reach the route handler box. Label the gap before Multer "Unusable" and the gap after Multer "Usable."

Conclusion

File uploads are not magic, but they are too complex to handle manually. The multipart format exists because files are not text, and Multer exists because parsing that format should not be your job. By configuring storage, attaching middleware to your routes, and serving files with static middleware, you create a complete upload pipeline that is clean, secure, and maintainable.

Start with single uploads. Graduate to arrays. Keep your storage local while learning. And always remember: Multer is the doorman. You just write the guest list.