Multiple file uploads in Express - Step-by-Step Execution

Concept Flow - Multiple file uploads

Client selects multiple files

↓

Client sends POST request with files

↓

Express server receives request

↓

Middleware parses files

↓

Files saved to server storage

↓

Server sends response to client

The client selects multiple files and sends them in a POST request. The Express server uses middleware to parse and save these files, then responds back.

Execution Sample

Express

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.array('files', 3), (req, res) => {
  res.send(req.files.length + ' files uploaded');
});

This code sets up an Express route to handle uploading up to 3 files named 'files' and responds with the count of uploaded files.

Execution Table

Step	Action	Files in Request	Files Parsed	Files Saved	Response Sent
1	Client selects 2 files	2 files	0	0	No
2	Client sends POST /upload	2 files	0	0	No
3	Middleware parses files	2 files	2 files	0	No
4	Files saved to 'uploads/'	2 files	2 files	2 files	No
5	Handler sends response	2 files	2 files	2 files	Yes
6	Request complete	2 files	2 files	2 files	Yes

💡 All files parsed and saved; response sent confirming upload count.

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
req.files.length	undefined	2	2	2
Files saved count	0	0	2	2

Key Moments - 3 Insights

Why does req.files have multiple entries?

Because upload.array() middleware parses multiple files and stores them in req.files as an array, shown in execution_table step 3.

What happens if more than 3 files are sent?

Only the first 3 files are parsed and saved due to the limit in upload.array('files', 3), so req.files length will be at most 3.

Why do we specify 'files' in upload.array('files', 3)?

It matches the form field name from the client side that holds the files, ensuring middleware parses the correct files, as seen in step 3.

Visual Quiz - 3 Questions

Look at the execution_table, how many files are saved after step 4?

A 0

B 3

C 2

D 1

💡 Hint

Check the 'Files Saved' column at step 4 in the execution_table.

At which step does the server send the response to the client?

A Step 4

B Step 5

C Step 3

D Step 2

💡 Hint

Look at the 'Response Sent' column in the execution_table.

If the client sends 4 files, how would req.files.length change according to the variable_tracker?

A It would be 3

B It would be 0

C It would be 4

D It would be undefined

💡 Hint

Recall the limit set in upload.array('files', 3) and how req.files.length is tracked.

Concept Snapshot

Multiple file uploads in Express:
- Use multer middleware with upload.array(fieldName, maxCount)
- fieldName matches client form input name
- maxCount limits number of files accepted
- Files available in req.files array
- Save files to server folder
- Respond after all files processed

Full Transcript

This visual trace shows how multiple file uploads work in Express using multer middleware. The client selects multiple files and sends them in a POST request. The server receives the request and multer parses the files into req.files array. The files are saved to the server storage folder. Finally, the server sends a response confirming how many files were uploaded. The execution table tracks each step from client selection to response. The variable tracker shows how req.files length and saved files count change. Key moments clarify why req.files is an array, the effect of the max file limit, and the importance of matching the form field name. The quiz tests understanding of file counts and response timing. This helps beginners see the step-by-step flow of multiple file uploads in Express.

Practice

1. In Express, which method from multer is used to handle multiple file uploads at once?

easy

A. upload.array()

B. upload.single()

C. upload.fields()

D. upload.none()

Solution

1. Step 1: Understand multer upload methods

   Multer provides different methods: single() for one file, array() for multiple files, and fields() for multiple fields.

2. Step 2: Identify method for multiple files

   To upload multiple files under the same field name, upload.array() is used.

3. Final Answer:

   upload.array() -> Option A

4. Quick Check:

   Multiple files = upload.array() [OK]

Hint: Multiple files use upload.array() method in multer [OK]

Common Mistakes:

• Using upload.single() for multiple files
• Confusing upload.fields() with upload.array()
• Not specifying max count in upload.array()

2. Which of the following is the correct syntax to accept up to 5 files named 'photos' using multer in Express?

easy

A. upload.array('photos', 5)

B. upload.single('photos', 5)

C. upload.fields([{ name: 'photos', maxCount: 5 }])

D. upload.none('photos', 5)

Solution

1. Step 1: Recall multer syntax for multiple files

   The method upload.array(fieldname, maxCount) accepts multiple files with the same field name and limits the count.

2. Step 2: Match syntax to question

   To accept up to 5 files named 'photos', upload.array('photos', 5) is correct.

3. Final Answer:

   upload.array('photos', 5) -> Option A

4. Quick Check:

   Max 5 files = upload.array('photos', 5) [OK]

Hint: Use upload.array('fieldname', maxCount) for multiple files [OK]

Common Mistakes:

• Using upload.single() with max count
• Confusing upload.fields() syntax
• Using upload.none() incorrectly

3. Given this Express route using multer:

app.post('/upload', upload.array('docs', 3), (req, res) => {
  res.send(req.files.length);
});

What will be the response if a user uploads 2 files named 'docs'?

medium

A. 3

B. Error

C. 1

D. 2

Solution

1. Step 1: Understand upload.array behavior

   The middleware upload.array('docs', 3) allows up to 3 files. If user uploads 2 files, both are accepted.

2. Step 2: Check response code

   The handler sends req.files.length, which is the number of uploaded files, here 2.

3. Final Answer:

   2 -> Option D

4. Quick Check:

   Uploaded files count = 2 [OK]

Hint: req.files.length shows how many files were uploaded [OK]

Common Mistakes:

• Assuming maxCount is always returned
• Confusing req.file with req.files
• Expecting error if fewer than maxCount files uploaded

4. What is wrong with this Express route for multiple file uploads?

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

medium

A. upload.array() cannot be used for multiple files

B. upload.array() requires a maxCount parameter

C. Should use req.files instead of req.file to access multiple files

D. res.send() must send JSON, not string

Solution

1. Step 1: Check multer usage for multiple files

   When using upload.array(), uploaded files are stored in req.files (an array), not req.file.

2. Step 2: Identify error in code

   The code logs req.file, which will be undefined or incorrect for multiple files.

3. Final Answer:

   Should use req.files instead of req.file to access multiple files -> Option C

4. Quick Check:

   Multiple files = req.files [OK]

Hint: Use req.files (plural) for multiple files, not req.file [OK]

Common Mistakes:

• Forgetting req.files vs req.file difference
• Assuming maxCount is mandatory
• Thinking upload.array() is invalid

5. You want to accept multiple files from two different fields: 'images' (max 3 files) and 'documents' (max 2 files). Which multer setup correctly handles this?

hard

A. upload.array('images', 3), upload.array('documents', 2)

B. upload.fields([{ name: 'images', maxCount: 3 }, { name: 'documents', maxCount: 2 }])

C. upload.single('images'), upload.single('documents')

D. upload.none()

Solution

1. Step 1: Understand multer methods for multiple fields

   To handle multiple fields with multiple files each, use upload.fields() with an array of objects specifying field names and max counts.

2. Step 2: Analyze options

   upload.fields([{ name: 'images', maxCount: 3 }, { name: 'documents', maxCount: 2 }]) correctly uses upload.fields([{ name: 'images', maxCount: 3 }, { name: 'documents', maxCount: 2 }]). upload.array('images', 3), upload.array('documents', 2) is invalid syntax as you cannot chain two upload.array() calls in one route.

3. Final Answer:

   upload.fields([{ name: 'images', maxCount: 3 }, { name: 'documents', maxCount: 2 }]) -> Option B

4. Quick Check:

   Multiple fields = upload.fields() [OK]

Hint: Use upload.fields() for multiple fields with multiple files [OK]

Common Mistakes:

• Trying to chain multiple upload.array() calls
• Using upload.single() for multiple files
• Using upload.none() which disables file uploads