Comment héberger un fichier sur Amazon S3 ?

00:00 Dans cette vidéo, je vais te montrer comment sauvegarder tout type de fichiers sur un serveur distant. Ces fichiers peuvent être publics et accessibles à tous ou bien privés et protégés par token. C'est la septième partie de notre formation MoloRipo avec NestG s et le framework remix. On a développé notre petit projet et on aimerait maintenant ajouter des images à nos annonces et à nos avatars. La première chose qu'on va faire, c'est qu'on va taper sur Google AWSS trois javascript SDK ici.

00:29 Et ce qu'on a envie d'utiliser, c'est la version trois de ce SDK en javascript. On va donc utiliser cette librairie qui apparaît ici AWS tiret SDK slash client tiret s trois et nous allons l'ajouter dans notre projet. Ce qu'il faut savoir, c'est qu'on a déjà implémenté cette fonctionnalité dans notre application Nest JS ici. Du coup, ce qu'on va faire, c'est qu'on va installer la librairie et on va ouvrir notre projet dans un terminal et nous allons la télécharger dans le dossier backend ici parce que c'est bien Nest JS notre serveur qui se chargera d'envoyer les images à Amazon s trois. On va donc faire un cd backend et nous allons faire notre MPM install du SDKAWS tiret SDK slash client s trois comme ceci.

01:12 Pendant que ça télécharge, j'aimerais juste vous parler de la formation NSGS que je viens de publier sur cette chaîne YouTube. Les liens vers les repositories sont publics et nous avons même utilisé AWSS trois dans cette formation. Donc ce qu'on va faire, c'est qu'on va tout simplement copier le service qu'on avait déjà créé et qui se trouve dans le folder AWS ici. On peut voir qu'on avait donc créé un service AWS tiret s trois et ça va être exactement la même logique pour cette vidéo. Ce qu'on va faire, c'est qu'on va copier tout ce code et nous allons revoir chacune des fonctions pour mieux les comprendre.

01:45 On retourne donc dans notre projet et on va faire exactement pareil. Donc dans le dossier backend dans SRC, ici, nous allons créer un nouveau folder qu'on va appeler AWS et à l'intérieur, nous allons ajouter un fichier qu'on va appeler AWS tiret s trois point service point t s comme ceci. Et maintenant, on peut coller le contenu du fichier qui est disponible sur GitHub. Vous avez le lien dans la description de cette vidéo. Et ce qui est intéressant, c'est qu'on n'utilise pas seulement une librairie de LWS.

02:13 En fait, on en utilise une deuxième. Ça s'appelle s trois request presiner et on l'utilise tout simplement pour récupérer une clé signée depuis Amazon s trois pour les fichiers protégés. Si on fait un contrôle f, on peut voir que ça revient à cette fonction-là, on récupère l'url du fichier en passant en paramètre le nom du bucket et la clé unique et on utilise un QID version deux pour générer justement ces clés uniques. Donc on va tout de suite installer les deux librairies qui nous manquent, donc Amazon SDK, S trois request presener et parallèle live slash QID deux comme ceci. Sûr, ce qui nous intéresse, c'est aussi le schéma Zod pour pouvoir parser nos fichiers.

02:55 Donc, on va retourner sur le repository, donc c'est dans SRC, dans file utile ici et nous avons donc ce schéma Zod. On va également le copier. On va retourner dans notre projet et on va tout simplement le déclarer à l'intérieur de ce fichier comme ceci. On vient donc de télécharger nos librairies. On peut qu'il le terminal et cacher celui-là.

03:15 Et ce qu'on va faire maintenant, c'est qu'on va retourner dans le module pour importer ce nouveau service que nous venons de créer. On va donc l'importer dans notre unique module qui est le app point module et on peut voir que le service s'appelle AWS trois services. Donc on va copier son nom et nous allons l'importer comme ceci avec l'auto complétion. On ouvre le terminal pour voir s'il y a ne serait-ce qu'un petit problème. Au final, nous avons un problème ici, on ne possède pas de clé d'accès au service AWS.

03:41 Il est temps maintenant de regarder un peu le code de ce service. On peut voir qu'on a donc une classe s trois services qui déclare un client s trois et nous avons une méthode constructeur qui va donc se déclencher au moment où nous importons le module dans le provider et ce constructeur récupère les variables d'environnement suivantes le access ski, le secret et la région. Ces variables d'environnement sont donc obligatoires. Malheureusement, AWS ne les trouve pas parce qu'on ne les a pas encore configurés. Effectivement, on peut voir ici qu'on a besoin de définir au moins la région, une clé d'accès et un secret pour pouvoir commencer à utiliser Amazon S trois.

04:17 Ce qu'on peut faire du coup, c'est qu'on peut copier le nom de ces trois variables d'environnement et nous allons dans notre fichier point inonvi ici et nous allons les transformer comme ceci et on peut virer la suite et on va mettre une valeur aléatoire comme celle-ci. Bien sûr pour la région, on connaît déjà ces u ouest tiret trois, mais pour la clé et le secret, on ne les connaît pas encore. Maintenant que c'est fait, on va tenter de voir ça fonctionne à nouveau. On va donc qu'il notre terminal et nous allons le relancer pour voir si le service veut bien se lancer malgré des identifiants invalides. Bon là, on peut voir qu'on a exactement la même erreur, c'est-à-dire que la clé d'accès est invalide.

04:53 Donc il ne nous laisse pas le choix. On va devoir retourner sur l'interface d'a w s. Ici, donc, il suffit de se connecter à notre compte AWS. Si vous n'avez pas de compte, c'est très simple de créer votre compte. Par contre, il va falloir ajouter une carte bancaire.

05:05 Même si commencer à utiliser s trois est gratuit, Amazon vous oblige à ajouter une carte bancaire valide pour utiliser ces services. Donc, nous allons cliquer sur S trois et nous allons créer un nouveau bucket. Nous allons créer le bucket qu'on va appeler Algomax tiret Monorico. Maintenant, ici, nous avons plusieurs options. On va laisser la configuration par défaut, mais ce que j'aimerais, c'est quand même que comme c'est les images de notre application, on a envie qu'elles soient publiques, entièrement publiques, donc on ne va jamais bloquer l'accès.

05:34 On ne va pas créer de token sécurisé. On décoche donc toutes ces cases et on coche celle-ci, cet avertissement qui nous dit bien que toutes les données seront publiques et exploitables par tous. Pour que ce soit bien clair, que ça soit que des images publiques, on va rajouter monoripo tiret public tiret images au nom de notre bucket. Et maintenant, nous pouvons le créer. C'est super.

05:55 On a donc notre premier nom de bucket, c'est algomax tiret mono rip tiret public tiret images et nous allons le rajouter dans notre code en tant que AWS tiret bucket et ça prendra comme valeur algo max molorypo public images. Maintenant, on va retourner sur AWS et on va créer nos codes d'accès pour pouvoir héberger ces images. Parce que ici, on peut voir qu'on a besoin donc d'une accès ski et d'un secret. Pour ce faire, on va donc se rendre sur un autre service d'a w s qui s'appelle I am. On va le chercher dans la barre, c'est I am.

06:27 Et une fois dessus, nous allons devoir créer un nouveau user ici. On peut voir que j'ai déjà quatre user, un algo max tiret s trois bucket, un pour l'application net j s et un pour Vignalmania. On va donc créer un nouvel utilisateur et nous allons l'appeler monory pot net JSGS tiret remix. Bien sûr, cet utilisateur pourra manipuler les autres bucket, même ceux qui sont privés, si on lui donne les permissions. Donc, on n'a pas besoin de créer un utilisateur par bucket, on utilise un utilisateur et on ne partagera jamais ses identifiants avec le monde.

06:58 Ça, c'est vraiment une donnée sécurisée. Maintenant, on va cliquer sur NEXT et on va ajouter. Là, il nous propose donc d'ajouter le user à un des groupes qu'on a déjà créé pour As trois ou alors de copier les permissions d'un groupe et de créer un autre groupe. Nous, ce qu'on va faire, c'est qu'on va créer un autre groupe. On va donc chercher les permissions qu'on souhaite donner à cet utilisateur et on va taper s trois dans la barre de recherche ici et nous avons donc Amazon s trois full access et nous allons bien sûr lui donner tous les accès à notre compte s trois.

07:29 Maintenant, là, on peut voir qu'il y a un petit bouton qui s'appelle Create Policy et on va en avoir besoin tout à l'heure et on peut passer à l'étape suivante. Next et ici, on a le récapitulatif de ce que nous avons fait. On a donc créé un utilisateur qui s'appelle monoriponef. Js remix, il n'a aucun mot de passe et il n'a pas besoin de réinitialiser son mot de passe et nous allons donc le créer dès maintenant. On a donc une petite bannière qui nous dit qu'on vient de créer notre utilisateur et qu'on peut le voir.

07:54 On va cliquer sur view user et ici, on a un bouton qui s'appelle create access key et c'est exactement ce qu'on a besoin. On va donc créer une clé d'accès et ici, il nous propose plusieurs options. Nous allons utiliser Application running outside AWS et nous allons appuyer sur next et maintenant on doit décrire la valeur de ce token. On va donc l'appeler mono-repo 9 g s remix et nous allons créer notre clé d'accès et elle se trouve ici. On a donc une clé d'accès porte cette valeur.

08:24 On va donc tout de suite la sauvegarder ici et nous allons un secret qui porte cette valeur et que nous allons également sauvegarder. On va donc le sauvegarder et à partir de ce moment-là, le client AWS devrait être capable de se connecter. On va donc tout de suite faire un test avant d'aller plus loin. On va relancer le terminal avec un mp morand dev et là, on peut voir qu'on a toujours la même erreur. Et si, parce que j'ai oublié quelque chose d'important, c'est de copier ces variables d'environnement dans le fichier point invi du backend.

08:54 Ce qu'on va faire, c'est qu'on va le faire en ligne de commande, on va faire un r m du fichier backend point INV et nous allons faire un CP de notre point INV et le déplacer dans backend et ça devrait recréer notre fichier point INV. À partir de ce moment-là, on peut relancer notre commande NPM rundev et on peut voir que ça a fonctionné parce qu'on n'a plus cette erreur. On retourne donc sur AWS, on clique sur down, on ne télécharge pas la secret key et maintenant, on va retourner sur le deuxième onglet ici qui s'appelle create policy. Tout simplement parce qu'on n'a pas encore les permissions d'accéder à ce bucket s trois. Et ce qu'on a envie de faire, c'est de créer les permissions pour y accéder.

09:32 Donc, nous allons sélectionner le service s trois et ensuite nous allons ajouter plusieurs actions. Pour connaître les actions qu'on va utiliser dans notre application, il suffit de retourner dans notre base de code tout en haut ici et on peut voir qu'on a donc plusieurs actions. On a le delet object, on a le get object et nous avons le put object. C'est-à-dire qu'on a juste besoin de pouvoir modifier une image, supprimer et récupérer les informations d'une image. On retourne donc sur l'interface et on va taper get object et on va cocher cette action.

10:03 Delete object va cocher cette action et put object et nous allons également cocher cette action. Bien sûr, l'effetct c'est de à la hausse d'autoriser ces trois actions. Maintenant, on autorise s trois à effectuer un put et un delet, mais seulement sur une ressource spécifique, donc pas sur tous nos bucket s trois. Pour sélectionner la ressource sur lequel on l'autorise à effectuer cette action, eh bien nous devons retourner sur l'onglet s trois. On va retourner sur s trois et nous allons cliquer ici sur le nom de notre bucket et dans propriétés à cet endroit là, nous avons un ARN, donc le nom de la ressource et nous allons cliquer dessus comme ceci.

10:44 Et maintenant, il nous nous suffit de retourner à cet endroit-là et on peut cliquer sur add ARN to restrict Access et nous allons coller à cet endroit-là le nom de notre bucket. On colle donc ce qu'on a copié et on peut voir qu'on a déjà ici cette instruction ARN AWS, donc on peut la supprimer. Et maintenant, on a un nom de ressource qui sera autorisé. Nous allons cliquer sur add ARN comme ceci et en fait, on peut également autoriser l'accès seulement sur certaines ressources. Mais nous, on va cliquer sur any object name ou sinon, on peut tout simplement mettre une étoile, ce qui signifie qu'on veut autoriser l'accès à toutes les ressources qui sont présentes dans ce bucket.

11:22 À partir de maintenant, on peut confirmer et nous avons créé notre permission. Une fois que c'est fait, on peut cliquer sur next ici et nous allons lui attribuer un nom mono repos, ns GSMX user et enfin on va créer la policier. Bien sûr, on ne peut pas utiliser de majuscule, donc on va tout mettre en minuscule comme ceci et maintenant on peut retrouver notre policier parmi la liste des policiers que nous avons créés. Et ça nous arrange bien parce qu'en cliquant ici, on peut maintenant revoir notre configuration et on aimerait l'avoir en JSON à cet endroit-là. On a donc notre policier en JSON et nous allons la copier comme ceci et allons maintenant retourner dans s trois ici et nous allons sur l'onglet permission comme ceci parce qu'on doit rajouter cette fameuse policy pour que l'utilisateur soit autorisé à accéder à nos fichiers.

12:11 Pour ce faire, on va cliquer sur Edit bucket policy dans les paramètres de notre bucket s trois ici et à cet endroit-là, on va coller la policy que nous avions créée. Et ici, on peut voir qu'on a une petite erreur, ils nous disent messing principle. Et le principle, c'est l'utilisateur que nous avons créé dans I am. Et c'est donc qu'on doit retourner dans I am sur la liste des utilisateurs et nous allons cliquer sur l'utilisateur monoripo neste js. Et là, on peut voir qu'on a un lien ARN ici que nous allons utiliser parce que c'est notre principle.

12:42 On retourne donc à cet endroit-là et nous rajoutons la clé principle qui est un objet et qui prendra comme clé AWS et comme valeur le lien de notre principle. Maintenant, ça a l'air d'être bon. On a corrigé cette erreur et on peut sauver nos changements. C'est très bien. Donc là, on a fini de configurer Amazon s trois.

13:01 On peut maintenant tester cette implémentation. On va retourner dans v s code et on va déjà regarder les méthodes qui sont à notre disposition. On a donc une méthode qui s'appelle upload file. Et qu'est-ce qu'elle fait Elle crée un identifiant unique avec la librairie Quaid et elle crée une clé unique qui sera le nom de notre image. Ici, par exemple, si notre image s'appelle burger point JPG, la falky sera égale à un, deux, trois, quatre, cinq tiret burger point JPG.

13:29 Maintenant, on va créer un pot object commande pour ajouter cette image dans notre bucket s trois et ça prend comme paramètre le nom de notre bucket. Nous l'avions donc nommé logomax molory pot public image. Ça prendra aussi la clé unique pour être identifié. Donc le et le nom de notre image. Et comme type de contenu, ça prendra le type de contenu de notre image que nous récupérons depuis ce schéma ZOT que nous avons défini tout en haut.

13:55 Et bien sûr, comme vous le dites, ce sera notre image au format buffer. Et nous rajoutons aussi un petit peu de cache parce que c'est des images qui seront chargées par tous. Ça, c'est donc notre première méthode et on envoie cette commande à AWS. Et si on ne reçoit pas une réponse de cent, alors dans ce cas là, on affiche un message d'erreur dans la console. Sinon, nous renvoyons la clé unique pour ensuite pouvoir la sauvegarder en base de données.

14:18 Maintenant, nous avons la deuxième méthode qui s'appelle delete file et qui prend comme argument la clé unique. Et ici, c'est pareil, on a besoin de deux informations pour pouvoir récupérer un fichier dans notre bucket s trois. On a besoin du nom du bucket et du nom du fichier. Donc, on fournit les deux dans une commande qu'on appelle un delet object commande. Et enfin, on envoie cette commande à AWS.

14:42 Et ici, c'est exactement pareil si on ne reçoit pas un statut de sang. Alors dans ce cas-là, on affiche un console log du résultat de notre réponse. Et enfin, la troisième méthode s'appelle getfile URL pour pouvoir partager le lien vers cette image qui est publique. Et on peut voir qu'on a deux arguments pareil, le nom du bucket, la falky et on appelle la méthode d'a w s qui s'appelle get sined URL qui va donc nous permettre de récupérer cette image. Alors, il faut savoir qu'avec AWS, on peut récupérer une image publique et on n'a pas besoin de télécharger une librairie pour le faire.

15:17 Ici, on peut voir que l'url est assez simple, c'est donc s trois point Amazon AWS point com slash nom du bucket slash fichier slash file key. Ça sera le cas pour nous, mais je préfère quand même utiliser librairie au cas où on ait besoin un jour d'accéder à des fichiers qui sont protégés et donc pas accessibles publiquement. Donc maintenant, on a rajouté ce service, on va lancer le terminal et nous allons maintenant ajouter la logique côté front. Encore une fois, c'est quelque chose qu'on a déjà développé dans notre formation Nest le JS, cette fois sur le repository du front. Donc ce qu'on va faire, c'est qu'on va accéder au dossier app et au dossier route et dans settings à cet endroit-là.

15:57 Et ici, nous allons copier toute cette logique, donc notre action pour pouvoir héberger notre image. On va donc copier cette action et maintenant, on va retourner ici dans le front-end, dans le dossier app root public et nous allons dans le fichier my tiret services point dollars ofor edi point TFX. Et on peut voir ici qu'on a déjà une action. On a déjà une action parce que c'est notre écran d'édition d'offre. Et tout en bas, on a envie de rajouter notre image.

16:24 Donc, pour ce faire, on va devoir modifier le type de formulaire parce que c'est maintenant au format forme data s'il y a des fichiers. On va regarder le code de l'action et on a donc besoin d'un image Andler. On va donc sauvegarder ce fichier dans la mémoire et ensuite on va toujours parser notre forme data qui prendra comme paramètre la requête et notre image en l'air. On va donc tout de suite copier ce morceau de code dans l'action qui existe déjà. Juste avant le forme data, on importe donc deux méthodes instables de remix, la première et la deuxième comme ceci et comme max file, on va mettre cent mégabits pour le moment et on peut supprimer le premier forme data.

17:04 Maintenant, on a envie de copier ce schéma ZOD qui est en fait la définition d'un schéma ZOD pour un fichier de type image. On le colle donc ici. On ajoute donc dans notre schéma create of her skima à cet endroit et on va regarder ce qu'il fait. Bien sûr, on va renommer ce champ et nous allons l'appeler image comme ceci. Ce schéma Zod va nous permettre de valider un objet qui va contenir une clé image de type file.

17:29 C'est donc un fichier qui contient un buffer et une taille. Ensuite, nous faisons un super refine ici pour vérifier que la taille du fichier est bien inférieure à la taille que nous avons définie à cet endroit-là. Effectivement, on interdit les images qui sont plus lourdes que dix mégaoctets. On va donc bien mettre dix mégaoctets ici et on le rajoute aussi dans notre image Andler. Si l'image est inférieure à dix méga, dans ce cas-là, on valide cette donnée.

17:55 Ce qui va se passer du coup, c'est que quand on va soumettre notre formulaire remix ici, au lieu d'envoyer juste du texte, ce qui s'envoie très très vite, ça va aussi envoyer un stream de l'image parce que le fichier peut peser cinq méga, 6 méga, ça peut prendre jusqu'à trente secondes de l'envoyer jusqu'au serveur d'Amazon. C'est pour cela qu'on a besoin de modifier le type de formulaire et de mettre que c'est un form data. Donc maintenant, on a besoin de retourner dans le formulaire et de spécifier le type d'encoding et nous allons mettre que c'est un type form data comme ceci. Maintenant, on peut copier la logique front qu'on avait déjà codé dans l'ancienne formation. On va donc copier ces lignes et nous les ajoutons à notre formulaire ici.

18:37 On peut déjà commenter ces premières lignes et nous allons rajouter un label que nous allons appeler image et un input qui va s'appeler également image. Et ce sera de type file et ça accepte tellement les images. On va maintenant ouvrir le terminal et voir si ça fonctionne bien. Maintenant, on va retourner sur notre application et on va faire un clic droit pour inspecter la requête et l'envoi de notre formulaire. Et nous allons aussi rajouter un dernier input, ça sera un erreur list qui prendra comme erreur les erreurs de notre image comme ceci.

19:10 Donc, si on clique sur mettre à jour ici, on peut voir qu'on a une erreur parce qu'on ne renvoie pas l'image dans notre formulaire, ce qui est tout à fait normal. Si on veut juste modifier la description de notre image ou le prix, on n'a pas forcément envie de remodifier l'image. C'est pourquoi ce champ a besoin d'être facultatif dans notre formulaire. On va donc le rendre facultatif en retournant dans le schéma ici et on va le mettre optionnel. Maintenant que c'est fait, on peut retenter de soumettre le formulaire et on peut voir que ça soumet très bien.

19:39 Si on clique sur la requête, on peut voir qu'on a donc un form data avec un titre, un prix, une description, un booléen et une image au format binaire qui est évidemment égal à nul. Mais essayons maintenant de rajouter une image. On va donc prendre n'importe quelle image, celle-ci par exemple, et nous allons à nouveau mettre à jour cette offre. Là, on peut voir que ça a pris un peu plus de temps, mais essayons maintenant de rajouter une vraie image. Pour ce faire, on va rajouter un console log dans notre action.

20:06 Ici, on va donc faire console point log de submission point value point image et on va l'appeler image. Maintenant, on va ajouter une image au hasard. Celle-ci, par exemple, on va cliquer sur mettre à jour et si on retourne dans notre console, on peut voir qu'on a bien notre console log avec la taille de l'image et son type. Ça a très bien fonctionné. Donc on va rajouter une condition.

20:29 Si l'image est définie dans le formulaire, alors dans ce cas-là, on va devoir l'uploader sur Amazon s trois. Et je dis bien si elle est définie et il faut qu'elle soit définie. Parce qu'ici, un formulaire qui ne contient pas d'image, si on clique sur mettre à jour, on peut voir que l'image est thunderfined. Ce qu'on va devoir faire du coup, c'est qu'on va devoir modifier nos deux méthodes. On va devoir modifier le create et on va devoir modifier le edit ici.

20:53 Pour ce faire, on va d'abord dans le create et à cet endroit là, on va rajouter la file key de notre image. Mais pour rajouter la file key, il faut d'abord que nous la rajoutions dans notre schéma prisma. On se rend donc dans notre modèle prisma à la ligne trente-neuf pour le modèle de l'offre et ici nous allons rajouter une clé qui sera unique et qu'on va appeler file key et on va mettre un arobase unique. Bien sûr, ça pourrait être plus parlant. On pourrait l'appeler par exemple image falkey et nous allons aussi rajouter cette valeur pour notre utilisateur.

21:25 Ça sera donc l'avatar et nous allons l'appeler avatar falkey. Maintenant, on va générer une migration pour ce schéma. On va faire un cd dans back end et nous allons lancer la commande mp x prisma migrate dev tiret TRNM add falkie comme ceci. Bien sûr, on a un avertissement parce qu'on a rajouté deux clés qui sont uniques, Mais ça ne nous pose aucun problème. On utilise un QID en plus du nom du fichier, donc toutes les images seront de cotation unique.

21:52 Maintenant, on peut faire un NPX prisma generate pour régénérer les types de prisma dans les notes modules et on retourne à la racine de notre projet et on relance le serveur avec un NPN run dead. Maintenant, on peut donc retourner sur notre fichier profile point serveur point t s qui contient la logique de création d'une offre. Et ici, on retrouve maintenant notre image file key. Mais avant de récupérer cette clé sécurisée, nous avons besoin d'envoyer le fichier dans s trois. Ce qu'on va faire, c'est qu'on va instancier une image falky qui est égal à nul comme ceci et on va la tiper fortement.

22:28 On va mettre que c'est soit string, soit nul et on va rajouter une condition. Si dans le offert data, il y a la propriété image, alors dans ce cas-là, nous allons appeler notre service Amazon et nous allons héberger notre image. Pour ce faire, on va devoir rajouter le service Amazon dans le service remix. On se rend donc dans le service remix comme ceci et nous allons rajouter une clé readounly qu'on va appeler AWS et qui importera AWS trois services comme ceci. On regarde s'il n'y a pas d'erreur dans le terminal, il n'y en a pas.

22:59 Donc on peut continuer ici et nous allons faire un await contexte remix service et on appelle AWS point uploadfile comme ceci avec comme fichier notre offert data point image. Là, on se rend compte qu'on a un petit problème. Effectivement, les types ne match plus parce que le fichier qui est attendu s'attend à recevoir une size, un buffer, un nom et un mind tape. Sauf que nous, ce qu'on renvoie, c'est un ara buffer, un last modified, un name, un file et un type. Donc ce qu'on va devoir faire, c'est qu'on va devoir ouvrir les brackets ici et nous allons donc définir la size comme étant offert data point image point size.

23:39 Le même type ce sera donc offert data point image point type et le original name ce sera le offert data point image point name. Mais maintenant nous n'avons pas de buffer. Nous avons seulement un arrêt buffer et array buffer, c'est une promesse qui renvoie un type array buffer. On va donc aller sur Google et taper how to convert array buffer into buffer javascript. Et nous pouvons utiliser la méthode qui s'appelle buffer point from.

24:08 On va donc tester ce morceau de code. On va faire un await d'abord et nous allons faire un buffer point from comme ceci. Maintenant, si cette méthode réussit, dans ce cas là, ça va nous renvoyer un file key et nous allons le récupérer ici et nous allons le définir comme valeur de notre image. Donc image file key est égal à file key. Et maintenant, nous allons utiliser cette variable au cas où nous possédons bien une image.

24:33 Va donc faire un spread et nous allons mettre que si est défini, alors dans ce cas-là, on va rajouter la propriété image falky prendra comme valeur image falky. Maintenant, on va copier exactement cette même logique pour notre deuxième méthode qui est donc l'édition d'une offre. Ici, on se rend dans cette méthode. On va copier exactement la même logique et nous allons faire la même chose. On va donc spread image falky et si cette valeur existe dans ce cas là, nous allons mettre que le image falky est égal à notre image failkee.

25:06 Maintenant que c'est fait, on va tout de suite tester l'implémentation. On se rend donc sur notre offre et nous allons rajouter une image, par exemple celle-ci, et nous allons mettre à jour notre offre. Et là, on peut voir qu'on a une erreur qui nous dit no value providerd for input http label bucket. C'est sûrement un problème avec une rifacto qu'on a oublié de faire. Si on retourne dans notre service d'a w s et qu'on regarde le nom des bucket ici on a appelé notre variable d'environnement AWS bucket name mais dans notre fichier point INV on l'avait seulement appelé bucket donc on va le renommer tout de suite en bucket name il faut bien renommer les deux fichiers point n v de notre projet, celui qui est dans back end également.

25:50 Maintenant, on va pouvoir qu'il le terminal et le relancer et nous allons retourner sur notre projet et reproduire l'opération. On sélectionne donc une image, on clique sur mettre à jour et là ça charge un petit peu. Et normalement, si on se rend dans notre bucket s trois, on actualise la page, on peut voir qu'on a un nouveau fichier ici au format jpeg qui pèse quatre virgule deux mégabits. Si on clique dessus, on peut même le voir. Si on clique sur open, on peut voir notre image en grand parce qu'elle est publique.

26:19 Au final, je viens de me rendre compte de quelque chose, si on clique sur object URL ici, on peut voir qu'on a un access denade, ce qui veut dire que cette image en fait n'est pas vraiment publique. Quand j'ai cliqué sur open ici, ça m'a chargé l'image et ça a rajouté un paramètre pour se connecter et pour être autorisé à y accéder. Et au final, j'ai compris pourquoi. J'ai regardé une ancienne règle que j'avais créée pour le bucket vinyle malien et on peut voir ici que le principle est en fait une étoile à cet endroit-là sur l'action s trois get object. Donc ce qu'on va faire, c'est qu'on va copier cet objet-là et nous allons modifier tout de suite notre bucket.

26:58 On retourne dans les permissions et on va éditer la polifie et nous avons donc ce premier qui autorise donc notre utilisateur à faire un put, un get et un délite sauf que nous allons rajouter un deuxième objet. Cet objet va autoriser tout le monde à faire un get et nous allons mettre exactement la même ressource qui est donc celle de notre bucket. Maintenant, si on sauvegarde les changements, on va refaire une tentative. On va donc récupérer les object ici et normalement en cliquant dessus, c'est maintenant bon, on n'a plus besoin d'avoir un secret de générer pour accéder à ce document. Ça a très bien fonctionné et maintenant nous allons afficher cette image dans notre composant.

27:41 Pour la récupérer, on a besoin à cet endroit-là dans le get user offert de récupérer d'abord le image et on va donc récupérer toutes les informations de notre offre on va donc enlever ce return et à la place nous allons sauvegarder dans une variable cet appel à la d b et nous allons la renvoyer en faisant une déstructuration comme ça. Mais nous allons rajouter un image url. Ce image url sera égal à l'url de notre image. On va donc rajouter une condition. Si notre offre possède un image file key qui est quand même un champ optionnel, alors dans ce cas-là, on va récupérer l'url de cette image en faisant un await et nous allons dans cette méthode appeler notre service AWS avec un get file url qui prendra comme paramètre notre file key et ça va nous renvoyer une image url comme ceci sous forme de string.

28:34 Donc ce qu'on peut faire, c'est qu'on peut même faire un let en dehors de la méthode et l'initier un string vide. Et si jamais on a une falky, alors dans ce cas-là, on appelle la méthode de AWS get falky. Maintenant, on peut renvoyer notre image url côté client et ça va nous permettre d'afficher notre image dans un élément de type image. Et à cet endroit, on peut donc décommenter cette instruction, sauf qu'on va récupérer l'offer ici et ça sera le image URL. Si on a un l'offer image URL, eh bien on souhaiterait l'afficher à nos utilisateurs.

29:07 Bien sûr, ceci seulement dans le cas où le soit défini. Regardons maintenant si on peut consulter notre image sur notre offre. Effectivement, on la consulte bien, elle est bien visible, c'est une très bonne nouvelle. Donc ce qu'on a envie de faire maintenant, c'est de l'afficher à cet endroit-là au lieu d'afficher ces champs-là. Et pour ce faire, on va devoir reproduire exactement la même logique qu'ici, sauf pour toutes les images.

29:30 Donc, on va se rendre sur notre page d'accueil, sur le fichier index point TFX ici et nous allons cliquer sur la méthode getofers et au lieu de renvoyer un tableau d'offres, on va les sauvegarder dans une variable et avant de les renvoyer, nous allons ajouter une propriété image url. Donc on copie le code qu'on a déjà utilisé et nous allons renvoyer un tableau d'offres comme ceci et nous allons instance une nouvelle variable qu'on va appeler offers with images et en fait on va tout simplement boucler sur les offres et sur chaque offre nous allons copier cette logique ça sera donc une fonction asynchrone et nous allons devoir donc faire un naweit promise dot all sur chacune des offres parce qu'on va appeler cette méthode de notre service AWS. Et pour chacune de nos offres, ici, on récupère donc le image failky et s'il existe alors dans ce cas là on récupère le image URL et ensuite on fait exactement la même chose on va déstructurer les valeurs de notre offre et on va rajouter la propriété image URL on n'oublie pas bien sûr de récupérer la propriété image falky à cet endroit. Et maintenant, c'est le other with images qu'on va renvoyer côté front.

30:42 On va donc le renvoyer comme ceci et on peut voir que ça renvoie également côté front le image telky dans le type et nous on n'a pas trop envie de le faire. Donc ce qu'on va faire, c'est qu'on va récupérer les props, on va refaire un spread, on va récupérer image telky et les autres props, nous allons les renvoyer comme ceci côté client. Maintenant qu'on a près de cette propriété, on peut tout simplement la conditionner comme ceci et on a un code plus propre qui ne contient pas notre. Maintenant, on peut retourner côté client ici, là où on boucle sur les services et nous avons donc notre image à cet endroit-là et nous allons afficher conditionnellement l'autre image si elle est définie. Donc, si nous avons un image url de définie, dans ce cas-là, on va l'utiliser comme url.

31:28 Sinon on peut toujours utiliser le play solder. Et maintenant, on peut voir que ça a bien fonctionné. Je retrouve maintenant mon image comme offre sur cette application. On va faire une dernière chose pour forcer une taille à cent cinquante pixels. Ce qui serait cool, c'est d'imposer une taille de quarante pixels.

31:45 On va mettre la hauteur de la même taille, on va ajouter la classe aspect square pour que ça soit un carré et nous allons rajouter la classe object cober pour que l'image, même si c'est au format paysage ou portrait, ça soit quand même sous forme de carré. Ça a bien fonctionné, maintenant c'est un petit peu moche, donc en fait on va retirer le aspect square comme ceci. En fait, on va tout simplement mettre un wheels full et un hash auto et on va rajouter un max edge et on va mettre par exemple cent-vingt pixels de hauteur maximum. On va plutôt partir sur du cent-soixante pixels pour conserver des bonnes dimensions. Et voilà comment on peut rajouter l'hébergement de fichiers au niveau des offres.