Featherjs – Upload de fichier simple


Dans l’article précédent: Featherjs – authentification avec token , nous avons abordé :

  • L’authentification d’un utilisateur via jwt
  • La protection d’une ressource: URL

… en créant un service event . Dans cet article, nous allons toujours utiliser le service event et présenterons l’envoi de fichier simple depuis la machine vers le serveur.

Installation de librairies utiles

Installons 2 librairies javascript/nodejs suivantes via npm:

npm install multer voca --save

Multer : middleware nodejs qui permet d’envoyer un fichier depuis l’ordinateur vers un serveur.

Voca: librairie qui possède plusieurs fonctions de manipulation de chaines de caractères. Dans notre cas, elle sera utile dans le cas d’une « slugification » (conversion de texte en URL). Exemple: le texte « Je suis spécialiste featherjs » sera converti en « je-suis-specialiste-featherjs »

Configuration de multer

Nous allons stocker les fichiers envoyés depuis la machine dans un dossier que nous allons créer .Ce dossier sera le suivant : public/uploads à la racine du projet.

Modification du service event

Jusqu’à maintenant, dans tous les articles postés sur featherjs, nous n’avons jamais touché au code. Cette fois-ci nous allons légèrement y toucher.

Envoi de fichier simple

A la création d’un événement (dans notre service event), nous avons la possibilité de joindre une affiche à cet événement.

Modifions le fichier src/services/event/event.service.js

Ajoutons

const multer = require('multer');
const slugify = require('voca/slugify');

const storage = multer.diskStorage({
  destination: (_req, _file, cb) => cb(null, 'public/uploads'), // where the files are being stored
  filename: (_req, file, cb) => cb(null, `${Date.now()}-${file.originalname}`) // getting the file name
});
const upload = multer({
  storage,
  limits: {
    fieldSize: 100 // Max field value size `MB`
  }
});

Puis cette ligne

app.use('/api/event', createService(options));

en

app.use(
    '/api/event',
    upload.single('files'),
    (req, _res, next) => {
    const { method } = req;
    if (method === 'POST' || method === 'PATCH') {
      req.feathers.files = req.file; 
      const body = {
        name: req.body.name,
        flyer: req.file.filename,
        slug: slugify(req.body.name)
      };      
      req.body = body ;
    }
    next();
  }, createService(options));
  • La fonction upload.single('files')indique l’envoi du fichier dont le nom est : files
  • La variable const body = { contient des champs supplémentaires à envoyer au serveur avec le fichier.
  • La ligne slug: slugify(req.body.name)fait appel à la fonction slugify de la librairie voca/slugify

Concrêtement, dans POSTMAN:

  • On choisit la methode: POST
  • On saisit l’URL : http://localhost:3030/api/event
  • Dans Body > form-data
    • On ajoute un champ « files » qui sera de type file
    • On ajoute un autre champ « name« 

Nous allons remplir ces champs :

  • champ files > on choisit un fichier sur notre machine
  • champ name > on saisit: « Maman j’ai raté l’avion »
  • On s’assure que
    • Dans « Authorization » > TYPE > « Bearer Token » > Champ Token à droite – le token est bien à jour. Sinon on s’authentifie comme on a fait dans l'article précédent et dans ce cas, on ajoute le token mis à jour dans ce champ.
    • On clique sur le bouton « SEND »

    Si l’enregistrement a bien été fait. On a le retour suivant:

    Et dans la base de données

    Remarquons le champ slug

    La valeur « Maman j’ai raté l’avion » a été transformé en « maman-j-ai-rate-l-avion ».