Multer middleware setup in Express - Mini Project: Build & Apply

Multer middleware setup

📖 Scenario: You are building a simple Express server that accepts file uploads from users. To handle file uploads safely and easily, you will use the multer middleware.This project will guide you step-by-step to set up multer in your Express app.

🎯 Goal: Build an Express server with multer middleware configured to accept single file uploads under the field name profilePic.

📋 What You'll Learn

Create an Express app instance

Import and configure multer middleware with a destination folder

Use multer middleware in a POST route to handle single file upload with field name 'profilePic'

Send a success response after file upload

💡 Why This Matters

🌍 Real World

File uploads are common in web apps for user profile pictures, documents, or media. Multer helps handle these uploads safely and easily.

💼 Career

Backend developers often need to implement file upload features using Express and multer in real projects.

1

Create Express app and import multer

Write code to import express and multer modules, then create an Express app instance called app.

Express

// Import express and multer
// Create an Express app instance called app
// Your code here

Need a hint?

Use require('express') and require('multer') to import modules. Then call express() to create the app.

2

Configure multer storage destination

Create a multer storage configuration that saves uploaded files to a folder named uploads/. Then create a multer instance called upload using this storage.

Express

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

const app = express();

// Configure multer storage to save files in 'uploads/' folder
// Create multer instance called upload
// Your code here

Need a hint?

Use multer.diskStorage to set the destination folder. Then pass this storage to multer() to create the upload middleware.

3

Add POST route with multer middleware

Add a POST route at /upload that uses the upload.single('profilePic') middleware to handle a single file upload with field name profilePic. The route handler should 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 });

// Add POST route '/upload' using upload.single('profilePic') middleware
// Send JSON response { message: 'File uploaded successfully' }
// Your code here

Need a hint?

Use app.post with the path '/upload'. Add upload.single('profilePic') as middleware. Then send a JSON response inside the handler.

4

Start the Express server

Add code to start the Express server listening on port 3000. Use app.listen with port 3000 and a callback function.

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 });

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

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

Need a hint?

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