Why file upload handling matters in Express - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Express framework.

Express

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

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

Apath

Bhttp

Cfs

Dexpress

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'http' instead of 'express'

Forgetting to put quotes around the package name

We import the Express framework by requiring 'express'. This allows us to create an Express app.

2fill in blank

medium

Complete the code to set up middleware for handling file uploads using 'multer'.

Express

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

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

Aexpress-fileupload

Bbody-parser

Cmulter

Dcors

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'body-parser' which handles JSON, not files

Confusing 'express-fileupload' with 'multer'

'multer' is a popular middleware to handle file uploads in Express apps.

3fill in blank

hard

Fix the error in the route to correctly handle a single file upload named 'avatar'.

Express

app.post('/upload', upload.[1]('avatar'), (req, res) => {
  res.send('File uploaded!');
});

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

Asingle

Barray

Cfiles

Dfields

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'files' which is not a multer method

Using 'array' when only one file is expected

The 'single' method handles uploading one file with the given field name.

4fill in blank

hard

Fill both blanks to create a storage engine that saves files to the 'uploads/' folder with original filenames.

Express

const storage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, '[1]'),
  filename: (req, file, cb) => cb(null, file.[2])
});

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

Auploads/

Boriginalname

Cfilename

Dtemp/

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'filename' instead of 'originalname' for the file name

Setting destination to 'temp/' instead of 'uploads/'

The destination folder is 'uploads/'. The filename uses the file's original name via 'originalname'.

5fill in blank

hard

Fill all three blanks to create an Express route that uses multer middleware with the storage engine and handles a single file upload named 'document'.

Express

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

app.post('/submit', upload.[2]('[3]'), (req, res) => {
  res.send('Upload complete');
});

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

Astorage

Bsingle

Cdocument

DdiskStorage

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'diskStorage' instead of the storage variable

Using 'array' instead of 'single' for one file

Mismatching the field name in the route

We pass the storage engine as 'storage' to multer. Then use 'single' to handle one file named 'document'.