Single file upload in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when uploading a file with this Express setup?

Consider this Express route using multer middleware for single file upload:

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
const app = express();

app.post('/upload', upload.single('file'), (req, res) => {
  res.send(req.file.originalname);
});

If a client uploads a file named photo.png under the form field file, what will the server respond with?

Express

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
const app = express();

app.post('/upload', upload.single('file'), (req, res) => {
  res.send(req.file.originalname);
});

A The path where the file is saved on the server

B The string 'photo.png'

C An error because req.file is undefined

D The string 'file'

💡 Hint

Look at what req.file.originalname represents in multer.

The multer middleware adds a file object to req when using upload.single('file'). The originalname property contains the original name of the uploaded file from the client. So the server responds with 'photo.png'.

📝 Syntax

intermediate

Which option correctly sets up multer for single file upload in Express?

Choose the correct code snippet to configure multer for handling a single file upload with field name avatar:

A const upload = multer({ dest: 'uploads/' }); app.post('/profile', upload.single('avatar'), (req, res) => { res.send('Uploaded'); });

B const upload = multer({ dest: 'uploads/' }); app.post('/profile', upload.array('avatar'), (req, res) => { res.send('Uploaded'); });

C const upload = multer({ dest: 'uploads/' }); app.post('/profile', upload.fields([{ name: 'avatar' }]), (req, res) => { res.send('Uploaded'); });

D const upload = multer({ dest: 'uploads/' }); app.post('/profile', upload.single(), (req, res) => { res.send('Uploaded'); });

💡 Hint

Remember the method to handle a single file upload requires the field name as an argument.

upload.single('avatar') is the correct method to handle a single file upload with the field name 'avatar'. Other methods like array or fields are for multiple files or multiple fields.

🔧 Debug

advanced

Why does this Express file upload code cause an error?

Examine this code snippet:

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
const app = express();

app.post('/upload', (req, res) => {
  console.log(req.file);
  res.send('Done');
});

When a file is uploaded, req.file is undefined. Why?

Express

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
const app = express();

app.post('/upload', (req, res) => {
  console.log(req.file);
  res.send('Done');
});

A Because the destination folder 'uploads/' does not exist

B Because the file field name is missing in the form data

C Because the multer middleware is not used in the route to process the file

D Because Express does not support file uploads

💡 Hint

Check if the middleware that processes the file is applied to the route.

The multer middleware must be used in the route handler to process the file and populate req.file. Without upload.single('fieldname') or similar middleware, req.file remains undefined.

❓ state_output

advanced

What is the value of req.file after uploading a file?

Given this Express route:

app.post('/upload', upload.single('document'), (req, res) => {
  res.json(req.file);
});

If a user uploads a file named report.pdf, what key will NOT be present in req.file?

Express

app.post('/upload', upload.single('document'), (req, res) => {
  res.json(req.file);
});

A originalname

B filename

C path

D buffer

💡 Hint

Consider multer's default storage when using dest option.

When multer is configured with dest, it stores files on disk and req.file contains file info like originalname, filename, and path. The buffer property is only present if using memory storage.

🧠 Conceptual

expert

Which option best explains why multer's single file upload middleware must be placed before the route handler?

In Express, why must upload.single('file') be used as middleware before the route handler function?

A Because multer middleware parses the incoming multipart/form-data and populates req.file before the handler runs

B Because Express requires all middleware to be declared globally before any routes

C Because the route handler cannot access req.body without multer middleware

D Because multer middleware automatically sends the response and prevents the handler from running

💡 Hint

Think about what happens to the request data before your route code runs.

Multer middleware processes the multipart/form-data request, extracts the file, and adds it to req.file. This must happen before the route handler accesses req.file. Otherwise, the handler sees undefined.