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.