Handling File Uploads in Express with Multer

In many web applications, users need to upload files such as images, documents, or videos. For example:

• Uploading a profile picture

• Sending documents

• Sharing files

Handling file uploads in Node.js is not straightforward. This is why we use middleware like Multer.

1. Why File Uploads Need Middleware

When a user uploads a file, the data is sent in a special format called multipart/form-data.

This format is different from normal JSON data:

• It contains files + text together

• It is more complex to process

Node.js by default cannot handle this format easily.

So we use middleware like Multer to:

• Read file data

• Store files

• Make files accessible in code

---

2. What is Multer?

Multer is a middleware for handling file uploads in Node.js and Express.

It helps to:

• Process multipart/form-data

• Save files to the server

• Access uploaded files easily

Real-World Use Cases

• Profile image upload

• Resume upload

• Product image upload (e-commerce)

• Document sharing apps

Upload Lifecycle

Client selects file
          ↓ 
Form sends request (multipart/form-data) 
          ↓ 
Multer middleware processes file 
          ↓ 
File saved to storage 
          ↓ 
Server sends response

---

3. Basic Setup & Storage Configuration

Step1: Install Multer:

npm install multer

Step2: multer configuration

import multer from 'multer'

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: storage });

This saves files inside the uploads folder.

---

4. Handling Single File Upload

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

"file" is the name of the input field.

---

5. Handling Multiple File Uploads

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

This allows uploading up to 3 files.

Important Points

• Always use correct field name

• Limit file size for safety

• Validate file type (image, pdf, etc.)

• Do not store sensitive files publicly

---

6. Serving Uploaded Files

To access uploaded files from browser:

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

Now you can open files like:

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

---

Multer Middleware Flow

Request with file
      ↓
Multer middleware
      ↓ 
Processes file 
      ↓ 
Stores file 
      ↓ 
Adds file info to (req.file/req.files)
      ↓ 
Route handler executes

Simple Example

import express from 'express';
import multer from 'multer';

const app = express();

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

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

app.listen(3000);

Conclusion

Multer makes file uploading easy in Node.js. It handles complex multipart data and allows developers to store and manage files efficiently.

Using Multer, It simplifies file uploads and helps to build powerful applications that handles user data smoothly.