Express.js File Uploads (Multer)

Imagine users want to upload profile pictures, product images, or documents to your application. Handling file uploads is a common requirement, and Express makes it easy with **Multer** – a middleware for handling `multipart/form-data`, which is used for file uploads.

What is Multer?

Multer is a Node.js middleware for handling `multipart/form-data`, which is primarily used for uploading files. It adds a `file` or `files` object to the request object, making it easy to access uploaded files.

Think of Multer as a post office clerk who receives packages (files), inspects them, and puts them in the right storage location.

Installation

npm install multer

Basic File Upload

HTML Form

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="avatar" accept="image/*">
  <button type="submit">Upload</button>
</form>

Express Server

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

const app = express();

<!-- Configure storage -->
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); <!-- Save files to uploads folder -->
  },
  filename: (req, file, cb) => {
    <!-- Create unique filename -->
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, uniqueSuffix + path.extname(file.originalname));
  }
});

const upload = multer({ storage: storage });

<!-- Single file upload -->
app.post('/upload', upload.single('avatar'), (req, res) => {
  try {
    if (!req.file) {
      return res.status(400).json({ error: 'No file uploaded' });
    }
    
    res.json({
      message: 'File uploaded successfully',
      file: {
        filename: req.file.filename,
        originalName: req.file.originalname,
        size: req.file.size,
        path: req.file.path
      }
    });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

File Filtering (Accept Only Images)

const fileFilter = (req, file, cb) => {
  <!-- Accept images only -->
  if (file.mimetype.startsWith('image/')) {
    cb(null, true);
  } else {
    cb(new Error('Only images are allowed'), false);
  }
};

const upload = multer({
  storage: storage,
  fileFilter: fileFilter,
  limits: { fileSize: 5 * 1024 * 1024 } <!-- 5MB max -->
});

Multiple File Uploads

<!-- Multiple files with same field name -->
app.post('/upload-multiple', upload.array('photos', 5), (req, res) => {
  if (!req.files || req.files.length === 0) {
    return res.status(400).json({ error: 'No files uploaded' });
  }
  
  res.json({
    message: `Uploaded ${req.files.length} files successfully`,
    files: req.files.map(f => ({ filename: f.filename, size: f.size }))
  });
});

<!-- Multiple files with different field names -->
const cpUpload = upload.fields([
  { name: 'avatar', maxCount: 1 },
  { name: 'gallery', maxCount: 8 }
]);

app.post('/profile', cpUpload, (req, res) => {
  console.log(req.files);
});

Error Handling for Multer

app.post('/upload', (req, res) => {
  upload.single('avatar')(req, res, (err) => {
    if (err instanceof multer.MulterError) {
      <!-- A Multer error occurred -->
      if (err.code === 'LIMIT_FILE_SIZE') {
        return res.status(400).json({ error: 'File too large' });
      }
    } else if (err) {
      <!-- Another error (like fileFilter) -->
      return res.status(400).json({ error: err.message });
    }
    
    <!-- Success -->
    res.json({ message: 'File uploaded', file: req.file });
  });
});

Serving Uploaded Files

Make uploaded files accessible via URL:

app.use('/uploads', express.static('uploads'));

<!-- Now file at uploads/abc123.jpg is accessible at: -->
<!-- http://localhost:3000/uploads/abc123.jpg -->

Two Minute Drill

Multer handles `multipart/form-data` for file uploads in Express.

Configure storage with `diskStorage` to control destination and filename.

Use `fileFilter` to restrict file types and `limits` to control file size.

Methods: `single()` for one file, `array()` for multiple with same field, `fields()` for different fields.

Always handle Multer errors properly and serve uploaded files via `express.static()`.

Take Quiz

Need more clarification?

Drop us an email at career@quipoinfotech.com

Welcome to Quipoin

Quipoin Menu

Express.js File Uploads (Multer)

Need more clarification?