‫Conférencier : permettons maintenant aux
‫utilisateurs de télécharger leurs photos directement sur notre site Web.
‫Et c'est donc ce que nous voulons.
‫Lorsque nous cliquons ici, nous voulons essentiellement
‫ouvrir une nouvelle fenêtre pour laquelle nous
‫pouvons sélectionner une nouvelle image à télécharger, puis lorsque nous cliquons
‫sur ce bouton et soumettons
‫un formulaire bien sûr, nous voulons télécharger cette
‫image dans notre backend et mettre à jour l'utilisateur , à droite.
‫Et donc la première étape
‫pour le faire sera d'ajouter un nouvel élément d'entrée à notre html.
‫Donc, en gros, à notre modèle de pack
‫qui permettra ensuite à ce sélecteur de fichier de
‫s'ouvrir lorsque nous cliquons ici.
‫Alors, allons à nos vues et
‫à nos comptes et c'est donc ce formulaire où nous
‫devons maintenant ajouter cette entrée.
‫Donc maintenant, nous avons ce lien ici qui dit nouvelle photo.
‫Mais bien sûr, ce n'est pas un lien que nous allons utiliser.
‫Donc, c'était vraiment juste un espace réservé.
‫Et donc débarrassons-nous en.
‫Donc, ce dont nous avons besoin, c'est d'une entrée.
‫Désactivé pour saisir le fichier.
‫Très bien, donc avant, pour le nom, nous
‫avions une entrée avec le type texte.
‫Nous avons également une entrée avec le type d'e-mail
‫et il y en a aussi un spécial pour le mot de passe.
‫Donc saisie pour le mot de passe et donc
‫pour les fichiers, il y en a bien sûr un pour les fichiers.
‫Nous pouvons alors spécifier quel type de fichier nous acceptons réellement.
‫Et nous pouvons faire quelque chose comme ça.
‫Image et puis tous.
‫Donc, fondamentalement, tous les formats ont leurs images,
‫donc ceux qui ont un type d'esprit commençant
‫par image sont acceptés ici.
‫Maintenant, donnons également ici un nom
‫de classe afin qu'il apparaisse bien formaté sur notre page.
‫Et c'est donc le nom de la classe que j'ai dans mon css.
‫Et maintenant aussi en lui donnant un ID afin que nous puissions ensuite le
‫sélectionner dans un script java.
‫Ajoutez cela comme photo et enfin, tout comme les
‫autres champs, nous lui donnons également un nom.
‫Donc nom de la photo aussi.
‫Et bien sûr c'est photo car c'est le
‫nom que nous avons dans notre document
‫utilisateur et c'est aussi le nom du champ que multer attend.
‫C'est donc ici un téléchargement, puis nous spécifions également une étiquette
‫pour cela.
‫Et nous l'avons mis
‫à quatre, puis l'ID de l'élément d'entrée, d'accord.
‫Je ne sais donc pas
‫si vous savez comment cela fonctionne en html, mais
‫ce n'est pas non plus très important.
‫Donc, la façon dont cela se produit est
‫que lorsque nous cliquons sur cette étiquette ici, cela activera
‫alors l'élément d'entrée qui a l'ID que nous
‫spécifions ici dans le formulaire.
‫Et donc dans ce cas c'est la photo, d'accord.
‫Et en fait
‫c'est cette étiquette ici qui fera choisir au texte la nouvelle photo.
‫Et donc, lorsque nous cliquons ensuite sur
‫l'étiquette, cela activera cette entrée
‫qui à son tour ouvrira la fenêtre à
‫partir de laquelle nous pourrons sélectionner un fichier.
‫Et c'est tout ce que nous devons faire pour l'entrée ici.
‫Maintenant, comme avant, il existe deux manières possibles
‫d'envoyer ces données au serveur.
‫Donc d'abord, sans l'API comme nous l'avons fait dans
‫une conférence précédente.
‫On trouve déjà l'action que l'on veut
‫entreprendre et aussi la méthode.
‫Et avec cela, les
‫données sont ensuite directement envoyées au serveur.
‫Maintenant, si nous voulions envoyer un
‫fichier en utilisant cette méthode, nous devrons alors
‫spécifier une autre option ici.
‫Et c'est le type enc.
‫Donc, le type enc devrait être des données de formulaire en plusieurs parties.
‫Donc, les données sous forme de barre oblique en plusieurs parties, d'accord.
‫Et donc là encore, nous avons ce nom en plusieurs parties.
‫Et comme nous l'avons dit
‫précédemment, le multi-parties sert toujours à envoyer des fichiers au serveur.
‫Et encore une fois, nous avons en fait besoin
‫du middleware multer pour gérer ces données de formulaire en plusieurs parties, d'accord.
‫Et en fait, le nom multer vient de multi-part.
‫Alors multer, multer, d'accord.
‫Quoi qu'il en soit, encore une fois, si nous voulions
‫envoyer les données sans API, nous devions
‫toujours spécifier ce type d'enc.
‫Sinon, le formulaire ignorerait simplement le fichier
‫et ne l'enverrait pas, d'accord.
‫Mais comme nous le savons
‫déjà, nous l'utilisons avec l'API, n'est-ce pas.
‫Et donc nous n'avons pas besoin de spécifier ce
‫type d'enc, mais nous devrons en quelque sorte le faire par programme.
‫Et donc faisons-le réellement.
‫Envoyons donc maintenant nos données, y compris bien
‫sûr la photo en faisant un appel
‫API comme nous l'avons fait dans la dernière section.
‫Et donc nous devons maintenant ouvrir dans notre dossier public et à
‫partir de leur js, nous ouvrons index. js.
‫Et c'est donc ici que nous envoyons réellement
‫les données à mettre à jour sur le serveur.
‫Eh bien, nous ne les envoyons
‫pas vraiment ici, mais nous les sélectionnons dans le
‫formulaire, puis les transmettons aux paramètres de mise à jour.
‫D'accord, mais maintenant, rappelez-vous comment j'ai dit que
‫nous devions en quelque sorte recréer
‫par programme les données d'un formulaire en plusieurs parties ?
‫Et donc nous devons le faire comme ça.
‫Appelons-le formulaire, puis nouvelles données de formulaire.
‫Très bien, et maintenant sur ce formulaire,
‫nous devons continuer à ajouter de nouvelles données.
‫Et fondamentalement, un ajout pour chacune des données
‫que nous voulons envoyer.
‫Alors forme. ajouter et le premier est le nom.
‫Nous spécifions donc ici le nom, puis la valeur du nom.
‫Et c'est donc bien sûr celui-ci.
‫Alors saisissons-le, collez-le ici et dupliquez-le.
‫Et la prochaine étape est l'e-mail, d'accord.
‫Alors débarrassons-nous de cette entrée dans les paramètres de mise à jour.
‫On passe ensuite le formulaire, d'accord.
‫Et ou un appel de texte utilisant
‫axios reconnaîtra alors cette
‫forme ici comme un objet
‫et fonctionnera exactement de la même manière qu'avant, d'accord.
‫Donc, ici, dans les paramètres de mise
‫à jour où nous transmettons
‫les données, qui sont ensuite transmises ici dans
‫la requête axios, nous n'avons rien à changer.
‫Très bien, cela équivaut donc à ce que nous
‫avions auparavant avec le nom et l'e-mail, mais maintenant,
‫bien sûr, ajoutons également la photo qui est la
‫seule raison pour laquelle nous devons maintenant le
‫faire comme ça.
‫Alors forme. ajouter à nouveau puis le nom que nous
‫voulons lui donner est bien sûr à nouveau, photo
‫puis document. getelementbyid qui
‫est aussi une photo mais maintenant ce n'est pas le cas. valeur mais à la
‫place. fichiers, d'accord.
‫Et ces fichiers sont
‫en fait dans un tableau et donc comme
‫il n'y en a qu'un, nous devons
‫sélectionner ce premier élément dans le tableau et c'est donc zéro.
‫Très bien, et enregistrons
‫ce formulaire sur la console jusqu'à ce que nous ayons un rapide aperçu de
‫ce qu'est réellement ce formulaire.
‫Mais en un mot, comme je l'ai déjà dit, nous
‫recréons essentiellement ces données de formulaire en plusieurs parties.
‫Et c'est en fait pourquoi on l'appelle données de formulaire parce que,
‫eh bien, ces données de formulaire sont
‫également ici dans ce type enc en plusieurs parties, d'accord.
‫Donc, je suppose que cela est en fait suffisant pour
‫que nous puissions maintenant essayer cela.
‫Donc, comme je l'ai dit, dans les paramètres
‫de mise à jour, nous n'avons rien à
‫changer et également le point de
‫terminaison de mise à jour où nous soumettons
‫cet outil de demande, donc celui-ci fonctionne déjà et est prêt à
‫accepter des images et même à les redimensionner, d'accord.
‫Et donc allons-y maintenant et essayons ceci.
‫Et donc rechargeons ceci une fois de plus.
‫Et donc voyons, et en effet, nous
‫obtenons maintenant notre sélecteur de fichiers en gros.
‫Donc cette fenêtre où nous pouvons maintenant
‫sélectionner le fichier et ce que
‫je vais faire, c'est
‫essentiellement remettre l'image originale que nous avions sur cet utilisateur.
‫C'est donc sur le
‫bureau, natours, public, les utilisateurs d'images, et c'était l'utilisateur 11, donc celui-ci.
‫Et c'est maintenant téléchargé.
‫Alors ouvrez, enregistrez dans les paramètres et la mise à jour des données est réussie.
‫Maintenant, cela ne se reflète pas ici immédiatement.
‫Ni ici ni là-haut, mais cela devrait
‫être le cas une fois que nous avons téléchargé cette page.
‫Et on pourrait effectivement le faire
‫aussi avec java script mais c'est en fait beaucoup de travail.
‫J'avais essayé de le faire et je l'ai
‫fait, mais j'ai ensuite pensé que c'était trop de travail
‫et que cela ne valait pas la peine de le mettre en œuvre ici.
‫Mais de toute façon, juste pour tester si cela a
‫réellement fonctionné, nous devons maintenant recharger la page.
‫Et il l'a fait.
‫Voici maintenant la nouvelle image que nous venons de télécharger.
‫Tellement bon.
‫Jetons un coup d'œil au dossier lui-même.
‫S'il est bien là aussi, et
‫s'il a été correctement transformé.
‫C'est donc une image.
‫Rechargeons-le ici.
‫Et maintenant je ne sais plus lequel c'est.
‫Ah, exactement.
‫Donc 500 fois 500
‫et maintenant c'est complètement flou car l'image originale était beaucoup plus petite.
‫Mais peu importe, cela n'a pas d'importance du tout.
‫Ce qui compte, c'est que nous
‫pouvons maintenant télécharger des photos directement à partir de ce formulaire.
‫Je veux que c'est tout pour jeter
‫un œil à notre console ici à ces données
‫de formulaire que je pensais que nous avions enregistrées et qui n'apparaissaient pas ici car nous
‫avons déjà rechargé la page.
‫Mais de toute façon, je voulais remettre l'autre image ici.
‫Donc, celui que nous avons téléchargé avant est en
‫dev-data, image et aarav.
‫Très bien, les données ont été mises à jour avec succès.
‫Jetons rapidement un coup d'œil à nos données téléphoniques ici.
‫Ah, mais je suppose que nous ne pouvons pas vraiment voir ce que nous avons ici.
‫Voyons voir.
‫Non, nous ne pouvons pas vraiment voir ce que nous avons.
‫D'accord, donc je n'ai jamais jeté un œil à ça.
‫Et j'ai pensé que nous pourrions peut-être voir l'information
‫mais tant pis.
‫Ce qui compte, c'est que cela a réellement fonctionné.
‫Donc, si nous rechargeons maintenant, alors bien sûr cette
‫ancienne image est de retour.
‫Génial, donc encore une fois, cette application commence vraiment à ressembler
‫de plus en plus à un vrai travail.