Why file upload handling matters in Express - See It in Action

Why file upload handling matters

📖 Scenario: You are building a simple web server using Express.js that allows users to upload profile pictures. Handling file uploads correctly is important to keep the server safe and working well.

🎯 Goal: Create an Express.js server that accepts a file upload from a user and saves it safely on the server.

📋 What You'll Learn

Create an Express app with a POST route for file uploads

Use the multer middleware to handle file uploads

Configure multer to save files to a folder named uploads

Add basic file size limit configuration

Respond with a success message after upload

💡 Why This Matters

🌍 Real World

File upload handling is essential for websites that allow users to share images, documents, or other files safely and efficiently.

💼 Career

Understanding file upload handling is important for backend developers to build secure and user-friendly web applications.

1

Set up Express app and import multer

Create a file named app.js. Import express and multer. Create 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 to import both express and multer. Then create the app with express().

2

Configure multer storage and file size limit

Create a multer storage configuration that saves files to a folder named uploads. Then create an upload middleware using multer({ storage, limits: { fileSize: 1000000 } }) to limit file size to 1MB.

Express

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

const app = express()

// Configure multer storage and limits
// Your code here

Need a hint?

Use multer.diskStorage to set the destination folder and filename. Then create upload with the storage and a 1MB file size limit.

3

Create POST route to handle file upload

Add a POST route at /upload that uses the upload.single('profilePic') middleware to accept a single file named profilePic. Inside the route handler, send a JSON response with { message: '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: storage, limits: { fileSize: 1000000 } })

// Add POST /upload route here
// Your code here

Need a hint?

Use app.post with the path /upload. Use upload.single('profilePic') as middleware. Send a JSON success message in the response.

4

Start the Express server

Add code to start the Express server on port 3000 by calling 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: storage, limits: { fileSize: 1000000 } })

app.post('/upload', upload.single('profilePic'), (req, res) => {
  res.json({ message: 'File uploaded successfully' })
})

// Start the server on port 3000
// Your code here

Need a hint?

Use app.listen with port 3000 and add a callback that logs the server start message.