Why File Uploads Need Middleware

Normal Express middleware like:

express.json()

cannot handle file uploads properly.

Files are usually sent using:

multipart/form-data

format.

Handling this format requires specialized middleware.

What Is multipart/form-data?

It is a request format used for:

• Images

• PDFs

• Videos

• Documents

and other file uploads.

Upload Request Flow

What Is Multer?

Multer is Express middleware for handling file uploads.

It helps:

• Parse uploaded files

• Store files

• Access file information

Install Multer

npm install multer

Basic Express Setup

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

const app = express();

Basic Storage Configuration

Multer needs storage settings.

Example

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "uploads/");
  },

  filename: (req, file, cb) => {
    cb(null, Date.now() + "-" + file.originalname);
  }
});

What This Does

Creating Multer Middleware

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

Handling Single File Upload

Use:

upload.single()

Example

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

Understanding "image"

"image" = form field name

HTML Form Example

Single Upload Lifecycle

Accessing Uploaded File Information

app.post(
  "/upload",
  upload.single("image"),
  (req, res) => {
    console.log(req.file);

    res.send("Uploaded");
  }
);

Example req.file

{
  filename: "12345-image.png",
  mimetype: "image/png",
  size: 12000
}

Handling Multiple File Uploads

Use:

upload.array()

Example

app.post(
  "/photos",
  upload.array("photos", 3),
  (req, res) => {
    console.log(req.files);

    res.send("Multiple files uploaded");
  }
);

What This Means

Multiple Upload Form

Serving Uploaded Files

Uploaded files are usually stored inside:

uploads/

folder.

Making Uploads Public

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

Accessing Uploaded File

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

Upload Folder Structure

Complete Minimal Example

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

const app = express();

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

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

app.post(
  "/upload",
  upload.single("image"),
  (req, res) => {
    res.json({
      message: "Upload successful",
      file: req.file.filename
    });
  }
);

app.listen(3000);

Why Middleware Is Important Here

Multer intercepts the request before route handler.

It:

1. Reads multipart data

2. Extracts files

3. Saves files

4. Attaches file info to request

Multer Middleware Flow

Common Beginner Mistakes

Missing enctype

Incorrect form:

Correct:

Wrong Field Name

If field name differs:

upload.single("image")

must match:

name="image"

Upload Security Basics

Always validate:

• File type

• File size

• File extensions

Never trust uploaded files blindly.

Example File Filter

const upload = multer({
  storage,

  fileFilter: (req, file, cb) => {
    if (
      file.mimetype === "image/png"
    ) {
      cb(null, true);
    } else {
      cb(new Error("Only PNG allowed"));
    }
  }
});

Key Takeaways

Final Notes

Multer is widely used in Express applications because file uploads are common in:

• Profile pictures

• Documents

• Media platforms

• E-commerce apps

• Learning platforms

Understanding Multer fundamentals is important before learning:

• Cloud storage

• Image processing

• File validation

• Scalable upload systems