Single file upload 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'

Amulter

Bexpress

Cbody-parser

Dcors

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'express' instead of 'multer' to import the upload middleware.

Confusing body-parser with multer.

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

2fill in blank

medium

Complete the code to set the destination folder for uploaded files.

Express

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

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

Apublic

Buploads/

C/tmp/uploads

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Using system temp folders like '/tmp/uploads' which may not exist on all systems.

Using 'public' or 'static' which are usually for serving static files, not uploads.

The dest option specifies the folder where uploaded files are saved. Usually, a folder like uploads/ is used.

3fill in blank

hard

Fix the error in the route to handle single file upload with field name 'avatar'.

Express

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

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

Afiles

Barray

Csingle

Dfields

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'files' which is not a multer method.

Using 'array' or 'fields' when only one file is expected.

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

4fill in blank

hard

Fill both blanks to access the uploaded file's original name and size inside the route handler.

Express

app.post('/upload', upload.single('file'), (req, res) => {
  const name = req.file.[1];
  const size = req.file.[2];
  res.send(`Uploaded file ${name} with size ${size} bytes`);
});

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

Aoriginalname

Bfilename

Csize

Dpath

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'filename' instead of 'originalname' to get the original file name.

Using 'path' to get the file size.

The originalname property holds the original file name. The size property holds the file size in bytes.

5fill in blank

hard

Fill all three blanks to create a route that saves a single uploaded file and sends back its stored filename, mimetype, and size.

Express

app.post('/file', upload.[1]('file'), (req, res) => {
  const storedName = req.file.[2];
  const type = req.file.[3];
  const size = req.file.size;
  res.json({ storedName, type, size });
});

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

Asingle

Bfilename

Cmimetype

Doriginalname

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'originalname' instead of 'filename' for stored file name.

Confusing 'mimetype' with 'originalname'.

The single method handles one file upload. The filename is the name given by multer when saving the file. The mimetype is the file's media type.