File type validation in Express - Performance & Optimization

Performance: File type validation

MEDIUM IMPACT

This affects server response time and user experience by preventing unnecessary file processing and reducing server load.

Validating uploaded file types in an Express server

Express

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

Rejects invalid files early, saving CPU and memory by not processing them.

📈 Performance GainReduces server load and response time by avoiding unnecessary file processing.

Validating uploaded file types in an Express server

Express

app.post('/upload', (req, res) => {
  const file = req.files.file;
  // No file type check
  processFile(file);
  res.send('File uploaded');
});

Processes all files without checking type, wasting resources on invalid files and increasing response time.

📉 Performance CostBlocks server processing for all uploads, increasing response time and CPU usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No file type validation	N/A	N/A	N/A	[X] Bad
Early file type validation	N/A	N/A	N/A	[OK] Good

Rendering Pipeline

File type validation happens on the server before any file processing or response generation, reducing server workload and improving response speed.

→Server Processing

→Response Generation

⚠️ BottleneckServer Processing when handling large or invalid files

Core Web Vital Affected

INP

This affects server response time and user experience by preventing unnecessary file processing and reducing server load.

Optimization Tips

1Always check file types immediately after upload to avoid unnecessary processing.

2Reject invalid files with a clear error response to save server resources.

3Use MIME type checks rather than just file extensions for better accuracy.

Performance Quiz - 3 Questions

Why is early file type validation important in an Express server?

A It delays the server response to check files.

B It increases the size of the uploaded files.

C It prevents processing invalid files, reducing server load and response time.

D It improves client-side rendering speed.

DevTools: Network

How to check: Open DevTools, go to Network tab, upload files and observe server response times and status codes.

What to look for: Look for faster 400 responses for invalid files and shorter overall upload request times.

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