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.

Practice

1. What does upload.single('file') do in an Express app using multer?

easy

A. Uploads multiple files with the form field name 'file'.

B. Validates the file type without uploading.

C. Uploads a single file but does not save it.

D. Handles uploading a single file with the form field name 'file'.

Solution

1. Step 1: Understand multer's single file upload

   The method upload.single('file') tells multer to accept one file with the field name 'file' from the form.

2. Step 2: Confirm behavior of single file upload

   This middleware processes the file and attaches its info to req.file, enabling access in the route handler.

3. Final Answer:

   Handles uploading a single file with the form field name 'file'. -> Option D

4. Quick Check:

   upload.single('file') = single file upload [OK]

Hint: Remember single() is for one file with given field name [OK]

Common Mistakes:

• Confusing single() with array() for multiple files
• Thinking it uploads files without saving
• Assuming it validates file type automatically

2. Which of the following is the correct syntax to set up multer for single file upload with field name 'avatar'?

easy

A. app.post('/upload', multer.single('avatar'), (req, res) => { ... })

B. app.post('/upload', upload.single('avatar'), (req, res) => { ... })

C. app.post('/upload', multer.upload.single('avatar'), (req, res) => { ... })

D. app.post('/upload', upload.single.avatar(), (req, res) => { ... })

Solution

1. Step 1: Recognize multer setup pattern

   You first create an upload instance with multer, e.g., const upload = multer({ dest: 'uploads/' }). Then use upload.single('avatar') in route.

2. Step 2: Identify correct usage in route

   The correct syntax is app.post('/upload', upload.single('avatar'), (req, res) => { ... }). app.post('/upload', upload.single('avatar'), (req, res) => { ... }) matches this.

3. Final Answer:

   app.post('/upload', upload.single('avatar'), (req, res) => { ... }) -> Option B

4. Quick Check:

   upload.single('fieldName') = correct syntax [OK]

Hint: Use upload instance, then call single('fieldName') [OK]

Common Mistakes:

• Calling multer.single() directly without creating upload
• Using dot notation like single.avatar()
• Using multer.upload which does not exist

3. Given this Express route using multer:

const upload = multer({ dest: 'uploads/' });
app.post('/profile', upload.single('photo'), (req, res) => {
  res.send(req.file.originalname);
});

What will the server respond with after uploading a file named 'mypic.png'?

medium

A. Undefined

B. The saved filename in 'uploads/' folder

C. 'mypic.png'

D. An error message

Solution

1. Step 1: Understand req.file properties

   When multer saves a file, req.file contains info including originalname which is the name of the file on the user's computer.

2. Step 2: Check what is sent in response

   The route sends req.file.originalname, so the response will be the original filename, 'mypic.png'.

3. Final Answer:

   'mypic.png' -> Option C

4. Quick Check:

   req.file.originalname = original filename [OK]

Hint: req.file.originalname holds the uploaded file's original name [OK]

Common Mistakes:

• Confusing originalname with filename (saved name)
• Expecting req.file to be undefined
• Assuming response sends saved file path

4. What is wrong with this Express route for single file upload?

const upload = multer({ dest: 'uploads/' });
app.post('/upload', (req, res) => {
  upload.single('file');
  res.send('File uploaded');
});

medium

A. upload.single('file') is not called as middleware, so file is not processed.

B. The destination folder 'uploads/' is missing.

C. The route should use upload.array() for single file.

D. res.send() must be called before upload.single().

Solution

1. Step 1: Check how multer middleware is used

   The method upload.single('file') must be passed as middleware in the route definition, not just called inside the handler.

2. Step 2: Identify the mistake in route setup

   Here, upload.single('file') is called but not used as middleware, so multer never processes the file.

3. Final Answer:

   upload.single('file') is not called as middleware, so file is not processed. -> Option A

4. Quick Check:

   Use upload.single() as middleware in route [OK]

Hint: Pass upload.single() as middleware, not call inside handler [OK]

Common Mistakes:

• Calling upload.single() inside route handler instead of middleware
• Confusing upload.single() with upload.array()
• Ignoring multer setup before route

5. You want to customize the filename of uploaded files to include the current timestamp before the original name. Which multer storage option correctly achieves this?

hard

A. const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, 'uploads/'); }, filename: (req, file, cb) => { cb(null, Date.now() + '-' + file.originalname); } });

B. const storage = multer.diskStorage({ destination: (req, file) => 'uploads/', filename: (req, file, cb) => { cb(null, file.originalname); } });

C. const storage = multer.diskStorage({ destination: 'uploads/', filename: (file, cb) => { cb(null, Date.now() + '-' + file.originalname); } });

D. const storage = multer.diskStorage({ destination: 'uploads/', filename: (req, file) => { cb(null, Date.now() + '-' + file.originalname); } });

Solution

1. Step 1: Understand multer.diskStorage parameters

   The destination can be a string or a function with signature (req, file, cb). The filename must be a function with (req, file, cb).

2. Step 2: Check each option for correct function signatures

   const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, 'uploads/'); }, filename: (req, file, cb) => { cb(null, Date.now() + '-' + file.originalname); } }); correctly uses functions for both destination and filename, and sets filename to timestamp + original name.

3. Final Answer:

   const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, 'uploads/'); }, filename: (req, file, cb) => { cb(null, Date.now() + '-' + file.originalname); } }); -> Option A

4. Quick Check:

   Use functions with (req, file, cb) for storage options [OK]

Hint: Use functions with (req, file, cb) to customize storage [OK]

Common Mistakes:

• Passing destination as string but filename as function missing req
• Wrong function parameters in filename or destination
• Not adding timestamp in filename callback