Multer middleware setup in Express - Step-by-Step Execution

Concept Flow - Multer middleware setup

Start Express app

↓

Import Multer

↓

Configure Multer storage

↓

Create Multer middleware

↓

Use Multer middleware in route

↓

Handle file upload request

↓

Save file and respond

↓

End

This flow shows how Express app imports and configures Multer, then uses it as middleware to handle file uploads in routes.

Execution Sample

Express

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

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

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

This code sets up Multer to save uploaded files to 'uploads/' folder and uses it in a POST route to handle single file upload.

Execution Table

Step	Action	Multer Config	Middleware Created	Request Handling	Response
1	Import express and multer	No config yet	No	No	No
2	Configure multer with dest 'uploads/'	dest: 'uploads/'	Yes	No	No
3	Create express app	dest: 'uploads/'	Yes	No	No
4	Define POST /upload route with multer middleware	dest: 'uploads/'	Yes	Middleware ready	No
5	Client sends POST /upload with file 'file'	dest: 'uploads/'	Yes	Multer processes file, saves to 'uploads/'	No
6	Route handler runs after multer middleware	dest: 'uploads/'	Yes	File info in req.file	Send 'File uploaded'
7	Response sent to client	dest: 'uploads/'	Yes	File saved	File uploaded
8	End	dest: 'uploads/'	Yes	Done	Done

💡 Request handled and response sent, file saved to disk, middleware completed

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 5	After Step 6	Final
upload	undefined	multer instance with dest 'uploads/'	multer instance	multer instance	multer instance	multer instance
req.file	undefined	undefined	undefined	file object with filename and path	file object	file object
res	undefined	undefined	undefined	undefined	response object	response sent

Key Moments - 3 Insights

Why do we pass upload.single('file') in the route?

upload.single('file') is the multer middleware that processes a single file from the form field named 'file'. It must be used before the route handler to parse and save the file. See execution_table step 4 and 5.

What does the 'dest' option in multer config do?

'dest' tells multer where to save uploaded files on disk. Here it is 'uploads/' folder. Without it, multer won't save files automatically. See execution_table step 2.

How do we access the uploaded file info in the route handler?

After multer middleware runs, the uploaded file info is available in req.file. This lets us know file name, path, size, etc. See execution_table step 6.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of req.file after step 5?

A undefined

B multer instance

C file object with filename and path

D response object

💡 Hint

Check the 'Request Handling' column at step 5 in execution_table

At which step does the multer middleware get created?

A Step 1

B Step 2

C Step 4

D Step 6

💡 Hint

Look at 'Middleware Created' column in execution_table

If we change upload.single('file') to upload.array('file', 3), what changes in the execution?

A req.files becomes an array of files

B req.file remains a single file

C Multer stops saving files

D Response changes to 'Multiple files uploaded'

💡 Hint

Recall multer.single vs multer.array behavior for req.file or req.files

Concept Snapshot

Multer middleware setup:
- Import multer and configure storage (e.g., dest: 'uploads/')
- Create multer instance (upload)
- Use upload.single('fieldname') in route to handle one file
- Access uploaded file info in req.file
- Multer saves file to disk before route handler runs

Full Transcript

This visual execution shows how to set up Multer middleware in an Express app. First, we import express and multer. Then we configure multer with a destination folder 'uploads/' where files will be saved. We create an Express app and define a POST route '/upload' that uses multer's upload.single middleware to handle a single file upload from the form field named 'file'. When a client sends a file, multer processes it, saves it to disk, and attaches file info to req.file. The route handler then sends a confirmation response. Variables like 'upload' hold the multer instance, and 'req.file' holds the uploaded file info after middleware runs. Key points include using upload.single correctly, understanding the 'dest' option, and accessing req.file in the handler. The quiz checks understanding of these steps and variable states.