Handling File Uploads in Express with Multer

In real-world applications, users don’t just send text data.

They upload files.

Profile pictures, documents, PDFs, images — these are all part of modern applications.

Handling file uploads is not straightforward with plain Express.

This is where middleware like Multer comes in.

---

Why File Uploads Need Middleware

When a client uploads a file, it is not sent as normal JSON.

It is sent as multipart/form-data.

This format is designed to handle binary data like images and files.

Express, by default, does not understand this format.

So we need middleware to:

• parse incoming file data

• extract files

• store them properly

Multer solves this problem.

---

What is Multer

Multer is a middleware for handling multipart/form-data in Express.

It processes incoming file uploads and makes them available in your request object.

It also helps you:

• store files on disk

• control file names

• manage upload behavior

---

Installing Multer

npm install multer

---

Basic Setup

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

const app = express();
const upload = multer({ dest: "uploads/" });

Here:

• uploads/ is the folder where files will be stored

---

Handling Single File Upload

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

Here:

• "file" is the field name from the form

• req.file contains file information

---

Handling Multiple File Uploads

app.post("/uploads", upload.array("files", 3), (req, res) => {
  console.log(req.files);
  res.send("Files uploaded successfully");
});

Here:

• "files" is the field name

• 3 is the maximum number of files

---

Understanding File Data

When a file is uploaded, Multer adds it to the request.

console.log(req.file);

You will get:

{
  fieldname: 'file',
  originalname: 'image.png',
  encoding: '7bit',
  mimetype: 'image/png',
  destination: 'uploads/',
  filename: 'randomname.png',
  path: 'uploads/randomname.png',
  size: 12345
}

This gives you full control over the file.

---

Storage Configuration (Basic)

Instead of default storage, you can customize it.

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

const upload = multer({ storage });

This allows you to:

• control file naming

• avoid conflicts

---

Serving Uploaded Files

Once files are uploaded, you may want to serve them.

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

Now you can access files like:

http://localhost:3000/uploads/filename.png

---

Upload Flow (Understanding)

Client → Upload Form → Multer Middleware → Storage → Response

Multer sits in the middle and processes the file.

---

Multer Execution Flow

Request → Multer parses → File saved → req.file populated → Route handler runs

---

Real-World Use Cases

File uploads are used in:

• profile pictures

• document submission systems

• media platforms

• admin dashboards

This is a core backend feature.

---

Why This Matters

Without proper file handling:

• uploads fail

• data is lost

• server cannot process files

Multer makes file handling simple and reliable.

---

Final Thought

File uploads may seem simple from the UI. But on the backend, they require proper handling of data, storage, and flow. Multer gives you a clean way to manage this complexity. Once you understand this, you can start building real-world features.