Pourquoi utiliser Multer avec ExpressJS ?

Multer simplifie la gestion des fichiers téléchargés en les triant et les stockant facilement sur le serveur. C'est particulièrement utile pour des applications demandant l'upload de fichiers comme des photos de profil ou des CV.

Comment démarrer une application ExpressJS pour gérer les téléchargements ?

Créez un fichier app.js dans votre dossier 'upload-fichiers', configurez Express et Multer pour gérer les téléchargements, et démarrez le serveur avec la commande 'node app.js'.

Où sont sauvegardés les fichiers téléchargés ?

Les fichiers sont sauvegardés dans un dossier nommé 'uploads' que vous devez créer dans votre application. Multer s'occupe de les y stocker.

Comment tester l'application de téléchargement de fichiers ?

Après avoir démarré le serveur, ouvrez le formulaire à l'adresse http://localhost:3000 et procédez à un test en téléchargeant un fichier.

Gérer les Téléchargements de Fichiers avec ExpressJS

OUJOOD.COM

Introduction : Pourquoi Gérer les Téléchargements de Fichiers ?

Permettre aux utilisateurs de télécharger des fichiers est utile pour beaucoup d’applications : ajouter une photo de profil, envoyer un CV, ou partager une image. Avec ExpressJS, on peut recevoir ces fichiers depuis un formulaire HTML et les sauvegarder sur le serveur. multer nous aide à traiter ces fichiers facilement, comme un assistant qui trie le courrier.

Étape 1 : Préparer Votre Environnement

Avant de coder, préparons tout ce qu’il faut. Si vous avez suivi les tutoriels précédents, vous avez déjà Node.js et ExpressJS. Voici les étapes :

Vérifiez Node.js : Ouvrez un terminal et tapez node -v. Si une version apparaît (ex. : v16.13.0), c’est bon. Sinon, téléchargez Node.js sur nodejs.org.
Créez un dossier projet : Créez un dossier nommez le par exemple : "upload-fichiers" sur votre ordinateur. Ouvrez-le dans un éditeur comme Visual Studio Code.
Initialisez le projet : Dans le terminal, allez dans ce dossier avec cd chemin/vers/upload-fichiers, puis tapez npm init -y. Cela crée un fichier package.json.
Installez ExpressJS et Multer : Tapez npm install express multer. multer est l’outil qui gère les fichiers envoyés.

Étape 2 : Créer une Application pour les Téléchargements

Construisons une application avec un formulaire pour télécharger des fichiers et une page pour confirmer le succès.

Exemple de Code : Application Principale

Créez un fichier nommé app.js dans votre dossier "upload-fichiers" et ajoutez ce code :

📋 Copier le code

var express = require('express');
var multer = require('multer');
var path = require('path');
var app = express();

// Configurer Multer pour sauvegarder les fichiers
var upload = multer({ dest: 'uploads/' });

// Servir les fichiers statiques (formulaire)
app.use(express.static('public'));

// Route pour afficher le formulaire
app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

// Route pour recevoir le fichier
app.post('/upload', upload.single('monFichier'), function(req, res) {
    if (!req.file) {
        return res.send('Aucun fichier téléchargé.');
    }
    res.send('Fichier téléchargé avec succès : ' + req.file.originalname);
});

app.listen(3000, function() {
    console.log('Serveur démarré sur http://localhost:3000');
});

Créer le Formulaire HTML

Créez un dossier nommé public dans "upload-fichiers". À l’intérieur, ajoutez un fichier index.html avec ce contenu :

📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Télécharger un Fichier</title>
</head>
<body>
    <h1>Télécharger un Fichier</h1>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="monFichier">
        <button type="submit">Envoyer</button>
    </form>
</body>
</html>

Créer un Dossier pour les Fichiers

Dans "upload-fichiers", créez un dossier nommé uploads. C’est là que Multer sauvegardera les fichiers téléchargés. Pas besoin d’y mettre quoi que ce soit pour l’instant, il restera vide jusqu’au premier upload.

Explication Détaillée du Code

Voici chaque partie expliquée très simplement pour les débutants :

var multer = require('multer'); : On importe Multer pour gérer les fichiers.
var upload = multer({ dest: 'uploads/' }); : On configure Multer pour sauvegarder les fichiers dans le dossier "uploads".
app.use(express.static('public')); : On sert les fichiers du dossier "public" (comme notre formulaire HTML).
app.get('/', ...); : Route pour afficher le formulaire.
- res.sendFile(...); : Envoie le fichier index.html au navigateur.
app.post('/upload', upload.single('monFichier'), ...); : Route pour recevoir le fichier.
- upload.single('monFichier') : Multer prend un seul fichier nommé "monFichier" (doit correspondre au name dans le formulaire).
- req.file : Contient les infos du fichier téléchargé (nom, taille, etc.).
- if (!req.file) : Vérifie si un fichier a bien été envoyé.
- res.send(...); : Renvoie un message de succès avec le nom original du fichier.
Formulaire HTML :
- enctype="multipart/form-data" : Obligatoire pour envoyer des fichiers.
- <input type="file" name="monFichier"> : Champ pour choisir un fichier.

Étape 3 : Tester l’Application

Démarrez le serveur avec node app.js dans le terminal, puis testez :

http://localhost:3000 : Vous verrez le formulaire.
Choisissez un fichier (ex. : une image ou un texte) et cliquez sur "Envoyer".
Vous verrez un message comme "Fichier téléchargé avec succès : monimage.jpg".
Vérifiez le dossier uploads : un nouveau fichier avec un nom aléatoire (généré par Multer) y sera ajouté.

Essayez avec différents fichiers pour voir comment ça fonctionne !

Conclusion

Félicitations ! Vous savez maintenant gérer les téléchargements de fichiers avec ExpressJS et Multer. Vous pouvez recevoir des fichiers via un formulaire et les sauvegarder sur votre serveur. Pour aller plus loin, explorez notre prochain tutoriel sur Gestion des Erreurs avec ExpressJS ou consultez la documentation Multer.

Cours precedent

Sommaire

Cours suivant