LILINE’S LAB

Projet : Simple Blog From Scratch Part4

par | Mar 6, 2024 | Développement, Express, NodeJS, Projets, Simple Blog From Scratch

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.

JavaScript
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.

JavaScript
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

JavaScript
// 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.

JavaScript
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


logo du site

   


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.