Single file upload in Express - Mini Project: Build & Apply

Single file upload

📖 Scenario: You are building a simple web server that allows users to upload one file at a time.This is useful for profile pictures, documents, or any single file submission.

🎯 Goal: Build an Express server that accepts a single file upload from a form and saves it to a folder on the server.

📋 What You'll Learn

Create an Express app with a POST route to handle file uploads

Use the multer middleware to process single file uploads

Save the uploaded file to a folder named uploads

Respond with a success message after upload

💡 Why This Matters

🌍 Real World

Single file uploads are common in web apps for profile pictures, documents, or attachments.

💼 Career

Backend developers often implement file upload endpoints using Express and multer in real projects.

1

Set up Express app and import multer

Create a file named app.js. Import express and multer. Initialize an Express app by writing const app = express().

Express

const express = require('express')
const multer = require('multer')

const app = express()
// Your code here

Need a hint?

Use require('express') and require('multer') to import the packages.

Then create the app with express().

2

Configure multer storage and upload variable

Create a multer storage configuration that saves files to a folder named uploads. Then create an upload variable using multer({ storage }).

Express

const express = require('express')
const multer = require('multer')

const app = express()

// Your code here

Need a hint?

Use multer.diskStorage to set destination and filename.

Destination should be the uploads folder.

Filename should use the original file name.

3

Create POST route to handle single file upload

Add a POST route at /upload that uses upload.single('file') middleware to handle a single file upload with the form field name file. Inside the route, send a response with res.send('File uploaded successfully').

Express

const express = require('express')
const multer = require('multer')

const app = express()

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads')
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname)
  }
})

const upload = multer({ storage })

// Your code here

Need a hint?

Use app.post with path /upload.

Use upload.single('file') as middleware.

Send a success message in the response.

4

Start the Express server on port 3000

Add code to start the Express server listening on port 3000 using app.listen(3000). Inside the listen callback, log 'Server started on port 3000'.

Express

const express = require('express')
const multer = require('multer')

const app = express()

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads')
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname)
  }
})

const upload = multer({ storage })

app.post('/upload', upload.single('file'), (req, res) => {
  res.send('File uploaded successfully')
})

// Your code here

Need a hint?

Use app.listen(3000, () => { ... }) to start the server.

Inside the callback, log a message to confirm the server is running.