File type validation in Express - Mini Project: Build & Apply

File type validation

📖 Scenario: You are building a simple Express server that accepts file uploads. To keep the server safe and organized, you want to allow only image files of type PNG and JPEG.

🎯 Goal: Create an Express server that validates uploaded files to accept only PNG and JPEG images.

📋 What You'll Learn

Create an Express app with a POST route /upload to accept file uploads.

Use the multer middleware to handle file uploads.

Create a file filter function that only accepts files with MIME types image/png and image/jpeg.

Send a response indicating success or failure based on file type validation.

💡 Why This Matters

🌍 Real World

File type validation is important to prevent users from uploading harmful or unwanted files to your server. This keeps your app secure and organized.

💼 Career

Backend developers often need to handle file uploads safely. Knowing how to validate file types with Express and multer is a common task in web development jobs.

1

Set up Express app and multer

Create an Express app by requiring express and multer. Then create an instance of Express called app and set up multer with const upload = multer().

Express

const express = require('express');
const multer = require('multer');

// Your code here

Hint

Use require('express') and require('multer') to import the modules. Then call express() to create the app and multer() to create the upload handler.

2

Create file filter function

Create a function called fileFilter that takes req, file, and cb as parameters. Inside, check if file.mimetype is either image/png or image/jpeg. If yes, call cb(null, true), else call cb(null, false).

Express

const express = require('express');
const multer = require('multer');

const app = express();

// Create fileFilter function here
const upload = multer();

Hint

The fileFilter function controls which files multer accepts. Use file.mimetype to check the file type and call cb accordingly.

3

Add POST route with upload middleware

Add a POST route /upload to the Express app. Use upload.single('file') as middleware to handle a single file upload with the field name file. In the route handler, send a JSON response with { success: true } if req.file exists, else { success: false, message: 'Invalid file type' }.

Express

const express = require('express');
const multer = require('multer');

const app = express();

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

const upload = multer({ fileFilter });

// Add POST /upload route here

Hint

Use app.post to create the route. Use upload.single('file') to handle the file upload. Check req.file to see if the file passed the filter.

4

Start the Express server

Add code to start the Express server on port 3000 using app.listen. Log the message 'Server running on port 3000' when the server starts.

Express

const express = require('express');
const multer = require('multer');

const app = express();

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

const upload = multer({ fileFilter });

app.post('/upload', upload.single('file'), (req, res) => {
    if (req.file) {
        res.json({ success: true });
    } else {
        res.json({ success: false, message: 'Invalid file type' });
    }
});

// Start server on port 3000

Hint

Use app.listen(3000, () => { ... }) to start the server and log a message.

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