Bird
Raised Fist0
Expressframework~20 mins

Single file upload in Express - Practice Problems & Coding Challenges

Choose your learning style10 modes available

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Challenge - 5 Problems
🎖️
Single File Upload Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
component_behavior
intermediate
2:00remaining
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);
});
AThe path where the file is saved on the server
BThe string 'photo.png'
CAn error because req.file is undefined
DThe string 'file'
Attempts:
2 left
💡 Hint

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

📝 Syntax
intermediate
2:00remaining
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:

Aconst upload = multer({ dest: 'uploads/' }); app.post('/profile', upload.single('avatar'), (req, res) => { res.send('Uploaded'); });
Bconst upload = multer({ dest: 'uploads/' }); app.post('/profile', upload.array('avatar'), (req, res) => { res.send('Uploaded'); });
Cconst upload = multer({ dest: 'uploads/' }); app.post('/profile', upload.fields([{ name: 'avatar' }]), (req, res) => { res.send('Uploaded'); });
Dconst upload = multer({ dest: 'uploads/' }); app.post('/profile', upload.single(), (req, res) => { res.send('Uploaded'); });
Attempts:
2 left
💡 Hint

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

🔧 Debug
advanced
2:00remaining
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');
});
ABecause the destination folder 'uploads/' does not exist
BBecause the file field name is missing in the form data
CBecause the multer middleware is not used in the route to process the file
DBecause Express does not support file uploads
Attempts:
2 left
💡 Hint

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

state_output
advanced
2:00remaining
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);
});
Aoriginalname
Bfilename
Cpath
Dbuffer
Attempts:
2 left
💡 Hint

Consider multer's default storage when using dest option.

🧠 Conceptual
expert
3:00remaining
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?

ABecause multer middleware parses the incoming multipart/form-data and populates req.file before the handler runs
BBecause Express requires all middleware to be declared globally before any routes
CBecause the route handler cannot access req.body without multer middleware
DBecause multer middleware automatically sends the response and prevents the handler from running
Attempts:
2 left
💡 Hint

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

Practice

(1/5)
1. What does upload.single('file') do in an Express app using multer?
easy
A. Uploads multiple files with the form field name 'file'.
B. Validates the file type without uploading.
C. Uploads a single file but does not save it.
D. Handles uploading a single file with the form field name 'file'.

Solution

  1. Step 1: Understand multer's single file upload

    The method upload.single('file') tells multer to accept one file with the field name 'file' from the form.
  2. Step 2: Confirm behavior of single file upload

    This middleware processes the file and attaches its info to req.file, enabling access in the route handler.
  3. Final Answer:

    Handles uploading a single file with the form field name 'file'. -> Option D
  4. Quick Check:

    upload.single('file') = single file upload [OK]
Hint: Remember single() is for one file with given field name [OK]
Common Mistakes:
  • Confusing single() with array() for multiple files
  • Thinking it uploads files without saving
  • Assuming it validates file type automatically
2. Which of the following is the correct syntax to set up multer for single file upload with field name 'avatar'?
easy
A. app.post('/upload', multer.single('avatar'), (req, res) => { ... })
B. app.post('/upload', upload.single('avatar'), (req, res) => { ... })
C. app.post('/upload', multer.upload.single('avatar'), (req, res) => { ... })
D. app.post('/upload', upload.single.avatar(), (req, res) => { ... })

Solution

  1. Step 1: Recognize multer setup pattern

    You first create an upload instance with multer, e.g., const upload = multer({ dest: 'uploads/' }). Then use upload.single('avatar') in route.
  2. Step 2: Identify correct usage in route

    The correct syntax is app.post('/upload', upload.single('avatar'), (req, res) => { ... }). app.post('/upload', upload.single('avatar'), (req, res) => { ... }) matches this.
  3. Final Answer:

    app.post('/upload', upload.single('avatar'), (req, res) => { ... }) -> Option B
  4. Quick Check:

    upload.single('fieldName') = correct syntax [OK]
Hint: Use upload instance, then call single('fieldName') [OK]
Common Mistakes:
  • Calling multer.single() directly without creating upload
  • Using dot notation like single.avatar()
  • Using multer.upload which does not exist
3. Given this Express route using multer:
const upload = multer({ dest: 'uploads/' });
app.post('/profile', upload.single('photo'), (req, res) => {
  res.send(req.file.originalname);
});
What will the server respond with after uploading a file named 'mypic.png'?
medium
A. Undefined
B. The saved filename in 'uploads/' folder
C. 'mypic.png'
D. An error message

Solution

  1. Step 1: Understand req.file properties

    When multer saves a file, req.file contains info including originalname which is the name of the file on the user's computer.
  2. Step 2: Check what is sent in response

    The route sends req.file.originalname, so the response will be the original filename, 'mypic.png'.
  3. Final Answer:

    'mypic.png' -> Option C
  4. Quick Check:

    req.file.originalname = original filename [OK]
Hint: req.file.originalname holds the uploaded file's original name [OK]
Common Mistakes:
  • Confusing originalname with filename (saved name)
  • Expecting req.file to be undefined
  • Assuming response sends saved file path
4. What is wrong with this Express route for single file upload?
const upload = multer({ dest: 'uploads/' });
app.post('/upload', (req, res) => {
  upload.single('file');
  res.send('File uploaded');
});
medium
A. upload.single('file') is not called as middleware, so file is not processed.
B. The destination folder 'uploads/' is missing.
C. The route should use upload.array() for single file.
D. res.send() must be called before upload.single().

Solution

  1. Step 1: Check how multer middleware is used

    The method upload.single('file') must be passed as middleware in the route definition, not just called inside the handler.
  2. Step 2: Identify the mistake in route setup

    Here, upload.single('file') is called but not used as middleware, so multer never processes the file.
  3. Final Answer:

    upload.single('file') is not called as middleware, so file is not processed. -> Option A
  4. Quick Check:

    Use upload.single() as middleware in route [OK]
Hint: Pass upload.single() as middleware, not call inside handler [OK]
Common Mistakes:
  • Calling upload.single() inside route handler instead of middleware
  • Confusing upload.single() with upload.array()
  • Ignoring multer setup before route
5. You want to customize the filename of uploaded files to include the current timestamp before the original name. Which multer storage option correctly achieves this?
hard
A. const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, 'uploads/'); }, filename: (req, file, cb) => { cb(null, Date.now() + '-' + file.originalname); } });
B. const storage = multer.diskStorage({ destination: (req, file) => 'uploads/', filename: (req, file, cb) => { cb(null, file.originalname); } });
C. const storage = multer.diskStorage({ destination: 'uploads/', filename: (file, cb) => { cb(null, Date.now() + '-' + file.originalname); } });
D. const storage = multer.diskStorage({ destination: 'uploads/', filename: (req, file) => { cb(null, Date.now() + '-' + file.originalname); } });

Solution

  1. Step 1: Understand multer.diskStorage parameters

    The destination can be a string or a function with signature (req, file, cb). The filename must be a function with (req, file, cb).
  2. Step 2: Check each option for correct function signatures

    const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, 'uploads/'); }, filename: (req, file, cb) => { cb(null, Date.now() + '-' + file.originalname); } }); correctly uses functions for both destination and filename, and sets filename to timestamp + original name.
  3. Final Answer:

    const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, 'uploads/'); }, filename: (req, file, cb) => { cb(null, Date.now() + '-' + file.originalname); } }); -> Option A
  4. Quick Check:

    Use functions with (req, file, cb) for storage options [OK]
Hint: Use functions with (req, file, cb) to customize storage [OK]
Common Mistakes:
  • Passing destination as string but filename as function missing req
  • Wrong function parameters in filename or destination
  • Not adding timestamp in filename callback