Multiple file uploads in Express - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the middleware for handling file uploads.

Express

const multer = require('[1]');

Drag options to blanks, or click blank then click option'

Abody-parser

Bexpress

Ccors

Dmulter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'express' or 'body-parser' instead of 'multer' for file uploads.

The multer package is used to handle file uploads in Express.

2fill in blank

medium

Complete the code to set up multer to store uploaded files in the 'uploads/' folder.

Express

const upload = multer({ dest: '[1]' });

Drag options to blanks, or click blank then click option'

Auploads/

Btemp/

Cfiles/

Dstorage/

Attempts:

3 left

💡 Hint

Common Mistakes

Using a folder name that doesn't exist or misspelling the folder name.

The dest option tells multer where to save uploaded files. Here, 'uploads/' is the folder.

3fill in blank

hard

Fix the error in the route to accept multiple files with the field name 'photos'.

Express

app.post('/upload', upload.[1]('photos', 5), (req, res) => {
  res.send('Files uploaded');
});

Drag options to blanks, or click blank then click option'

Asingle

Bfields

Carray

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'single' which only accepts one file, or 'any' which accepts all fields.

To accept multiple files with the same field name, use upload.array('fieldname', maxCount).

4fill in blank

hard

Fill both blanks to handle multiple fields: 'avatar' (1 file) and 'gallery' (up to 3 files).

Express

app.post('/multi-upload', upload.[1]([
  { name: 'avatar', maxCount: 1 },
  { name: 'gallery', maxCount: [2] }
]), (req, res) => {
  res.send('Multiple fields uploaded');
});

Drag options to blanks, or click blank then click option'

Afields

Barray

C3

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'array' which only handles one field, or wrong maxCount numbers.

Use upload.fields() to handle multiple fields with different file counts.

5fill in blank

hard

Fill both blanks to access the uploaded files in the route handler.

Express

app.post('/upload-files', upload.array('documents', 4), (req, res) => {
  const files = req.[1];
  const firstFileName = files[[2]].originalname;
  res.send(`First file uploaded: ${firstFileName}`);
});

Drag options to blanks, or click blank then click option'

Abody

Bfiles

C0

Dfile

Attempts:

3 left

💡 Hint

Common Mistakes

Using req.file (for single file) or wrong index for the first file.

Uploaded files are available in req.files when using upload.array(). The first file is at index 0.

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