Multiple file uploads in Express - Performance & Optimization

Performance: Multiple file uploads

MEDIUM IMPACT

This affects the server response time and client-side rendering speed during file upload processes.

Uploading multiple files from a client to an Express server

Express

app.post('/upload', async (req, res) => {
  const files = req.files;
  await Promise.all(files.map(file => fs.promises.writeFile(`uploads/${file.name}`, file.data)));
  res.send('Files uploaded');
});

Asynchronous parallel file writes prevent blocking, improving server responsiveness.

📈 Performance GainNon-blocking parallel writes reduce INP and server response delay.

Uploading multiple files from a client to an Express server

Express

app.post('/upload', (req, res) => {
  const files = req.files;
  files.forEach(file => {
    // Synchronously save each file one by one
    fs.writeFileSync(`uploads/${file.name}`, file.data);
  });
  res.send('Files uploaded');
});

Synchronous file writes block the event loop, causing slow response and poor input responsiveness.

📉 Performance CostBlocks server event loop during each file write, increasing INP and response time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Synchronous file writes in upload handler	N/A	N/A	Blocks server response causing delayed client paint	[X] Bad
Asynchronous parallel file writes with Promise.all	N/A	N/A	Non-blocking server response enables faster client paint	[OK] Good

Rendering Pipeline

Multiple file uploads impact the server's ability to respond quickly, which affects the client's interaction to next paint (INP). Blocking operations delay server responses, causing slower UI updates.

→Server Processing

→Network Transfer

→Client Rendering

⚠️ BottleneckServer Processing due to synchronous/blocking file operations

Core Web Vital Affected

INP

This affects the server response time and client-side rendering speed during file upload processes.

Optimization Tips

1Avoid synchronous file operations in upload handlers to prevent blocking.

2Use asynchronous parallel file writes to improve server responsiveness.

3Monitor server response times in DevTools Network tab to detect blocking.

Performance Quiz - 3 Questions

What is the main performance problem with synchronous file writes during multiple file uploads in Express?

A They cause layout shifts on the client side.

B They block the server event loop, delaying responses.

C They increase the bundle size of the client code.

D They reduce the number of files that can be uploaded.

DevTools: Network

How to check: Open DevTools, go to Network tab, upload multiple files, and observe the request duration and timing waterfall.

What to look for: Look for long blocking times or delayed server response indicating synchronous blocking; shorter, parallel requests indicate good performance.