File Upload Type & Size Validation

Requirements

Create a type-safe file validation function on both client (React forms) and server (Express endpoints). Validate that uploads are exclusively PDFs or PNG images, and restrict maximum file sizes to 5MB.

Expected Output

A client validation helper and a server validation middleware rejecting files that exceed size limits.

Hints & Tips

1Check client File objects: `file.size` is in bytes, and `file.type` holds MIME details.
2Use Express multer options limits `fileSize: 5 * 1024 * 1024`.
3Add security checks to ensure file extensions match their true MIME types.

Senior Code Review Checklist

0 / 4 Checked

Common Architectural Mistakes

1Validating files only on the client, which allows users to bypass limits by sending API payloads directly.
2Hardcoding size check metrics instead of defining configuration constants.
3Using standard file extensions to check file type, ignoring actual MIME values.

Developer Solution

Click to toggle the recommended code solution

Architectural Explanation

The module configures Multer middlewares on Express. It restricts file sizes and validates MIME properties, rejecting unsupported formats.

Code Snippet

typescript

// Server-side: Express Multer validator configuration
import multer from "multer";

const MAX_SIZE = 5 * 1024 * 1024; // 5MB

export const uploadConfig = multer({
  limits: { fileSize: MAX_SIZE },
  fileFilter: (req, file, cb) => {
    const allowedMimeTypes = ["application/pdf", "image/png"];
    if (allowedMimeTypes.includes(file.mimetype)) {
      cb(null, true);
    } else {
      cb(new Error("Only PDF and PNG files are supported."));
    }
  }
});

Explain in Interview

How to pitch this solution during technical interviews

I secure upload pipelines by validating files on both the client and the server. I check size and MIME parameters in React forms for quick user feedback, and enforce matching filters in Express upload middlewares.

Loading content…

Requirements

Expected Output

A client validation helper and a server validation middleware rejecting files that exceed size limits.

// Server-side: Express Multer validator configuration import multer from "multer"; const MAX_SIZE = 5 * 1024 * 1024; // 5MB export const uploadConfig = multer({ limits: { fileSize: MAX_SIZE }, fileFilter: (req, file, cb) => { const allowedMimeTypes = ["application/pdf", "image/png"]; if (allowedMimeTypes.includes(file.mimetype)) { cb(null, true); } else { cb(new Error("Only PDF and PNG files are supported.")); } } });