javascript 51 lines · 7 steps

Safe image uploads with Multer in Express

A hardened Express upload route that renames files, caps their size and count, and rejects non-image types.

Explained by highlit
Express Intermediate file-upload multer validation error-handling security
1const express = require('express');
2const multer = require('multer');
3const path = require('path');
4const crypto = require('crypto');
5 
6const router = express.Router();
7 
8const ALLOWED_MIME = new Set(['image/jpeg', 'image/png', 'image/webp']);
9 
10const storage = multer.diskStorage({
11 destination: (req, file, cb) => cb(null, path.join(__dirname, '../uploads')),
12 filename: (req, file, cb) => {
13 const unique = crypto.randomBytes(16).toString('hex');
14 cb(null, `${unique}${path.extname(file.originalname).toLowerCase()}`);
15 },
16});
17 
18const upload = multer({
19 storage,
20 limits: { fileSize: 5 * 1024 * 1024, files: 4 },
21 fileFilter: (req, file, cb) => {
22 if (!ALLOWED_MIME.has(file.mimetype)) {
23 return cb(new multer.MulterError('LIMIT_UNEXPECTED_FILE', file.fieldname));
24 }
25 cb(null, true);
26 },
27});
28 
29router.post('/avatars', upload.array('photos', 4), (req, res) => {
30 if (!req.files || req.files.length === 0) {
31 return res.status(400).json({ error: 'No files uploaded' });
32 }
33 
34 const uploaded = req.files.map((f) => ({
35 filename: f.filename,
36 size: f.size,
37 url: `/uploads/${f.filename}`,
38 }));
39 
40 res.status(201).json({ uploaded });
41});
42 
43router.use((err, req, res, next) => {
44 if (err instanceof multer.MulterError) {
45 const status = err.code === 'LIMIT_FILE_SIZE' ? 413 : 400;
46 return res.status(status).json({ error: err.message, field: err.field });
47 }
48 next(err);
49});
50 
51module.exports = router;
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Generating random filenames avoids collisions and stops user-controlled paths from leaking into disk.
  2. 2Enforce size, count, and MIME limits at the middleware layer so bad requests never reach your handler.
  3. 3A dedicated Multer error middleware turns library failures into clean, typed HTTP responses.

Related explainers

javascript 
export async function compressImage(file, { maxWidth = 1600, maxHeight = 1600, quality = 0.8, mimeType = 'image/jpeg' } = {}) {
  const bitmap = await createImageBitmap(file);
 
  let { width, height } = bitmap;

Compressing images in the browser with canvas

canvas image-processing promises
Intermediate 7 steps
go 
package email
 
import (
	"errors"

Normalizing and deduping email addresses in Go

validation normalization deduplication
Intermediate 8 steps
php 
<?php
 
namespace App\Http\Requests;
 

A validated date-range value object in PHP

value-object validation immutability
Intermediate 7 steps
rust 
use std::collections::VecDeque;
 
#[derive(Debug)]
pub struct Hunk {

Applying a diff hunk in Rust

enums error-handling pattern-matching
Intermediate 8 steps
javascript 
const express = require('express');
const jwt = require('jsonwebtoken');
const crypto = require('crypto');
 

Refresh token rotation in Express

jwt token-rotation authentication
Advanced 9 steps
go 
package config
 
import (
	"fmt"

Parsing timeout config in Go

configuration validation error-wrapping
Intermediate 7 steps

Share this explainer

Here's the card — post it anywhere.

Safe image uploads with Multer in Express — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code