‫Jonas : Configurons maintenant Multer selon nos besoins.
‫D'abord en donnant aux images un meilleur nom de fichier,
‫puis en n'autorisant que les fichiers d'images à
‫être téléchargés sur notre serveur.
‫Et pour commencer, déplaçons en fait
‫tous les éléments liés
‫à Multer de ce routeur vers le contrôleur.
‫Alors coupons ça ici,
‫et je vais le mettre ici à
‫la fin, ou en fait en haut, d'accord ?
‫Donc, tout ce qui concerne Multer,
‫nous allons le mettre ici tout en haut.
‫Ensuite, nous devons aussi bien sûr importer ce package Multer.
‫Et maintenant, nous devons également créer un middleware avec cela.
‫Donc les exportations. uploadUserPhoto sera
‫égal à cela.
‫D'accord, et donc nous avons toujours une
‫fonction middleware, mais maintenant elle a son propre nom plus facile à utiliser, d'accord ?
‫Et donc ici, userController. uploadPhoto, d'accord ?
‫Cela a donc l'air beaucoup plus joli,
‫et bien sûr, il
‫est logique que ce code soit dans le contrôleur.
‫Et maintenant, c'est beau et
‫propre, et nous pouvons le fermer maintenant.
‫Génial, et maintenant allons de l'avant
‫et configurons notre téléchargement Multer selon nos besoins.
‫Et donc pour ça on va créer un stockage Multer
‫et un filtre Multer, d'accord ?
‫Et puis nous allons utiliser ce stockage et
‫le filtre pour créer le téléchargement à partir de là, d'accord ?
‫Alors faisons-le ici.
‫Donc un multerStorage, on utilise multer. diskStorage.
‫Très bien, et nous pourrions également
‫choisir de stocker le fichier en mémoire en tant que
‫tampon, afin que nous puissions ensuite l'utiliser plus tard par d'autres processus.
‫Et en fait, nous allons le faire un
‫peu plus tard, mais pour l'instant, bien sûr, nous voulons vraiment
‫stocker le fichier tel qu'il est dans notre système de fichiers, d'accord ?
‫Donc, pour le stockage sur disque, nous allons prendre quelques options,
‫et la première est la destination.
‫Mais maintenant, nous ne pouvons pas simplement le mettre sur cette voie
‫comme nous le faisions auparavant.
‫Non, c'est un peu plus complexe, d'accord ?
‫Et donc vraiment cette destination ici est une fonction de rappel
‫qui va comme ça.
‫Cette fonction de rappel a donc accès à la requête en
‫cours, au fichier actuellement téléchargé, ainsi
‫qu'à une fonction de rappel.
‫Et cette fonction de rappel
‫est un peu comme la fonction suivante dans Express.
‫Mais je l'appelle ici cb, qui signifie callback, donc c'est
‫un nom différent du suivant,
‫parce qu'en fait ça ne vient pas d'Express, d'accord ?
‫Mais c'est similaire en ce sens que nous pouvons passer des erreurs ici
‫et d'autres choses, comme vous le verrez dans une seconde.
‫Donc, pour maintenant définir la
‫destination, nous devons en fait appeler ce rappel.
‫Donc rappel, puis le premier argument est une erreur s'il y
‫en a une.
‫Et sinon, alors juste null.
‫Et le deuxième argument est alors la destination réelle.
‫Alors copions cela
‫à partir d'ici et collons-le ici.
‫Très bien, et encore une fois, tout cela semble un peu étrange et complexe, et
‫jetons un coup
‫d'œil à la documentation Multer sur GitHub.
‫D'accord, et donc si vous
‫avez besoin d'en savoir plus, vous pouvez consulter cette documentation ici.
‫Et comme vous le voyez,
‫avec 6 000 étoiles, c'est en fait un package assez populaire.
‫Alors ici, vous pouvez apprendre à l'utiliser.
‫Mais en fait, ce que vous trouverez ici
‫est en quelque sorte ce que
‫nous allons faire tout au long des deux prochaines conférences, d'accord ?
‫Donc ça a l'air bien plus déroutant que ce
‫que nous allons faire, d'accord ?
‫Mais vous voyez
‫que c'est en fait ce que nous faisons actuellement, donc nous définissons
‫la destination et ensuite nous définirons également le nom du fichier.
‫Alors faisons-le, et encore une fois, si vous voulez en
‫savoir plus, jetez un œil à cette documentation.
‫Mais pour l'instant, je veux maintenant définir la propriété du nom de fichier.
‫Donc pas ça, simplement le nom du fichier.
‫Et encore une fois, c'est une fonction de
‫rappel très similaire avec une signature, une demande, un fichier et un rappel similaires.
‫Et maintenant, nous voulons donner à nos fichiers des noms de fichiers uniques.
‫Et la façon
‫dont je vais le faire est de les appeler user-userid- l'horodatage actuel.
‫Donc quelque chose comme ça : donc
‫user-, puis l'ID qui est si bizarre, quelque chose comme ça.
‫D'accord, puis l'horodatage actuel, qui va
‫être un nombre énorme, quelque chose comme ça,
‫et puis bien sûr l'extension de fichier, d'accord ?
‫Et avec cela, nous pouvons essentiellement garantir
‫qu'il n'y aura pas deux images avec le même nom de fichier.
‫Si nous utilisions uniquement l'ID
‫utilisateur, alors bien sûr, plusieurs téléchargements par
‫le même utilisateur remplaceraient l'image précédente.
‫Et si nous n'utilisions que l'utilisateur avec l'horodatage, eh bien, si
‫deux utilisateurs téléchargeaient une image en même temps, ils obtiendraient alors
‫exactement le même nom de fichier, ce qui
‫n'a pas de sens.
‫Très bien, alors tout d'abord,
‫extrayons en fait le nom de fichier du fichier téléchargé.
‫Et comment l'obtenons-nous?
‫Eh bien, jetons un coup d'œil à notre sortie de console ici,
‫où nous avons eu la demande. fichier il y a longtemps.
‫Alors le voici, alors rappelez-vous que cet objet ici
‫était une requête. fichier, et c'est
‫donc exactement ce qu'est ce fichier ici, d'accord ?
‫Et donc ici nous avons le type
‫MIME, et donc ce JPEG est stocké ici, d'accord ?
‫Et c'est donc de là que nous allons
‫obtenir l'extension de fichier.
‫Donc l'extension est égale au fichier. mimetype, puis séparons
‫cette chaîne par la barre oblique et prenons
‫le deuxième élément du tableau résultant.
‫Et donc ce ne sera alors que cette partie, donc seulement cela.
‫Très bien, c'est donc l'extension.
‫Et maintenant, comme
‫avant, nous devons appeler la fonction de rappel sans erreur, puis le
‫nom de fichier que nous voulons spécifier.
‫Donc, ce sera l'utilisateur, puis l'ID utilisateur, vous vous souvenez ?
‫Et donc puisque nous avons accès à la requête ici,
‫c'est très simple, requête. utilisateur. identifiant.
‫Et comme vous le
‫savez, c'est l'ID de l'utilisateur actuellement connecté.
‫Puis l'horodatage, donc Date. maintenant, d'accord, puis pointez
‫sur l'extension que nous venons de créer, d'accord ?
‫Alors débarrassons-nous de ce commentaire,
‫et c'est donc en fait notre stockage.
‫Et donc en gros une définition complète de la
‫façon dont nous voulons stocker nos fichiers,
‫avec la destination et le nom du fichier.
‫Ensuite, créons un filtre Multer.
‫Appelons-le donc exactement ainsi.
‫Et le filtre dans Multer est simplement, encore une
‫fois, une fonction de rappel, similaire à celles que nous avions
‫auparavant, accédant à la requête, au fichier et à une fonction de rappel.
‫Et dans cette fonction, le but
‫est essentiellement de tester si le fichier téléchargé est une image.
‫Et si c'est le cas, alors nous passons true dans
‫la fonction de rappel, et si
‫ce n'est pas le cas, nous passons false dans la fonction de
‫rappel, avec une erreur.
‫Car encore une fois, nous ne voulons pas autoriser le
‫téléchargement de fichiers qui ne sont pas des images.
‫Et c'est exactement à cela que sert ce filtre.
‫Maintenant, si dans votre
‫propre application, vous souhaitez télécharger autre chose, disons des fichiers CSV,
‫alors bien sûr, vous pouvez tester cela au lieu d'images.
‫Donc, tout ce que nous faisons ici
‫fonctionne non seulement pour les
‫images, mais vraiment pour toutes sortes
‫de fichiers que vous souhaitez télécharger, d'accord ?
‫Encore une fois, dans ce cas, nous parlons vraiment d'images, et
‫testons donc si le fichier téléchargé est une image.
‫Et pour cela, nous utiliserons une fois de plus le type
‫mime, car quel que soit le
‫type d'image téléchargé, donc peu importe s'il s'agit d'un JPEG, ou d'un PNG, ou
‫d'un bitmap, ou d'un TIFF, ou vraiment
‫n'importe quoi, le type mime commencera toujours par image.
‫Et maintenant, nous pouvons tester cela.
‫Donc si le fichier . type mime. startWith, image, et
‫donc je ne sais pas si nous avons déjà utilisé celle-ci,
‫mais c'est une méthode de chaîne assez nouvelle et très utile
‫qui est disponible en JavaScript, donc
‫dans tout JavaScript en général.
‫Donc dans le cas où on a effectivement une image, eh bien, là
‫encore il n'y a pas d'erreur et on passe vrai, comme
‫je l'ai dit au début.
‫Mais sinon, on passera alors effectivement une erreur,
‫puis false.
‫Mettons donc juste un x ici, et faux.
‫Donc, pour ce x ici, nous allons maintenant créer une AppError,
‫comme nous l'avons toujours fait.
‫Et en fait, nous l'avons déjà ici.
‫Alors disons une
‫nouvelle AppError, pas une image, veuillez
‫télécharger uniquement des images, d'accord ?
‫Et puis un 400 pour une mauvaise demande.
‫Génial, nous avons donc notre stockage, nous avons notre filtre,
‫il est maintenant temps
‫de les utiliser pour créer le téléchargement.
‫Très bien, donc le téléchargement ne ressemblera plus à ça,
‫mais à la place, nous passerons ces variables.
‫Ainsi, dans Multer, nous pouvons spécifier le stockage,
‫et c'est donc notre multerStorage.
‫Et puis le fileFilter,
‫qui est la variable que nous avons appelée multerFilter.
‫D'accord. Et c'est tout.
‫Et bien sûr, nous aurions
‫pu mettre tout cela ici directement dans cet objet d'options ici.
‫Mais je préfère généralement les faire
‫à l'extérieur, puis simplement passer les variables dans un objet d'options.
‫Alors ça a l'air un peu plus propre.
‫C'est donc un grand nombre d'étapes
‫que nous devons franchir pour vraiment créer notre middleware Multer.
‫Mais finalement nous avons ensuite bien
‫sûr, tout comme nous l'avons
‫fait dans la dernière vidéo, utiliser ce téléchargement, et sur celui-ci
‫nous appelons single, avec le nom du domaine.
‫Donc photo, puis à partir de là, nous créons une exportation,
‫ou un middleware, que nous avons en fait
‫déjà inclus dans notre routeur.
‫Supprimons donc maintenant cet ancien type d'image que
‫nous avions ici auparavant.
‫Non, cela n'a pas fonctionné.
‫Et maintenant, testons-le à nouveau ici.
‫Donc de retour dans Postman, nous avons toujours notre
‫nom ici et l'image du Lion, et allons-y.
‫Et nous n'avons aucune erreur, ce qui est bien.
‫Et revoyons notre sortie ici.
‫Donc tout ici au début est le même,
‫mais ensuite vous voyez que notre nom de fichier est en fait maintenant correct.
‫Et si vous jetez un œil ici à notre dossier,
‫alors en effet il y a notre image.
‫Et c'est exactement celui que nous avons téléchargé.
‫C'est donc dans dev-data, images, Leo.
‫Et effectivement, c'est exactement la même chose.
‫Super, c'est génial.
‫Maintenant, juste pour tester ce filtre
‫ici aussi, essayons de télécharger un autre fichier qui n'est pas une image.
‫Alors, sélectionnons autre chose ici dans nos données de
‫développement, et disons simplement des données JSON.
‫Et attendons donc si nous obtenons une erreur ici.
‫Et en effet, nous en obtenons un.
‫Donc pas une image, veuillez télécharger uniquement des images.
‫Et donc ça veut dire que ça marche aussi.
‫Si parfait, toute notre configuration Multer fonctionne maintenant très
‫bien, mais bien sûr, il
‫manque encore une étape.
‫Et c'est en fait pour lier
‫l'utilisateur à l'image nouvellement mise à jour, n'est-ce pas ?
‫Parce qu'en ce moment dans la base
‫de données, nous avons évidemment
‫toujours le chemin, ou en fait le nom de
‫l'ancienne image, car nulle part dans notre code nous avons
‫spécifié que nous voulions mettre à jour le document utilisateur lui-même, n'est-ce pas ?
‫Et corrigeons cela dans la vidéo suivante.