Gérer l’upload de fichiers avec Node.js et Express

Par adelaa, 27 février, 2025
Node.js

Introduction

Dans le développement backend, il est courant de devoir permettre aux utilisateurs d’envoyer des fichiers (images, documents, vidéos, etc.). Que ce soit pour une photo de profil, un CV ou une pièce jointe, la gestion des fichiers est une fonctionnalité essentielle pour de nombreuses applications web.

Dans cet article, nous allons voir comment gérer l’upload de fichiers avec Node.js et Express, en utilisant Multer, une bibliothèque conçue pour traiter les fichiers envoyés via des formulaires HTML.

1. Pourquoi utiliser Multer pour l’upload de fichiers ?

Node.js ne gère pas nativement l’upload de fichiers. Lorsqu’un utilisateur envoie un fichier via un formulaire HTML, le fichier est envoyé sous le format multipart/form-data, qui ne peut pas être directement traité par Express. C’est là qu’intervient Multer, un middleware conçu pour analyser ces requêtes, extraire les fichiers et les enregistrer sur le serveur.

1.1 Traiter les fichiers envoyés en multipart/form-data

Les formulaires HTML utilisent généralement le format multipart/form-data pour envoyer des fichiers. Cependant, Express ne peut pas traiter ce format par défaut. Multer intercepte la requête, analyse son contenu et extrait les fichiers de manière structurée. Sans Multer, il faudrait manipuler directement le flux binaire des fichiers, ce qui rendrait le traitement bien plus complexe.

1.2 Stocker les fichiers sur le serveur ou en mémoire

Une fois les fichiers extraits, Multer permet de les stocker automatiquement sur le serveur. Il propose deux modes de stockage :

  • Sur le disque : Le fichier est enregistré dans un dossier spécifique du serveur.
  • En mémoire : Le fichier est conservé temporairement en RAM, ce qui peut être utile pour un traitement immédiat sans écriture sur disque.

Cela permet aux développeurs de choisir la meilleure stratégie de stockage selon leurs besoins.

1.3 Limiter la taille et le type des fichiers acceptés

L’upload de fichiers peut être une faille de sécurité s’il n’est pas correctement contrôlé. Multer permet d’ajouter des filtres pour limiter :

  • La taille des fichiers, afin d’éviter qu’un utilisateur n’envoie un fichier trop volumineux qui pourrait surcharger le serveur.
  • Les types de fichiers acceptés, en refusant par exemple les exécutables (.exe, .sh), qui pourraient contenir du code malveillant.

Grâce à ces restrictions, on protège le serveur et améliore les performances.

1.4 Gérer plusieurs fichiers en même temps

Dans certaines applications, il est nécessaire d’envoyer plusieurs fichiers simultanément (exemple : un album photo ou un lot de documents). Multer simplifie cette gestion avec des fonctionnalités intégrées :

  • Upload de plusieurs fichiers via une seule requête.
  • Personnalisation des noms de fichiers pour éviter les conflits.
  • Stockage organisé par utilisateur ou par date, facilitant l’organisation des fichiers sur le serveur.

Ainsi, Multer agit comme un intermédiaire puissant entre le client et le serveur, en facilitant l’extraction, la validation et le stockage des fichiers envoyés.

2. Installer les dépendances nécessaires

Avant de commencer, assurez-vous que Node.js et Express sont installés. Ensuite, installez Multer avec la commande suivante :

npm install express multer

3. Configurer un serveur Express avec Multer

Nous allons créer une API permettant d’uploader un fichier et de le stocker dans un dossier.

3.1 Configuration de Multer

Dans le fichier server.js, ajoutez le code suivant :

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

const app = express();
const port = 3000;

// Configuration du stockage des fichiers
const storage = multer.diskStorage({
    destination: './uploads',
    filename: (req, file, cb) => {
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});

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

// Route pour uploader un fichier
app.post('/upload', upload.single('fichier'), (req, res) => {
    if (!req.file) {
        return res.status(400).json({ message: 'Aucun fichier reçu' });
    }
    res.json({ message: 'Fichier uploadé avec succès', fichier: req.file.filename });
});

app.listen(port, () => {
    console.log(`Serveur démarré sur http://localhost:${port}`);
});

3.2 Explication du code

  • multer.diskStorage() : Définit où et comment les fichiers seront stockés.
  • destination: './uploads' : Les fichiers seront enregistrés dans un dossier nommé uploads.
  • filename: (req, file, cb) : Génère un nom de fichier unique avec l’horodatage.
  • upload.single('fichier') : Indique que seul un fichier sera accepté sous le champ fichier du formulaire.

4. Tester l’upload avec Postman

1️⃣ Démarrer le serveur avec la commande :

node server.js

2️⃣ Ouvrir Postman et envoyer une requête POST vers http://localhost:3000/upload.

  • Sélectionnez Body > form-data
  • Ajoutez un champ fichier et importez une image ou un document.
  • Envoyez la requête.

3️⃣ Résultat attendu

{
    "message": "Fichier uploadé avec succès",
    "fichier": "fichier-1707840203048.jpg"
}

Vérifiez dans le dossier uploads/ que le fichier est bien enregistré.

5. Ajouter des restrictions sur les fichiers acceptés

Il est recommandé de limiter la taille des fichiers et les types acceptés pour des raisons de sécurité et de performance.

5.1 Accepter uniquement des images et limiter la taille

Modifions la configuration de Multer pour :
Limiter la taille des fichiers à 2 Mo.
Accepter uniquement les fichiers images (jpg, png, gif).

const upload = multer({
    storage: storage,
    limits: { fileSize: 2 * 1024 * 1024 }, // 2 Mo max
    fileFilter: (req, file, cb) => {
        const fileTypes = /jpeg|jpg|png|gif/;
        const extname = fileTypes.test(path.extname(file.originalname).toLowerCase());
        const mimetype = fileTypes.test(file.mimetype);

        if (extname && mimetype) {
            return cb(null, true);
        } else {
            cb(new Error('Seuls les fichiers images sont autorisés'));
        }
    }
});

6. Bonnes pratiques pour gérer les fichiers en Node.js

Limiter la taille des fichiers pour éviter les abus.
Vérifier le type de fichier pour éviter les risques de sécurité.
Ne jamais exécuter un fichier uploadé (éviter les fichiers .exe, .sh, etc.).
Stocker les fichiers de manière organisée (par utilisateur, date, etc.).

7. Sources

  1. Documentation officielle de Node.js - Module fs : https://nodejs.org/api/fs.html (page consultée le 14 février 2025).
  2. W3Schools - Node.js File System : https://www.w3schools.com/nodejs/nodejs_filesystem.asp (page consultée le 14 février 2025).

Étiquettes

Commentaires1

iel1

il y a 1 mois

Ton article est super clair et bien structuré. J’aime comment tu expliques chaque étape avec des exemples concrets. La partie sur les bonnes pratiques est un bon rappel pour éviter les erreurs courantes.