Techniques avancées d'upload de fichiers avec ExpressJS et Multer (niveau intermédiaire)

  📋 Copier le code

// Configuration route ExpressJS pour upload multiple avec limitation à 5 fichiers maximum
// Le premier paramètre 'mesFichiers' doit correspondre au nom de l'attribut 'name' du champ HTML input
// Le second paramètre (5) définit la limite maximale de fichiers acceptés simultanément
app.post('/upload-multiple', upload.array('mesFichiers', 5), function(req, res) {
// Vérification de la présence de fichiers dans la requête
// req.files sera undefined si aucun fichier n'est envoyé
if(!req.files || req.files.length === 0) {
return res.status(400).send('Aucun fichier reçu dans la requête');
}
// req.files devient un tableau contenant tous les fichiers uploadés
// Chaque élément possède : fieldname, originalname, encoding, mimetype, destination, filename, path, size
const nbFichiers = req.files.length;
const fichiersPaths = req.files.map(f => f.path);
// Envoi de la réponse confirmant le nombre de fichiers traités avec succès
res.json({
success: true,
message: nbFichiers + ' fichiers uploadés avec succès',
fichiers: fichiersPaths
});
});

  📋 Copier le code

<!-- Formulaire HTML5 avec champ de sélection multiple de fichiers -->
<!-- L'attribut 'multiple' active la sélection multi-fichiers dans le navigateur -->
<!-- L'attribut 'name' doit correspondre au premier paramètre de upload.array() côté serveur -->
<form action="/upload-multiple" method="POST" enctype="multipart/form-data">
<label for="fichiers">Sélectionnez jusqu'à 5 fichiers :</label>
<input type="file" id="fichiers" name="mesFichiers" multiple accept="image/*">
<!-- L'attribut accept="image/*" limite la sélection aux images uniquement -->
<button type="submit">Envoyer les fichiers</button>
</form>

  📋 Copier le code

<!-- Structure HTML pour input fichier et conteneur d'aperçu image -->
<div>
<label for="imgInput">Choisir une image :</label>
<input type="file" id="imgInput" accept="image/*">
<!-- Balise img qui affichera l'aperçu, initialement sans src -->
<img id="preview" width="200" style="display:none; margin-top:10px; border:1px solid #ddd;">
</div>
<script>
// Ajout d'un écouteur d'événement sur le changement de fichier sélectionné
document.getElementById('imgInput').addEventListener('change', function(e) {
// Récupération du premier fichier sélectionné depuis l'événement
const fichierSelectionne = e.target.files[0];
// Vérification qu'un fichier a bien été sélectionné
if(fichierSelectionne) {
// Création d'une URL blob temporaire pointant vers le fichier local
// Cette URL permet d'afficher l'image sans upload serveur
const urlApercu = URL.createObjectURL(fichierSelectionne);
// Assignation de l'URL blob à l'attribut src de l'image pour affichage
const imgPreview = document.getElementById('preview');
imgPreview.src = urlApercu;
imgPreview.style.display = 'block';
// Important : libérer la mémoire après chargement de l'image pour éviter les fuites mémoire
imgPreview.onload = function() {
URL.revokeObjectURL(urlApercu);
};
}
});
</script>

  📋 Copier le code

// Configuration Multer avec limitation de taille de fichier
// L'option limits.fileSize définit la taille maximale autorisée en octets
const multer = require('multer');
// Définition du stockage (diskStorage pour disque local ou autre)
const storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, 'uploads/');
},
filename: function(req, file, cb) {
// Génération d'un nom unique pour éviter les conflits
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
}
});
// Configuration upload avec limite de taille à 2 Mo (2 * 1024 * 1024 octets)
const upload = multer({
storage: storage,
limits: {
fileSize: 2 * 1024 * 1024 // 2 Mo maximum par fichier
},
// Fonction de filtrage optionnelle pour valider le type MIME
fileFilter: function(req, file, cb) {
// Accepter uniquement les images JPEG, PNG, GIF
const typesAutorises = /jpeg|jpg|png|gif/;
const mimetypeValide = typesAutorises.test(file.mimetype);
const extValide = typesAutorises.test(path.extname(file.originalname).toLowerCase());
if(mimetypeValide && extValide) {
return cb(null, true);
}
cb(new Error('Type de fichier non autorisé. Formats acceptés : JPEG, PNG, GIF'));
}
});
// Gestion des erreurs de dépassement de taille
app.use(function(err, req, res, next) {
if(err.code === 'LIMIT_FILE_SIZE') {
return res.status(413).json({error: 'Fichier trop volumineux. Taille maximale : 2 Mo'});
}
next(err);
});

  📋 Copier le code

// Installation requise : npm install csurf cookie-parser
// Import des modules nécessaires pour la protection CSRF
const csrf = require('csurf');
const cookieParser = require('cookie-parser');
const express = require('express');
const app = express();
// Middleware cookie-parser requis pour stocker le token CSRF dans les cookies
app.use(cookieParser());
// Configuration du middleware CSRF avec stockage cookie
// L'option {cookie: true} stocke le token dans un cookie au lieu de la session
const csrfProtection = csrf({ cookie: true });
// Application globale de la protection CSRF à toutes les routes (optionnel)
// Alternativement, appliquez csrfProtection uniquement aux routes sensibles
app.use(csrfProtection);
// Route GET pour afficher le formulaire avec token CSRF injecté
app.get('/formulaire-upload', function(req, res) {
// Génération du token CSRF unique pour cette requête
// Ce token doit être inclus dans le formulaire HTML
const tokenCSRF = req.csrfToken();
// Envoi du HTML avec le token CSRF dans un champ caché
res.send(`
<form action="/upload" method="POST" enctype="multipart/form-data">
<!-- Champ hidden contenant le token CSRF obligatoire -->
<input type="hidden" name="_csrf" value="${tokenCSRF}">
<input type="file" name="fichier">
<button type="submit">Envoyer</button>
</form>
`);
});
// Route POST protégée par CSRF pour traiter l'upload
// Le middleware csrfProtection valide automatiquement le token avant d'exécuter la fonction
app.post('/upload', upload.single('fichier'), function(req, res) {
// Si le token CSRF est invalide ou manquant, une erreur 403 est automatiquement renvoyée
// Si la validation réussit, le code ci-dessous s'exécute normalement
res.json({
success: true,
message: 'Fichier uploadé en toute sécurité avec protection CSRF'
});
});
// Gestion des erreurs CSRF pour retourner un message personnalisé
app.use(function(err, req, res, next) {
if(err.code === 'EBADCSRFTOKEN') {
// Token CSRF invalide ou manquant
return res.status(403).json({error: 'Token CSRF invalide. Requête rejetée pour raisons de sécurité.'});
}
next(err);
});

  📋 Copier le code

// Installation requise : npm install cloudinary multer-storage-cloudinary
// Import des modules Cloudinary SDK v2 et adaptateur Multer Storage
const cloudinary = require('cloudinary').v2;
const { CloudinaryStorage } = require('multer-storage-cloudinary');
const multer = require('multer');
// Configuration des identifiants Cloudinary (à obtenir sur cloudinary.com)
// Stockez ces valeurs dans des variables d'environnement pour la sécurité
cloudinary.config({
cloud_name: process.env.CLOUDINARY_CLOUD_NAME || 'VOTRE_CLOUD_NAME',
api_key: process.env.CLOUDINARY_API_KEY || 'VOTRE_API_KEY',
api_secret: process.env.CLOUDINARY_API_SECRET || 'VOTRE_API_SECRET'
});
// Création du stockage Cloudinary pour Multer
// Les fichiers seront uploadés directement vers Cloudinary sans stockage local temporaire
const cloudStorage = new CloudinaryStorage({
cloudinary: cloudinary,
params: {
folder: 'uploads', // Dossier de destination dans Cloudinary
allowed_formats: ['jpg', 'jpeg', 'png', 'gif', 'webp'], // Formats autorisés
transformation: [{ width: 1000, height: 1000, crop: 'limit' }], // Transformation automatique
public_id: (req, file) => {
// Génération d'un ID public unique pour chaque fichier
return 'upload-' + Date.now() + '-' + Math.round(Math.random() * 1E9);
}
}
});
// Configuration Multer avec le stockage Cloudinary
const uploadCloud = multer({
storage: cloudStorage,
limits: { fileSize: 5 * 1024 * 1024 } // Limite 5 Mo
});
// Route ExpressJS utilisant l'upload Cloudinary
app.post('/upload-cloud', uploadCloud.single('image'), function(req, res) {
// req.file.path contient l'URL Cloudinary du fichier uploadé
// req.file.filename contient le public_id Cloudinary
if(!req.file) {
return res.status(400).json({ error: 'Aucun fichier fourni' });
}
// Retour de l'URL Cloudinary optimisée avec CDN global
res.json({
success: true,
message: 'Image uploadée sur Cloudinary avec succès',
url: req.file.path,
public_id: req.file.filename,
// URL de transformation pour différentes tailles (thumbnail, medium, large)
thumbnailUrl: cloudinary.url(req.file.filename, { width: 200, height: 200, crop: 'fill' })
});
});

  📋 Copier le code

// Fichier HTML côté client avec preview et upload multiple
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Upload Multiple Sécurisé avec Preview</title>
</head>
<body>
<h1>Upload Multiple d'Images avec Aperçu</h1>
<form id="uploadForm" action="/upload-multiple-cloud" method="POST" enctype="multipart/form-data">
<input type="hidden" name="_csrf" value="<%= csrfToken %>">
<input type="file" id="imagesInput" name="images" multiple accept="image/*">
<div id="previewContainer" style="display:flex; flex-wrap:wrap; gap:10px; margin:20px 0;"></div>
<button type="submit">Envoyer vers Cloudinary</button>
</form>
<script>
// Gestion de l'aperçu des images sélectionnées
document.getElementById('imagesInput').addEventListener('change', function(e) {
const container = document.getElementById('previewContainer');
container.innerHTML = ''; // Réinitialiser les aperçus
const fichiers = Array.from(e.target.files);
fichiers.forEach((fichier, index) => {
// Vérification taille côté client (2 Mo)
if(fichier.size > 2 * 1024 * 1024) {
alert('Fichier ' + fichier.name + ' trop volumineux (max 2 Mo)');
return;
}
// Création de l'aperçu
const img = document.createElement('img');
img.src = URL.createObjectURL(fichier);
img.width = 150;
img.style.border = '2px solid #ddd';
img.onload = () => URL.revokeObjectURL(img.src);
container.appendChild(img);
});
});
</script>
</body>
</html>