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.

Practice

1. What is the primary purpose of the multer middleware in an Express application?

easy

A. To serve static files like images and CSS

B. To parse JSON data in request bodies

C. To handle file uploads from client requests

D. To manage user sessions and cookies

Solution

1. Step 1: Understand middleware role

   Multer is middleware designed specifically to handle multipart/form-data, which is used for uploading files.

2. Step 2: Compare with other middleware

   Other middleware like body-parser handle JSON, and express.static serves static files, but multer focuses on file uploads.

3. Final Answer:

   To handle file uploads from client requests -> Option C

4. Quick Check:

   Multer = file upload handler [OK]

Hint: Multer is for file uploads, not JSON or sessions [OK]

Common Mistakes:

• Confusing multer with body-parser for JSON parsing
• Thinking multer manages sessions or cookies
• Assuming multer serves static files

2. Which of the following is the correct way to set up multer to accept a single file upload with the field name 'avatar'?

easy

A. const upload = multer().single('avatar');

B. const upload = multer.single('avatar');

C. const upload = multer().array('avatar');

D. const upload = multer().multi('avatar');

Solution

1. Step 1: Correct multer initialization

   Multer must be called as a function to create an instance: multer().

2. Step 2: Use .single() for single file

   To accept one file, use upload.single('fieldname'). Here, 'avatar' is the field name.

3. Final Answer:

   const upload = multer().single('avatar'); -> Option A

4. Quick Check:

   multer() + .single('avatar') = correct setup [OK]

Hint: Always call multer() before .single() or .array() [OK]

Common Mistakes:

• Calling multer.single() without parentheses
• Using .array() instead of .single() for one file
• Using non-existent .multi() method

3. Given this Express route setup with multer:

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

app.post('/profile', upload.single('photo'), (req, res) => {
  res.send(req.file.path);
});

What will be the response when a user uploads a file named 'pic.jpg' in the 'photo' field?

medium

A. Undefined, because req.file is not set

B. The original filename 'pic.jpg'

C. An error because 'dest' is not a valid option

D. The path where the file is saved, like 'uploads/abc123'

Solution

1. Step 1: Understand multer storage with 'dest'

   Setting 'dest' tells multer to save files to that folder with a generated filename, not the original name.

2. Step 2: Check what req.file.path contains

   req.file.path contains the full path to the saved file, e.g., 'uploads/abc123'.

3. Final Answer:

   The path where the file is saved, like 'uploads/abc123' -> Option D

4. Quick Check:

   dest option saves file with generated name = path returned [OK]

Hint: dest saves file with random name; req.file.path shows saved path [OK]

Common Mistakes:

• Expecting original filename in req.file.path
• Thinking 'dest' is invalid option
• Assuming req.file is undefined without upload

4. Consider this code snippet:

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

app.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.files);
  res.send('Upload complete');
});

What is the problem with this code?

medium

A. Incorrect destination folder name

B. Using req.files instead of req.file for single file upload

C. Missing call to multer() function

D. upload.single() should be upload.array() for single file

Solution

1. Step 1: Check multer method used

   upload.single('file') handles one file and stores it in req.file (singular).

2. Step 2: Identify incorrect property usage

   The code logs req.files (plural), which is undefined for single file uploads.

3. Final Answer:

   Using req.files instead of req.file for single file upload -> Option B

4. Quick Check:

   single() sets req.file, not req.files [OK]

Hint: Use req.file for single, req.files for multiple uploads [OK]

Common Mistakes:

• Confusing req.file and req.files
• Not calling multer() before .single()
• Using upload.array() when single file expected

5. You want to customize multer to store uploaded files in a folder named 'images' and rename each file to include the current timestamp before the original filename. Which setup correctly achieves this?

hard

A. const storage = multer.diskStorage({ destination: 'images', filename: (req, file, cb) => { cb(null, Date.now() + '-' + file.originalname); } }); const upload = multer({ storage });

B. const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, images); }, filename: (req, file, cb) => { cb(null, Date.now() + '-' + file.originalname); } }); const upload = multer({ storage });

C. const storage = multer.diskStorage({ destination: 'images', filename: (req, file, cb) => { cb(null, file.originalname); } }); const upload = multer({ storage });

D. const upload = multer({ dest: 'images', filename: (req, file, cb) => { cb(null, Date.now() + '-' + file.originalname); } });

Solution

1. Step 1: Understand diskStorage options

   diskStorage accepts destination as string or function(req, file, cb); filename must be function(req, file, cb).

2. Step 2: Verify timestamp renaming

   Filename function must call cb(null, Date.now() + '-' + file.originalname).

3. Step 3: Identify correct setup

   const storage = multer.diskStorage({ destination: 'images', filename: (req, file, cb) => { cb(null, Date.now() + '-' + file.originalname); } }); const upload = multer({ storage }); uses valid string destination and correct filename.

4. Final Answer:

   const storage = multer.diskStorage({ destination: 'images', filename: (req, file, cb) => { cb(null, Date.now() + '-' + file.originalname); } }); const upload = multer({ storage }); -> Option A

5. Quick Check:

   destination string + filename(Date.now()) [OK]

Hint: destination: string or fn(); filename: fn() always [OK]

Common Mistakes:

• Using unquoted path in destination function (images vs 'images')
• Passing filename option directly to multer instead of diskStorage
• Not using callback cb in destination or filename