Multer Multiple File Upload: Handling Multiple Files

Uploading multiple files is a common requirement in modern web applications. Multer makes it simple by providing built-in middleware to handle multiple file uploads efficiently.

How to upload multiple files using Multer?

To upload multiple files:

1. Configure Multer
2. Use upload.array(fieldName, maxCount)
3. Access uploaded files using req.files

What is upload.array() in Multer?

upload.array(fieldName, maxCount) is a Multer middleware used to:

• Accept multiple files from the same field
• Limit the number of files uploaded
• Store files based on your configuration

Example:

app.post("/upload", upload.array("photos", 5), (req, res) => {
  res.send("Multiple files uploaded");
});

• "photos" → field name
• 5 → maximum number of files allowed

How to access multiple files using req.files?

When using upload.array(), Multer attaches uploaded files to:

req.files

Example:

app.post("/upload", upload.array("photos", 5), (req, res) => {
  console.log(req.files);
  res.send("Files received");
});

req.files is an array of file objects.

What fields are available in req.files?

Each file object inside req.files contains:

[
  {
    fieldname: "photos",
    originalname: "image1.png",
    encoding: "7bit",
    mimetype: "image/png",
    destination: "uploads/",
    filename: "1710000000000-image1.png",
    path: "uploads/1710000000000-image1.png",
    size: 12345
  }
]

How to set max file count in Multer?

You can limit the number of uploaded files using the second parameter of upload.array():

upload.array("photos", 3)

This ensures:

• Only up to 3 files are accepted
• Extra files are rejected automatically

How to handle multiple files with same field name?

When multiple files share the same field name, simply use upload.array() with that field name.

Backend:

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

Frontend (HTML form):

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="photos" multiple />
  <button type="submit">Upload</button>
</form>

• The multiple attribute allows selecting multiple files
• All files are sent under the same field name "photos"

Complete Example

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: "Multiple files uploaded successfully",
    files: req.files,
  });
});

app.listen(3000, () => {
  console.log("Server running on port 3000");
});

Key Takeaways

• Use upload.array() for multiple file uploads
• Access files using req.files (array)
• Set max file count to control uploads
• Use the same field name for multiple files