Handling File Uploads in Express with Multer

Uploading files (like images, PDFs, etc.) is a common requirement in web applications. However, handling file uploads in Express is not straightforward without additional tools. This is where middleware like Multer becomes useful.

Let’s understand everything step by step.

1. Why File Uploads Need Middleware

When a client uploads a file, the request is sent as multipart/form-data, not JSON.

Express by default can handle:

JSON data (express.json())
URL-encoded data

But it cannot handle multipart/form-data directly.

This creates two problems:

You cannot access file data using req.body
The server cannot process or store uploaded files properly

To solve this, we use middleware that can:

Parse incoming file data
Store files on the server
Make file info available in req.file or req.files

2. What Multer is

Multer is a middleware for Express used to handle file uploads.

It helps you:

Parse multipart/form-data
Store files locally or in memory
Access uploaded file details easily

Install Multer:

npm install multer

Import it:

const multer = require('multer');
//or
import multer  from "multer"

3. Handling Single File Upload

First, you need to configure Multer.

Basic setup:

import multer from "multer"
import express from "express"

const app = express();

// store files in "uploads" folder
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  res.send('File uploaded successfully');
});

app.listen(3000);

Important:

'file' is the name of the input field in your form

Access file info:

console.log(req.file);

Multer stores details like:

filename
path
size
mimetype

4. Handling Multiple File Uploads

To upload multiple files, use .array().

Example:

app.post('/upload-multiple', upload.array('files', 3), (req, res) => {
  res.send('Multiple files uploaded');
});

'files' → input field name
3 → maximum number of files

Access files:

console.log(req.files);

You will get an array of file objects.

5. Storage Configuration Basics

Instead of using default storage, you can customize how files are stored.

Disk storage example:

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

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

What this does:

destination → where file is stored
filename → how file is named

This helps avoid filename conflicts and organize files better.

6. Serving Uploaded Files

After uploading files, you often want to access them in the browser.

Use Express static middleware:

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

Now you can access files like:

http://your.domain/uploads/filename.jpg

This makes uploaded files publicly accessible.

Final Understanding

File uploads require middleware because Express cannot handle multipart/form-data by default
Multer is used to process and store uploaded files
You can handle single and multiple file uploads easily
Storage configuration helps control file naming and location
Uploaded files can be served using static middleware

Summary

Handling file uploads in Express becomes simple with Multer. It acts as a bridge between incoming file data and your server by parsing multipart requests and storing files efficiently. By understanding how to upload single and multiple files, configure storage, and serve uploaded content, you can build features like profile image uploads, document submissions, and media sharing systems. Multer is an essential tool for creating real-world applications that deal with user-generated content.

Handling File Uploads in Express with Multer

Comments

More from this blog

How Instagram Stores Reels, Photos, and Drafts Behind the Scenes

How WhatsApp Works Without Internet: Offline Messaging and Sync Explained

Expo Router vs React Navigation - Which One Should You Use in 2026?

How Instagram, WhatsApp, Uber & Netflix Would Be Built Today Using Expo Router

How React Virtual DOM works under the hood

1. Why File Uploads Need Middleware

2. What Multer is

Install Multer:

Import it:

3. Handling Single File Upload

Basic setup:

Important:

Access file info:

4. Handling Multiple File Uploads

Example:

Access files:

5. Storage Configuration Basics

Disk storage example:

What this does:

6. Serving Uploaded Files

Final Understanding

Summary

Command Palette

Comments

More from this blog

1. Why File Uploads Need Middleware

2. What Multer is

Install Multer:

Import it:

3. Handling Single File Upload

Basic setup:

Important:

Access file info:

4. Handling Multiple File Uploads

Example:

Access files:

5. Storage Configuration Basics

Disk storage example:

What this does:

6. Serving Uploaded Files

Final Understanding

Summary