File type validation in Express - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Express module.

Express

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

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

Aexpress

Bhttp

Cfs

Dpath

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'http' instead of 'express'.

Forgetting to put the module name in quotes.

The Express module is imported using require('express').

2fill in blank

medium

Complete the code to use multer middleware for file uploads.

Express

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

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

Aexpress

Bcors

Cbody-parser

Dmulter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'body-parser' which does not handle file uploads.

Using 'express' instead of 'multer'.

Multer is the middleware used for handling file uploads in Express.

3fill in blank

hard

Fix the error in the file filter function to only accept PNG files.

Express

const fileFilter = (req, file, cb) => {
  if (file.mimetype === '[1]') {
    cb(null, true);
  } else {
    cb(null, false);
  }
};

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

Aimage/png

Bapplication/pdf

Cimage/jpeg

Dtext/plain

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'image/jpeg' which is for JPEG images.

Using 'application/pdf' which is for PDF files.

The MIME type for PNG images is image/png. This filter allows only PNG files.

4fill in blank

hard

Fill both blanks to configure multer with a file size limit and file filter.

Express

const upload = multer({
  limits: { fileSize: [1] },
  fileFilter: [2]
});

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

A1024 * 1024

BfileFilter

C5000

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Setting fileSize to 5000 which is too small.

Passing 'true' instead of the fileFilter function.

The file size limit is set to 1MB (1024 * 1024 bytes). The fileFilter function is passed as the fileFilter option.

5fill in blank

hard

Fill all three blanks to create an Express route that uses multer to upload a single file named 'avatar'.

Express

app.post('/upload', [1].single('[2]'), (req, res) => {
  if (!req.file) {
    return res.status(400).send('[3]');
  }
  res.send('File uploaded successfully');
});

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

Aupload

Bavatar

CNo file uploaded

Dexpress

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'express' instead of the multer instance.

Using a wrong field name other than 'avatar'.

Not handling the case when no file is uploaded.

The multer instance is named upload. The single file field is named 'avatar'. The error message is 'No file uploaded'.

Practice

1. What is the main purpose of using fileFilter in multer when handling file uploads in Express?

easy

A. To store files in a database

B. To rename the uploaded files automatically

C. To compress files before saving

D. To allow only specific file types to be uploaded

Solution

1. Step 1: Understand multer's fileFilter role

   The fileFilter function is designed to check the file type before saving.

2. Step 2: Identify the purpose of fileFilter

   It filters files by MIME type or extension to allow only certain types.

3. Final Answer:

   To allow only specific file types to be uploaded -> Option D

4. Quick Check:

   fileFilter controls allowed file types [OK]

Hint: fileFilter controls which file types multer accepts [OK]

Common Mistakes:

• Confusing fileFilter with file renaming
• Thinking fileFilter compresses files
• Assuming fileFilter stores files in DB

2. Which of the following is the correct syntax to define a fileFilter function in multer that only accepts PNG files?

easy

A. fileFilter: (req, file, cb) => { cb(null, file.mimetype === 'image/png'); }

B. fileFilter: (req, file, cb) => { cb(file.mimetype === 'image/png'); }

C. fileFilter: (req, file) => { return file.mimetype === 'image/png'; }

D. fileFilter: (file, cb) => { cb(null, file.type === 'image/png'); }

Solution

1. Step 1: Check multer fileFilter signature

   The function receives (req, file, cb) and calls cb(error, acceptBoolean).

2. Step 2: Validate correct callback usage

   fileFilter: (req, file, cb) => { cb(null, file.mimetype === 'image/png'); } correctly calls cb with null error and true/false for acceptance based on mimetype.

3. Final Answer:

   fileFilter: (req, file, cb) => { cb(null, file.mimetype === 'image/png'); } -> Option A

4. Quick Check:

   fileFilter uses cb(null, boolean) [OK]

Hint: fileFilter callback needs (null, true/false) to accept/reject [OK]

Common Mistakes:

• Omitting the null error argument in callback
• Using wrong parameter order
• Checking file.type instead of file.mimetype

3. Given the following multer setup, what happens when a user uploads a file with MIME type 'image/jpeg'?

const upload = multer({
  fileFilter: (req, file, cb) => {
    if (file.mimetype === 'image/png') {
      cb(null, true);
    } else {
      cb(new Error('Only PNG files allowed'), false);
    }
  }
});

medium

A. The upload succeeds but file is renamed

B. The upload succeeds and file is saved

C. The upload fails with an error 'Only PNG files allowed'

D. The upload is ignored silently

Solution

1. Step 1: Analyze fileFilter logic for 'image/jpeg'

   The code only accepts 'image/png'; other types cause an error callback.

2. Step 2: Determine multer behavior on error in fileFilter

   Calling cb with an Error rejects the upload and triggers the error handler.

3. Final Answer:

   The upload fails with an error 'Only PNG files allowed' -> Option C

4. Quick Check:

   fileFilter error rejects upload [OK]

Hint: fileFilter error callback blocks upload with message [OK]

Common Mistakes:

• Assuming non-PNG files are accepted
• Thinking files get renamed automatically
• Believing upload silently ignores invalid files

4. Identify the error in this multer fileFilter function that aims to accept only PDF files:

fileFilter: (req, file, cb) => {
  if (file.mimetype = 'application/pdf') {
    cb(null, true);
  } else {
    cb(null, false);
  }
}

medium

A. Missing error argument in callback

B. Using assignment (=) instead of comparison (===) in the if condition

C. Incorrect parameter order in fileFilter function

D. Using file.type instead of file.mimetype

Solution

1. Step 1: Check the if condition syntax

   The code uses single = which assigns value instead of comparing.

2. Step 2: Understand impact of assignment in condition

   This causes the condition to always be true, accepting all files incorrectly.

3. Final Answer:

   Using assignment (=) instead of comparison (===) in the if condition -> Option B

4. Quick Check:

   Use === for comparison, not = [OK]

Hint: Use === for comparison, not = assignment [OK]

Common Mistakes:

• Confusing = and === in conditions
• Omitting error argument in callback is allowed here
• Mixing up file.type and file.mimetype

5. You want to allow users to upload only images (PNG, JPEG) and PDFs, and provide a clear error message if the file type is invalid. Which fileFilter function correctly implements this in Express using multer?

hard

A. fileFilter: (req, file, cb) => {
const allowed = ['image/png', 'image/jpeg', 'application/pdf'];
if (allowed.includes(file.mimetype)) {
cb(null, true);
} else {
cb(new Error('Invalid file type. Only PNG, JPEG, PDF allowed'), false);
}
}

B. fileFilter: (req, file, cb) => {
if (file.mimetype === 'image/png' || 'image/jpeg' || 'application/pdf') {
cb(null, true);
} else {
cb(null, false);
}
}

C. fileFilter: (req, file, cb) => {
if (file.mimetype === 'image/png' && file.mimetype === 'image/jpeg' && file.mimetype === 'application/pdf') {
cb(null, true);
} else {
cb(new Error('Only images and PDFs allowed'), false);
}
}

D. fileFilter: (req, file, cb) => {
const allowed = ['png', 'jpeg', 'pdf'];
if (allowed.includes(file.extension)) {
cb(null, true);
} else {
cb(new Error('Wrong file type'), false);
}
}

Solution

1. Step 1: Check correct MIME type validation

   fileFilter: (req, file, cb) => { const allowed = ['image/png', 'image/jpeg', 'application/pdf']; if (allowed.includes(file.mimetype)) { cb(null, true); } else { cb(new Error('Invalid file type. Only PNG, JPEG, PDF allowed'), false); } } uses an array and includes() to check if file.mimetype matches allowed types.

2. Step 2: Verify error handling and message clarity

   fileFilter: (req, file, cb) => { const allowed = ['image/png', 'image/jpeg', 'application/pdf']; if (allowed.includes(file.mimetype)) { cb(null, true); } else { cb(new Error('Invalid file type. Only PNG, JPEG, PDF allowed'), false); } } calls cb with an Error and false to reject invalid types with a clear message.

3. Final Answer:

   fileFilter function that checks allowed MIME types array and returns error with message -> Option A

4. Quick Check:

   Use array.includes and error callback for validation [OK]

Hint: Use array.includes for multiple types and error callback for messages [OK]

Common Mistakes:

• Using || incorrectly without repeating comparisons
• Using && which requires all types at once (impossible)
• Checking file.extension which is not a multer property