Single file upload in Express - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the multer middleware in Express?

Multer is used to handle file uploads in Express apps. It processes incoming files and stores them temporarily or permanently.

beginner

How do you configure multer to accept a single file upload with the field name 'avatar'?

Use upload.single('avatar') where upload is the multer instance. This tells multer to expect one file with the field name 'avatar'.

beginner

What does req.file contain after a successful single file upload?

req.file holds information about the uploaded file like its original name, size, encoding, and the path where it was saved.

intermediate

Why is it important to handle errors when uploading files in Express?

Errors can happen if the file is too large, the wrong type, or the upload fails. Handling errors helps keep the app stable and informs users what went wrong.

intermediate

What is a simple way to limit the size of uploaded files using multer?

Set the limits.fileSize option in multer configuration to restrict the maximum file size allowed.

Which middleware is commonly used for handling single file uploads in Express?

A multer

B body-parser

C cors

D express-session

Multer is designed specifically for handling multipart/form-data, which is used for file uploads.

What does upload.single('photo') do in an Express route?

A Blocks file uploads

B Accepts multiple files with any field name

C Accepts one file with the field name 'photo'

D Uploads files to a cloud service automatically

It tells multer to expect a single file upload with the field name 'photo'.

Where can you find the uploaded file's information after multer processes it?

A req.file

B req.body.file

C req.files

D req.upload

req.file contains the uploaded file's details for single file uploads.

How can you limit the size of an uploaded file using multer?

A Use express.static middleware

B Set the limits.fileSize option

C Set maxUploadSize in Express settings

D Use body-parser size limit

Multer's configuration allows setting limits.fileSize to restrict file size.

What happens if a file larger than the limit is uploaded with multer?

A The file uploads but is truncated

B The server crashes

C The file uploads normally without issues

D An error is thrown and can be caught in error handling

Multer throws an error when the file size exceeds the limit, which should be handled properly.

Explain how to set up a simple Express route to handle a single file upload using multer.

Think about the steps from importing multer to accessing the file in the route.

Describe why handling errors during file upload is important and how you might do it in Express with multer.

Consider what can go wrong and how to keep the app stable.

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