Handling Multiple File Uploads

1. Introduction

This tutorial aims to provide a comprehensive guide on handling multiple file uploads using Multer in Express.js. By following this tutorial, you will learn how to configure Multer to handle multiple files, process them in your routes, and gain a good understanding of how file uploads work in a server-side setting.

You will learn:
- How to set up Multer for multiple file uploads
- How to process uploaded files in your Express.js routes

Prerequisites:
- Basic knowledge of JavaScript and Node.js
- Familiarity with Express.js
- Installed Node.js and npm on your computer

2. Step-by-Step Guide

Multer is a node.js middleware for handling multipart/form-data, which is primarily used for file uploads. It is built on top of busboy for maximum efficiency.

Setting up Multer

Install Multer via npm:

npm install --save multer

Require Multer and set up storage location and filename:

const multer = require('multer');

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: storage })

Handling Multiple Files

To handle multiple files, use the .array(fieldname[, maxCount]) method. Replace fieldname with the name attribute of the file input fields. maxCount is the maximum number of files to accept. If omitted, any number of files can be uploaded.

app.post('/upload', upload.array('myFiles', 12), (req, res, next) => {
  const files = req.files;
  if (!files) {
    const error = new Error('Please choose files')
    error.httpStatusCode = 400
    return next(error)
  }

  res.send(files)
})

3. Code Examples

Example: Uploading multiple files

// server.js
const express = require('express');
const multer = require('multer');
const app = express();

// configure storage
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: storage });

// route to handle multiple files upload
app.post('/upload', upload.array('myFiles', 12), (req, res, next) => {
  const files = req.files;
  if (!files) {
    const error = new Error('Please choose files');
    error.httpStatusCode = 400;
    return next(error);
  }

  res.send(files);
});

app.listen(3000, () => console.log('Server started on port 3000'));

In this code snippet, we've set up an Express server that listens on port 3000. We've defined a POST route '/upload' that uses Multer's .array() method to handle multiple file uploads.

4. Summary

In this tutorial, you've learned how to set up Multer for handling multiple file uploads in an Express.js application. The next step would be to look into ways of validating the uploaded files (checking file types and sizes) and how to handle file upload errors.

Additional resources:
- Multer Documentation
- Express.js Documentation

5. Practice Exercises

1. Exercise: Set up a new Express.js server, configure Multer for file uploads, and create a route to handle single file uploads.
   Solution: Refer to the code examples in this tutorial, but use the .single(fieldname) method instead of .array().

2. Exercise: Modify the server you created in Exercise 1 to handle multiple file uploads. Limit the number of files that can be uploaded to 5.
   Solution: Use the .array(fieldname[, maxCount]) method and set maxCount to 5.

3. Exercise: Add error handling to the file upload route. If the user does not upload any files, send a 400 error with a message 'Please choose files'.
   Solution: Add an if statement after declaring the files constant to check if any files were uploaded. If not, create a new Error object and pass it to the next function.

Remember, practice is the key to mastering any concept. Happy coding!