File size limits in Express - Performance & Optimization

Performance: File size limits

HIGH IMPACT

This affects the server response time and client experience by controlling how large uploaded files can be, impacting load speed and resource usage.

Handling file uploads in an Express server

Express

const multer = require('multer');
const upload = multer({ limits: { fileSize: 1 * 1024 * 1024 } });
app.use(express.json({ limit: '1mb' }));
app.post('/upload', upload.single('file'), (req, res) => {
  // Limit file size to 1mb
  res.send('File received');
});

Restricting file size reduces server load and speeds up processing, preventing slow responses.

📈 Performance GainReduces blocking time and memory use, improving LCP and server stability

Handling file uploads in an Express server

Express

const multer = require('multer');
const upload = multer();
app.use(express.json({ limit: '10mb' }));
app.post('/upload', upload.single('file'), (req, res) => {
  // No file size limit set (multer default allows unlimited file size)
  // Accepts very large files
  res.send('File received');
});

No strict file size limit allows very large uploads, which can slow down server response and increase memory usage.

📉 Performance CostBlocks server event loop during large uploads, increasing response time and risking crashes

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No file size limit	N/A	N/A	Blocks response rendering	[X] Bad
File size limit set to 1mb	N/A	N/A	Fast response, no blocking	[OK] Good

Rendering Pipeline

File size limits affect the server's ability to quickly process incoming data, which impacts how fast the server can respond and the browser can render the page.

→Network Transfer

→Server Processing

→Response Rendering

⚠️ BottleneckServer Processing when handling large uploads

Core Web Vital Affected

LCP

This affects the server response time and client experience by controlling how large uploaded files can be, impacting load speed and resource usage.

Optimization Tips

1Always set a reasonable file size limit for uploads to prevent server overload.

2Use middleware like multer({ limits: { fileSize: '1mb' } }) to enforce limits.

3Monitor upload sizes in DevTools Network panel to catch performance issues early.

Performance Quiz - 3 Questions

What is the main performance risk of not setting file size limits in Express uploads?

A JavaScript bundle size increases

B Browser will block rendering due to CSS issues

C Server can become slow or crash due to large uploads

D Images will not load properly

DevTools: Network

How to check: Open DevTools, go to Network tab, upload a file and observe the request size and timing.

What to look for: Look for large request payloads causing long upload times or stalled responses indicating poor file size limits.

Practice

1. What is the main purpose of setting a file size limit in an Express app using body parsers?

easy

A. To change the file type of uploads

B. To allow unlimited file uploads without restrictions

C. To automatically compress uploaded files

D. To prevent users from uploading files that are too large and slow down the server

Solution

1. Step 1: Understand file size limits in Express

   File size limits stop very large files from being uploaded, protecting server resources.

2. Step 2: Identify the main reason for limits

   Limits keep the app safe and fast by preventing overload from big files.

3. Final Answer:

   To prevent users from uploading files that are too large and slow down the server -> Option D

4. Quick Check:

   File size limits = prevent large uploads [OK]

Hint: File size limits protect server from big uploads [OK]

Common Mistakes:

• Thinking limits compress files automatically
• Believing limits allow unlimited uploads
• Confusing file type changes with size limits

2. Which of the following is the correct way to set a 1MB file size limit using Express's built-in JSON body parser?

easy

A. app.use(express.json({ sizeLimit: 1 }))

B. app.use(express.json({ limit: '1mb' }))

C. app.use(express.json({ maxFileSize: '1MB' }))

D. app.use(express.json({ limit: 1000 }))

Solution

1. Step 1: Recall Express JSON parser options

   The correct option to set size limit is 'limit' with a string like '1mb'.

2. Step 2: Check each option's syntax

   Only app.use(express.json({ limit: '1mb' })) uses 'limit' with correct string format '1mb'. Others use wrong keys or units.

3. Final Answer:

   app.use(express.json({ limit: '1mb' })) -> Option B

4. Quick Check:

   Use 'limit' with string size in Express [OK]

Hint: Use 'limit' option with string size like '1mb' [OK]

Common Mistakes:

• Using wrong option names like sizeLimit or maxFileSize
• Passing number without units as limit
• Using uppercase units incorrectly

3. Given this Express code snippet, what happens if a client uploads a JSON body larger than 500kb?

app.use(express.json({ limit: '500kb' }));
app.post('/upload', (req, res) => {
  res.send('Upload successful');
});

medium

A. The server throws an error and does not call the route handler

B. The server ignores the size limit and processes the full upload

C. The server truncates the JSON to 500kb and processes it

D. The server accepts the upload and responds with 'Upload successful'

Solution

1. Step 1: Understand Express JSON parser behavior with limits

   If the JSON body exceeds the limit, Express throws a 'PayloadTooLargeError' and skips the route handler.

2. Step 2: Analyze the code flow

   The route handler sends 'Upload successful' only if parsing succeeds, which won't happen if size is too big.

3. Final Answer:

   The server throws an error and does not call the route handler -> Option A

4. Quick Check:

   Exceeding limit causes error, no handler call [OK]

Hint: Uploads over limit cause error, no success response [OK]

Common Mistakes:

• Assuming server truncates large JSON
• Thinking handler runs despite error
• Believing limit is ignored

4. Identify the error in this Express setup that tries to limit JSON body size to 2MB:

app.use(express.json({ limit: 2 * 1024 * 1024 }));

medium

A. The limit value should be a string like '2mb', not a number

B. The limit option is not supported by express.json()

C. The multiplication is incorrect; it should be 2 * 1000 * 1000

D. The limit should be set in bytes as a Buffer, not a number

Solution

1. Step 1: Check express.json() limit option type

   The 'limit' option expects a string with units like '2mb', not a raw number.

2. Step 2: Analyze the given code

   Passing a number causes Express to ignore or misinterpret the limit, so it should be '2mb'.

3. Final Answer:

   The limit value should be a string like '2mb', not a number -> Option A

4. Quick Check:

   Limit must be string with units, not number [OK]

Hint: Use string with units for limit, not number [OK]

Common Mistakes:

• Passing number instead of string for limit
• Misunderstanding unit conversion
• Thinking limit option is unsupported

5. You want to limit file uploads to 3MB using the multer middleware in Express. Which code snippet correctly sets this limit and handles errors to inform users when files are too large?

hard

A. const upload = multer({ limits: { fileSize: 3 * 1024 * 1024 } });
app.post('/upload', upload.single('file'), (req, res) => {
res.send('File uploaded');
});

B. const upload = multer({ limit: '3mb' });
app.post('/upload', upload.single('file'), (req, res) => {
res.send('File uploaded');
});

C. const upload = multer({ limits: { fileSize: 3 * 1024 * 1024 } });
app.post('/upload', (req, res) => {
upload.single('file')(req, res, err => {
if (err) return res.status(400).send('File too large');
res.send('File uploaded');
});
});

D. const upload = multer({ fileSizeLimit: 3 * 1024 * 1024 });
app.post('/upload', upload.single('file'), (req, res) => {
res.send('File uploaded');
});

Solution

1. Step 1: Set file size limit correctly in multer

   The correct option is 'limits: { fileSize: size_in_bytes }'. const upload = multer({ limits: { fileSize: 3 * 1024 * 1024 } }); app.post('/upload', (req, res) => { upload.single('file')(req, res, err => { if (err) return res.status(400).send('File too large'); res.send('File uploaded'); }); }); and A use this correctly.

2. Step 2: Handle errors to inform users

   const upload = multer({ limits: { fileSize: 3 * 1024 * 1024 } }); app.post('/upload', (req, res) => { upload.single('file')(req, res, err => { if (err) return res.status(400).send('File too large'); res.send('File uploaded'); }); }); wraps upload.single in route handler with error callback to catch file size errors and respond properly.

3. Step 3: Compare options

   const upload = multer({ limits: { fileSize: 3 * 1024 * 1024 } }); app.post('/upload', upload.single('file'), (req, res) => { res.send('File uploaded'); }); lacks error handling, B uses wrong option 'limit', D uses invalid 'fileSizeLimit'.

4. Final Answer:

   Option C correctly sets limit and handles errors to inform users -> Option C

5. Quick Check:

   Multer limits + error callback = const upload = multer({ limits: { fileSize: 3 * 1024 * 1024 } }); app.post('/upload', (req, res) => { upload.single('file')(req, res, err => { if (err) return res.status(400).send('File too large'); res.send('File uploaded'); }); }); [OK]

Hint: Use limits.fileSize and error callback to handle large files [OK]

Common Mistakes:

• Using wrong option names like limit or fileSizeLimit
• Not handling errors to inform users
• Assuming multer auto-handles file size errors