Upload de fichiers avec Node.js et Multer : guide complet

mkdir upload-api && cd upload-api
npm init -y
npm install express multer@^2.2.0 file-type
mkdir uploads public

{
  "name": "upload-api",
  "type": "module",
  "scripts": {
    "dev": "node --watch server.js",
    "start": "node server.js"
  }
}

upload-api/
├── package.json
├── server.js          ← le serveur Express
├── upload.js          ← la configuration de Multer
├── uploads/           ← les fichiers reçus (hors du dossier public !)
└── public/
    └── index.html     ← la page d'envoi avec glisser-déposer

// server.js (version 1, pour comprendre)
import express from 'express';
import multer from 'multer';

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

// 'fichier' doit correspondre au name="fichier" du champ du formulaire
app.post('/api/upload', upload.single('fichier'), (req, res) => {
  console.log(req.file);  // informations sur le fichier
  console.log(req.body);  // champs texte du formulaire
  res.json({ message: 'Fichier reçu', fichier: req.file.filename });
});

app.listen(3000, () => console.log('API sur http://localhost:3000'));

curl -F "fichier=@photo.jpg" -F "titre=Vacances" http://localhost:3000/api/upload

{
  fieldname: 'fichier',
  originalname: 'photo.jpg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  destination: 'uploads/',
  filename: '3f2a9c1e8b7d6a5f4e3d2c1b0a998877',
  path: 'uploads/3f2a9c1e8b7d6a5f4e3d2c1b0a998877',
  size: 248137
}

// upload.js
import multer from 'multer';
import path from 'node:path';
import crypto from 'node:crypto';

const EXTENSIONS = {
  'image/jpeg': '.jpg',
  'image/png': '.png',
  'image/webp': '.webp',
  'application/pdf': '.pdf',
};

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, path.resolve('uploads'));
  },
  filename: (req, file, cb) => {
    // Nom aléatoire + extension déduite du type : on n'utilise JAMAIS le nom d'origine
    const nom = crypto.randomUUID() + EXTENSIONS[file.mimetype];
    cb(null, nom);
  },
});

// upload.js (suite)
const TYPES_AUTORISES = Object.keys(EXTENSIONS);

function fileFilter(req, file, cb) {
  if (TYPES_AUTORISES.includes(file.mimetype)) {
    cb(null, true);
  } else {
    const erreur = new multer.MulterError('LIMIT_UNEXPECTED_FILE', file.fieldname);
    erreur.message = 'Type de fichier non autorisé : ' + file.mimetype;
    cb(erreur);
  }
}

export const upload = multer({
  storage,
  fileFilter,
  limits: {
    fileSize: 5 * 1024 * 1024, // 5 Mo maximum par fichier
    files: 5,                  // 5 fichiers maximum par requête
    fields: 10,                // 10 champs texte maximum
    fieldSize: 100 * 1024,     // 100 Ko maximum par champ texte
    parts: 15,                 // total fichiers + champs
  },
});

app.post('/api/galerie', upload.array('photos', 5), (req, res) => {
  const fichiers = req.files.map(f => ({ nom: f.filename, taille: f.size }));
  res.status(201).json({ total: fichiers.length, fichiers });
});

// verifier.js
import { fileTypeFromFile } from 'file-type';
import fs from 'node:fs/promises';

const AUTORISES = new Set(['image/jpeg', 'image/png', 'image/webp', 'application/pdf']);

export async function verifierContenu(req, res, next) {
  const fichiers = req.file ? [req.file] : (req.files ?? []);
  try {
    for (const f of fichiers) {
      const type = await fileTypeFromFile(f.path);
      if (!type || !AUTORISES.has(type.mime) || type.mime !== f.mimetype) {
        // On supprime TOUS les fichiers de la requête, pas seulement le fautif
        await Promise.all(fichiers.map(x => fs.rm(x.path, { force: true })));
        return res.status(415).json({ erreur: `Contenu invalide pour « ${f.originalname} »` });
      }
    }
    next();
  } catch (erreur) {
    next(erreur);
  }
}

app.post('/api/upload', upload.single('fichier'), verifierContenu, (req, res) => {
  res.status(201).json({ fichier: req.file.filename, taille: req.file.size });
});

// server.js (en bas, après toutes les routes)
import multer from 'multer';

const MESSAGES = {
  LIMIT_FILE_SIZE: 'Fichier trop volumineux (5 Mo maximum).',
  LIMIT_FILE_COUNT: 'Trop de fichiers (5 maximum).',
  LIMIT_UNEXPECTED_FILE: 'Champ de fichier inattendu ou type non autorisé.',
  LIMIT_FIELD_COUNT: 'Trop de champs dans le formulaire.',
  LIMIT_PART_COUNT: 'Formulaire trop complexe.',
};

app.use((err, req, res, next) => {
  if (err instanceof multer.MulterError) {
    const statut = err.code === 'LIMIT_FILE_SIZE' ? 413 : 400;
    return res.status(statut).json({ erreur: MESSAGES[err.code] ?? err.message });
  }
  console.error(err);
  res.status(500).json({ erreur: 'Erreur interne du serveur.' });
});

// server.js
import express from 'express';
import multer from 'multer';
import path from 'node:path';
import { upload } from './upload.js';
import { verifierContenu } from './verifier.js';

const app = express();
app.use(express.static('public')); // la page d'envoi

app.post('/api/upload', upload.single('fichier'), verifierContenu, (req, res) => {
  if (!req.file) {
    return res.status(400).json({ erreur: 'Aucun fichier reçu.' });
  }
  res.status(201).json({
    id: req.file.filename,
    nomOrigine: req.file.originalname,
    taille: req.file.size,
    type: req.file.mimetype,
  });
});

app.post('/api/galerie', upload.array('photos', 5), verifierContenu, (req, res) => {
  res.status(201).json({ total: req.files.length, ids: req.files.map(f => f.filename) });
});

// Téléchargement contrôlé : on n'expose jamais le dossier uploads directement
app.get('/api/fichiers/:id', (req, res) => {
  const id = path.basename(req.params.id); // neutralise les « ../ »
  res.sendFile(path.resolve('uploads', id), {
    headers: { 'X-Content-Type-Options': 'nosniff' },
  }, err => {
    if (err) res.status(404).json({ erreur: 'Fichier introuvable.' });
  });
});

app.use((err, req, res, next) => {
  if (err instanceof multer.MulterError) {
    const statut = err.code === 'LIMIT_FILE_SIZE' ? 413 : 400;
    return res.status(statut).json({ erreur: err.message });
  }
  console.error(err);
  res.status(500).json({ erreur: 'Erreur interne du serveur.' });
});

app.listen(3000, () => console.log('API d’upload sur http://localhost:3000'));

<!-- public/index.html -->
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Envoi de fichiers</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 560px; margin: 40px auto; }
    #zone { border: 2px dashed #94a3b8; border-radius: 14px; padding: 40px; text-align: center; cursor: pointer; }
    #zone.survol { border-color: #2563eb; background: #eff6ff; }
    progress { width: 100%; height: 14px; margin-top: 16px; }
  </style>
</head>
<body>
  <h1>Envoyer un fichier</h1>
  <div id="zone">Glisse ton fichier ici ou clique pour le choisir
<small>JPG, PNG, WebP ou PDF · 5 Mo max</small></div>
  <input type="file" id="choix" accept=".jpg,.jpeg,.png,.webp,.pdf" hidden>
  <progress id="barre" value="0" max="100" hidden></progress>
  <p id="statut"></p>

  <script>
    const zone = document.getElementById('zone');
    const choix = document.getElementById('choix');
    const barre = document.getElementById('barre');
    const statut = document.getElementById('statut');

    zone.addEventListener('click', () => choix.click());
    choix.addEventListener('change', () => envoyer(choix.files[0]));
    zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('survol'); });
    zone.addEventListener('dragleave', () => zone.classList.remove('survol'));
    zone.addEventListener('drop', e => {
      e.preventDefault();
      zone.classList.remove('survol');
      envoyer(e.dataTransfer.files[0]);
    });

    function envoyer(fichier) {
      if (!fichier) return;
      if (fichier.size > 5 * 1024 * 1024) {
        statut.textContent = 'Fichier trop volumineux (5 Mo maximum).';
        return;
      }
      const donnees = new FormData();
      donnees.append('fichier', fichier);

      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/api/upload');
      barre.hidden = false;
      xhr.upload.onprogress = e => {
        if (e.lengthComputable) barre.value = Math.round((e.loaded / e.total) * 100);
      };
      xhr.onload = () => {
        const reponse = JSON.parse(xhr.responseText);
        statut.textContent = xhr.status === 201
          ? `✅ « ${reponse.nomOrigine} » envoyé (${Math.round(reponse.taille / 1024)} Ko)`
          : `❌ ${reponse.erreur}`;
      };
      xhr.onerror = () => { statut.textContent = '❌ Erreur réseau.'; };
      xhr.send(donnees);
    }
  </script>
</body>
</html>

import multer from 'multer';
import sharp from 'sharp'; // npm install sharp
import crypto from 'node:crypto';
import path from 'node:path';

const uploadMemoire = multer({
  storage: multer.memoryStorage(),
  limits: { fileSize: 5 * 1024 * 1024, files: 1 },
});

app.post('/api/avatar', uploadMemoire.single('avatar'), async (req, res, next) => {
  try {
    const nom = crypto.randomUUID() + '.webp';
    await sharp(req.file.buffer)
      .rotate()                         // respecte l'orientation EXIF
      .resize(256, 256, { fit: 'cover' })
      .webp({ quality: 85 })
      .toFile(path.resolve('uploads', nom)); // les métadonnées EXIF (GPS…) ne sont pas recopiées
    res.status(201).json({ avatar: nom });
  } catch (erreur) {
    next(erreur);
  }
});