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.