How to Upload Multiple Files in Express: Simple Guide

To upload multiple files in Express, use the multer middleware with the array() method specifying the field name. This handles multiple files sent under the same field in a form and saves them to your server.

Syntax

Use multer middleware with upload.array(fieldname, maxCount) to handle multiple files uploaded under the same form field.

• fieldname: The name attribute of the file input in the HTML form.
• maxCount: Optional maximum number of files to accept.
• Files are accessible in req.files as an array.

javascript

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.array('photos', 5), (req, res) => {
  // req.files is an array of files
  res.send('Files uploaded');
});

Example

This example shows a simple Express server that accepts multiple files uploaded under the form field named photos. It saves files to the uploads/ folder and returns a JSON response with file details.

javascript

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

const app = express();
const upload = multer({ dest: path.join(__dirname, 'uploads') });

app.post('/upload', upload.array('photos', 10), (req, res) => {
  if (!req.files || req.files.length === 0) {
    return res.status(400).json({ message: 'No files uploaded' });
  }
  res.json({
    message: 'Files uploaded successfully',
    files: req.files.map(file => ({
      originalName: file.originalname,
      storedName: file.filename,
      size: file.size
    }))
  });
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

Output

Server running on http://localhost:3000

POST /upload with multiple files under 'photos' returns JSON with file info.

Common Pitfalls

• Not using upload.array() but upload.single() when uploading multiple files causes only one file to be processed.
• Mismatch between the form field name and the name used in upload.array() leads to empty req.files.
• Not setting enctype="multipart/form-data" in the HTML form prevents files from being sent properly.
• Forgetting to create the upload directory or lacking write permissions causes errors.

javascript

/* Wrong: Using single() for multiple files */
app.post('/upload', upload.single('photos'), (req, res) => {
  // req.file is a single file, not an array
  res.send('Only one file processed');
});

/* Right: Use array() for multiple files */
app.post('/upload', upload.array('photos', 5), (req, res) => {
  res.send('Multiple files processed');
});

Quick Reference

• Use multer middleware to handle file uploads in Express.
• Use upload.array('fieldname', maxCount) for multiple files.
• Access uploaded files via req.files array.
• Ensure HTML form uses enctype="multipart/form-data".
• Set proper upload destination folder with write permissions.

Key Takeaways

Use multer's upload.array() method to handle multiple file uploads under the same form field.

Access uploaded files in Express via req.files as an array.

Ensure the HTML form has enctype="multipart/form-data" to send files correctly.

Match the field name in upload.array() with the file input's name attribute.

Create and set proper permissions for the upload folder before saving files.