Multer middleware setup in Express - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is Multer in Express?

Multer is a middleware for Express that helps handle file uploads from forms. It processes files sent through HTTP requests and saves them to the server or memory.

beginner

How do you set up Multer to store uploaded files in a folder named 'uploads'?

You create a Multer storage engine using multer.diskStorage() and set the destination to 'uploads'. Then, pass this storage to multer() to create the middleware.

beginner

What does the 'single' method in Multer do?

The 'single' method tells Multer to accept a single file with the given field name from the form. It adds the file info to req.file.

intermediate

How can you limit the file size of uploads using Multer?

You can set the 'limits' option in Multer configuration with a 'fileSize' property in bytes to restrict the maximum upload size.

intermediate

What is the purpose of the 'fileFilter' option in Multer?

The 'fileFilter' option lets you control which files are accepted by checking the file type or other properties before saving.

Which Multer method is used to handle a single file upload?

A single

B array

C fields

D none

The 'single' method handles one file upload with the specified field name.

How do you specify the folder where Multer saves uploaded files?

A Using the 'limits' option

B Using the 'fileFilter' option

C Using the 'destination' option in diskStorage

D Using the 'single' method

The 'destination' option inside diskStorage sets the folder path for saving files.

What property in Multer limits the maximum file size?

A storage

B fileFilter

C maxFiles

D fileSize in limits

The 'fileSize' property inside 'limits' sets the max allowed file size in bytes.

Where does Multer store information about the uploaded file when using 'single'?

A req.body

B req.file

C req.files

D req.upload

For single file uploads, Multer adds the file info to req.file.

What does the 'fileFilter' function receive as arguments?

A req, file, callback

B req, res, next

C file, callback

D req, res

'fileFilter' receives the request, the file object, and a callback to accept or reject the file.

Explain how to set up Multer middleware to accept a single file upload and save it to a specific folder.

Think about creating storage, then middleware, then using it in a route.

Describe how to control which files Multer accepts and how to limit file size.

Consider validation and size restrictions in Multer config.

Practice

1. What is the primary purpose of the multer middleware in an Express application?

easy

A. To serve static files like images and CSS

B. To parse JSON data in request bodies

C. To handle file uploads from client requests

D. To manage user sessions and cookies

Solution

1. Step 1: Understand middleware role

   Multer is middleware designed specifically to handle multipart/form-data, which is used for uploading files.

2. Step 2: Compare with other middleware

   Other middleware like body-parser handle JSON, and express.static serves static files, but multer focuses on file uploads.

3. Final Answer:

   To handle file uploads from client requests -> Option C

4. Quick Check:

   Multer = file upload handler [OK]

Hint: Multer is for file uploads, not JSON or sessions [OK]

Common Mistakes:

• Confusing multer with body-parser for JSON parsing
• Thinking multer manages sessions or cookies
• Assuming multer serves static files

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

easy

A. const upload = multer().single('avatar');

B. const upload = multer.single('avatar');

C. const upload = multer().array('avatar');

D. const upload = multer().multi('avatar');

Solution

1. Step 1: Correct multer initialization

   Multer must be called as a function to create an instance: multer().

2. Step 2: Use .single() for single file

   To accept one file, use upload.single('fieldname'). Here, 'avatar' is the field name.

3. Final Answer:

   const upload = multer().single('avatar'); -> Option A

4. Quick Check:

   multer() + .single('avatar') = correct setup [OK]

Hint: Always call multer() before .single() or .array() [OK]

Common Mistakes:

• Calling multer.single() without parentheses
• Using .array() instead of .single() for one file
• Using non-existent .multi() method

3. Given this Express route setup with multer:

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/profile', upload.single('photo'), (req, res) => {
  res.send(req.file.path);
});

What will be the response when a user uploads a file named 'pic.jpg' in the 'photo' field?

medium

A. Undefined, because req.file is not set

B. The original filename 'pic.jpg'

C. An error because 'dest' is not a valid option

D. The path where the file is saved, like 'uploads/abc123'

Solution

1. Step 1: Understand multer storage with 'dest'

   Setting 'dest' tells multer to save files to that folder with a generated filename, not the original name.

2. Step 2: Check what req.file.path contains

   req.file.path contains the full path to the saved file, e.g., 'uploads/abc123'.

3. Final Answer:

   The path where the file is saved, like 'uploads/abc123' -> Option D

4. Quick Check:

   dest option saves file with generated name = path returned [OK]

Hint: dest saves file with random name; req.file.path shows saved path [OK]

Common Mistakes:

• Expecting original filename in req.file.path
• Thinking 'dest' is invalid option
• Assuming req.file is undefined without upload

4. Consider this code snippet:

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.files);
  res.send('Upload complete');
});

What is the problem with this code?

medium

A. Incorrect destination folder name

B. Using req.files instead of req.file for single file upload

C. Missing call to multer() function

D. upload.single() should be upload.array() for single file

Solution

1. Step 1: Check multer method used

   upload.single('file') handles one file and stores it in req.file (singular).

2. Step 2: Identify incorrect property usage

   The code logs req.files (plural), which is undefined for single file uploads.

3. Final Answer:

   Using req.files instead of req.file for single file upload -> Option B

4. Quick Check:

   single() sets req.file, not req.files [OK]

Hint: Use req.file for single, req.files for multiple uploads [OK]

Common Mistakes:

• Confusing req.file and req.files
• Not calling multer() before .single()
• Using upload.array() when single file expected

5. You want to customize multer to store uploaded files in a folder named 'images' and rename each file to include the current timestamp before the original filename. Which setup correctly achieves this?

hard

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

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

C. const storage = multer.diskStorage({ destination: 'images', filename: (req, file, cb) => { cb(null, file.originalname); } }); const upload = multer({ storage });

D. const upload = multer({ dest: 'images', filename: (req, file, cb) => { cb(null, Date.now() + '-' + file.originalname); } });

Solution

1. Step 1: Understand diskStorage options

   diskStorage accepts destination as string or function(req, file, cb); filename must be function(req, file, cb).

2. Step 2: Verify timestamp renaming

   Filename function must call cb(null, Date.now() + '-' + file.originalname).

3. Step 3: Identify correct setup

   const storage = multer.diskStorage({ destination: 'images', filename: (req, file, cb) => { cb(null, Date.now() + '-' + file.originalname); } }); const upload = multer({ storage }); uses valid string destination and correct filename.

4. Final Answer:

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

5. Quick Check:

   destination string + filename(Date.now()) [OK]

Hint: destination: string or fn(); filename: fn() always [OK]

Common Mistakes:

• Using unquoted path in destination function (images vs 'images')
• Passing filename option directly to multer instead of diskStorage
• Not using callback cb in destination or filename