File type validation in Express - Step-by-Step Execution

Concept Flow - File type validation

Receive file upload request

↓

Extract file info (name, mimetype)

↓

Check if file type is allowed?

No→Reject upload with error

Yes↓

Accept file and continue processing

↓

Send response

The server receives a file upload, checks its type, rejects if invalid, or accepts if valid.

Execution Sample

Express

const allowedTypes = ['image/png', 'image/jpeg'];
app.post('/upload', (req, res) => {
  const file = req.file;
  if (!file || !allowedTypes.includes(file.mimetype)) {
    return res.status(400).send('Invalid file type');
  }
  res.send('File accepted');
});

This code checks the uploaded file's mimetype and rejects it if not allowed.

Execution Table

Step	Action	File mimetype	Condition	Result	Response Sent
1	Receive upload request	image/png	Check if 'image/png' in allowedTypes	Yes	No response yet
2	Validate file type	image/png	Allowed type?	Yes	No response yet
3	Accept file	image/png	-	-	No response yet
4	Send success response	image/png	-	-	'File accepted'
5	Receive upload request	application/pdf	Check if 'application/pdf' in allowedTypes	No	No response yet
6	Validate file type	application/pdf	Allowed type?	No	No response yet
7	Reject file	application/pdf	-	-	No response yet
8	Send error response	application/pdf	-	-	'Invalid file type'

💡 Execution stops after sending response to client.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 4 or 8
file.mimetype	undefined	image/png or application/pdf	image/png or application/pdf	unchanged
allowedTypes	['image/png','image/jpeg']	unchanged	unchanged	unchanged

Key Moments - 2 Insights

Why does the server reject some files even if they are uploaded?

Because the file's mimetype is not in the allowedTypes list, as shown in execution_table rows 5-8.

What happens if the file mimetype matches an allowed type?

The server accepts the file and sends a success response, as seen in execution_table rows 1-4.

Visual Quiz - 3 Questions

Look at the execution table, what response is sent when the file mimetype is 'image/png'?

A 'Invalid file type'

B No response sent

C 'File accepted'

D 'File rejected'

💡 Hint

Check execution_table row 4 where mimetype is 'image/png'.

At which step does the server decide to reject a file with mimetype 'application/pdf'?

A Step 2

B Step 6

C Step 4

D Step 8

💡 Hint

Look at execution_table rows 5-8 for 'application/pdf' mimetype.

If we add 'application/pdf' to allowedTypes, how would the response change for that file type?

A It would be accepted and send 'File accepted'

B It would still be rejected

C Server would crash

D No response would be sent

💡 Hint

Refer to variable_tracker and execution_table rows 1-4 for allowed types.

Concept Snapshot

File type validation in Express:
- Extract file mimetype from upload
- Check mimetype against allowed list
- Reject with error if not allowed
- Accept and continue if allowed
- Always send response to client

Full Transcript

In Express, when a file is uploaded, the server reads the file's mimetype. It compares this mimetype to a list of allowed types. If the file type is not allowed, the server rejects the upload and sends an error message. If the file type is allowed, the server accepts the file and sends a success message. This process ensures only safe or expected file types are processed.

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