Single file upload in Express - Step-by-Step Execution

Concept Flow - Single file upload

Client sends POST request with file

↓

Express receives request

↓

Multer middleware processes file

↓

File saved to server storage

↓

Route handler sends response

↓

Client receives confirmation

The client sends a file in a POST request, Express uses Multer middleware to handle and save the file, then responds to the client.

Execution Sample

Express

import express from 'express';
import multer from 'multer';
const upload = multer({ dest: 'uploads/' });
const app = express();
app.post('/upload', upload.single('file'), (req, res) => {
  res.send('File uploaded');
});

This code sets up an Express server with Multer to accept a single file upload under the field name 'file' and respond with a confirmation.

Execution Table

Step	Action	Request State	File Handling	Response
1	Client sends POST /upload with file field	Request with file data	No file processed yet	No response yet
2	Express receives request	Request received	No file processed yet	No response yet
3	Multer middleware runs	Request with file data	File saved to 'uploads/' folder	No response yet
4	Route handler runs	Request with file info in req.file	File saved	Prepare response
5	Response sent	Request handled	File saved	Response: 'File uploaded' sent
6	Client receives response	Request complete	File saved	Client sees confirmation message

💡 Process ends after response is sent and client receives confirmation.

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
req.file	undefined	{ originalname, filename, path, ... }	{ originalname, filename, path, ... }	{ originalname, filename, path, ... }
response	none	none	prepared	sent

Key Moments - 2 Insights

Why is req.file undefined before Multer runs?

Because Multer middleware processes the incoming file and adds req.file. Before it runs, Express has not parsed the file data yet (see execution_table step 2 and 3).

What happens if the field name in upload.single() does not match the form field?

Multer will not find the file in the request, so req.file will be undefined and no file will be saved (see variable_tracker req.file after step 3).

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what happens to the file?

A The file is deleted

B The file is sent back to the client

C The file is saved to the server storage

D The file is ignored

💡 Hint

Check the 'File Handling' column at step 3 in execution_table

At which step does req.file become defined with file info?

A Step 2

B Step 3

C Step 1

D Step 5

💡 Hint

Look at variable_tracker for req.file changes and execution_table steps

If the client sends the file field named 'photo' but upload.single('file') is used, what will happen?

A req.file will be undefined and no file saved

B Server will crash

C File will be saved correctly

D File will be saved with a different name

💡 Hint

Refer to key_moments about field name matching and variable_tracker req.file

Concept Snapshot

Single file upload in Express:
- Use Multer middleware with upload.single('fieldname')
- Multer saves file to server and adds info to req.file
- Route handler accesses req.file to confirm upload
- Client sends POST with form-data including file
- Server responds after saving file
- Field name in upload.single() must match form field

Full Transcript

This visual execution shows how Express handles a single file upload using Multer middleware. The client sends a POST request with a file under a specific field name. Express receives the request and passes it to Multer, which processes and saves the file to a server folder. Multer then adds file information to req.file. The route handler accesses req.file and sends a confirmation response back to the client. The process ends when the client receives the confirmation. Key points include the importance of matching the field name in upload.single() with the form field name, and understanding that req.file is undefined before Multer processes the file.