Multiple file uploads in Express - Mini Project: Build & Apply

Multiple file uploads

📖 Scenario: You are building a simple Express server that allows users to upload multiple files at once. This is useful for applications like photo galleries or document management where users need to send several files in one go.

🎯 Goal: Create an Express server that accepts multiple file uploads using the multer middleware. You will set up the data structure, configure multer for multiple files, write the route to handle uploads, and finalize the server to listen on a port.

📋 What You'll Learn

Create an Express app instance

Configure multer to accept multiple files with the field name 'photos'

Write a POST route '/upload' that handles multiple file uploads

Start the Express server on port 3000

💡 Why This Matters

🌍 Real World

Many web applications need to let users upload multiple files at once, such as photo albums, resumes, or project documents.

💼 Career

Understanding how to handle multiple file uploads is a common requirement for backend developers working with Node.js and Express.

1

DATA SETUP: Create Express app and import multer

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

Express

// Your code here to import express and multer, and create app

Need a hint?

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

2

CONFIGURATION: Set up multer storage and upload handler

Create a multer storage configuration using multer.diskStorage() 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 to configure multer storage and upload

Need a hint?

Use multer.diskStorage() to set destination and filename. Then pass this storage to multer().

3

CORE LOGIC: Create POST route to handle multiple file uploads

Add a POST route at /upload that uses upload.array('photos', 5) middleware to accept up to 5 files with the field name photos. Inside the route handler, send a JSON response with { message: 'Files 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, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({ storage });

// Your code here to add POST /upload route with upload.array('photos', 5)

Need a hint?

Use app.post with upload.array('photos', 5) middleware and send a JSON response inside the handler.

4

COMPLETION: Start the Express server on port 3000

Add code to make the Express app listen on port 3000 and log 'Server started on port 3000' when running.

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, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({ storage });

app.post('/upload', upload.array('photos', 5), (req, res) => {
  res.json({ message: 'Files uploaded successfully' });
});

// Your code here to start server on port 3000

Need a hint?

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