Aujourd’hui nous allons voir comment gérer les images dans le blog à venir. Le but est ici d’héberger les images du futur blog directement dans un dossier du serveur et créer une url pointant vers cette image, url qui sera hébergée en base de données.
Controller
Le controlleur image va contenir les fonctions utiles d’ajout et d’affichage d’une ou plusieurs images.
const db = require("../models");
const auth = require("../middleware/auth");
const cxss = require("c-xss");
const messages = require('../messages');
// AJOUT d'UNE IMAGE
exports.addImage = async (req, res, next) => {
try {
let imageUrl = "";
// on vérifie qui est l'utilisateur connecté via le middleware auth, ici seul le propriétaire du blog peut ajouter des images
const userId = auth.getUserID(req);
const user = await db.User.findOne({ where: { id: userId } });
// si une image est ajoutée dans le fomulaire on traite l'ajout de cette image dans le dossier et la création de l'url vers l'image en BDD
if (req.file) {
imageUrl = `${req.protocol}://${req.get('host')}/images/${req.file.filename}`;
const myImage = await db.Image.create({
UserId: user.id,
imageUrl: imageUrl,
// cxss permet de filtrer les saisies des utilisateurs afin d'éviter les attaques xss
imageTitle: cxss(req.body.title),
});
res.status(200).json({ myImage: myImage.imageUrl, message: messages.IMAGE_IMAGEADDED });
// Sinon on affiche un message d'erreur
} else {
res.status(403).json({ message: messages.IMAGE_PLEASEADD });
}
} catch (error) {
return error
}
};
// AFFICHER TOUTES LES IMAGES
exports.getAllImages = async (req,res, next) => {
try {
const allImages = await db.Image.findAll({ attributes: ["id", "imageUrl", "imageTitle"],
order: [ ['id', 'ASC'],],
})
res.status(200).json({ allImages });
}
catch (error) {
return error
}
};
// AFFICHER UNE IMAGE
exports.getOneImage = async (req,res, next) => {
try {
const image = await db.Image.findOne({ attributes: ["id", "imageUrl", "imageTitle"],
where: { id: req.params.id }
})
res.status(200).json({ image });
}
catch (error) {
return error
}
};
Routes
Les routes utilisées pour gérer les images dans le futur blog sont au nombre de trois. Une route pour rajouter l’image, une pour affiche une image en particulier et une autre pour afficher toutes les images.
Deux middlewares vont ici être utilisés, auth, déjà utilisé plus haut dans le controller au niveau de la fonction addImage, et multer.
Nous les verrons un peu plus loin.
const express = require('express');
const router = express.Router();
const auth = require('../middleware/auth');
const multer = require('../middleware/multer');
const imageCtrl = require("../controllers/image");
router.post("/create", auth.signin, multer, imageCtrl.addImage);
router.get("/allimages", auth.signin, imageCtrl.getAllImages);
router.get("/:id", imageCtrl.getOneImage)
module.exports = router;
Middlewares
Deux middlewares sont utilisés pour la gestion des images, auth et multer.
auth
// import de la librarie jsonwebtoken
const jwt = require('jsonwebtoken');
const messages = require('../messages');
/* fonction signin utilisée au niveau des routes create et allimages
Il s'agit de vérifier si l'utilisateur connecté a bien un token valide et est bien autorisé à emprunter ces routes */
exports.signin = (req, res, next) => {
try {
const token = req.headers.authorization.split(' ')[1];
jwt.verify(token, process.env.TOKEN);
next();
} catch {
res.status(401).json({ error: messages.AUTH_NOTAUTH });
}
};
// fonction getUserID qui permet de déterminer quel utilisateur est conencté en récupérant son ID dans le token
exports.getUserID = (req) => {
const token = req.headers.authorization.split(' ')[1];
const decodedToken = jwt.verify(token, process.env.TOKEN);
const userId = decodedToken.userId;
return userId;
}
multer
multer est un middleware permettant de gérer les fichiers envoyés dans un form de type multipart/form-data.
const multer = require('multer');
// on indique les types d'images que l'on accepte
const MIME_TYPES = {
'image/jpg': 'jpg',
'image/jpeg': 'jpg',
'image/png': 'png'
};
const storage = multer.diskStorage({
destination: (req, file, callback) => {
callback(null, 'images');
},
filename: (req, file, callback) => {
// renommage de l'image
const name = file.originalname.split(' ').join('_');
const extension = MIME_TYPES[file.mimetype];
callback(null, Date.now() + '.' + extension);
}
});
module.exports = multer({storage: storage}).single('image');
Retrouvez les premiers articles du projet ici ⬇️
– Simple Blog From Scratch Part1
– Simple Blog From Scratch Part2
– Simple Blog From Scratch Part3
Consultante spécialisée dans les technologies Microsoft, je justifie de plus de 14 ans d’expérience dans le secteur IT.
Mon parcours professionnel, riche et varié, m’a permis de développer de solides compétences, tant techniques qu’humaines. Je suis reconnue pour ma capacité à analyser rapidement les enjeux techniques et à concevoir des solutions pertinentes, y compris sur des problématiques complexes.
Mon approche proactive, alliée à mes compétences en développement, me permet de proposer des évolutions efficaces, toujours en cohérence avec les objectifs métiers.
En parallèle de mon activité professionnelle, je prends plaisir à approfondir mes compétences techniques en réalisant des projets personnels. Je développe notamment des jeux web basés sur React et PHP, ainsi que des applications orientées métier avec SPFx.