Comment télécharger une image sur le stockage firebase et enregistrer l'URL de ces images dans la base de données firestore dans React + Firebase

Donc, récemment, j'étais coincé dans une petite implémentation alors que je travaillais avec le formulaire d'inscription dans React & Firebase où je voulais enregistrer l'URL des images téléchargées dans un document de la base de données Firestore.
Découvrons-le dans cet article.

TL;DR
Voyons notre démo en action :

Mise en œuvre:

Il est supposé que vous avez une application de réaction standard prête avec vous et que vous avez également des prérequis de base connus sur la façon de créer un compte Firebase, un nouveau projet et une nouvelle application Web à l'intérieur et d'activer la base de données Firestore et le stockage à partir de celle-ci. Nous utiliserons certaines bibliothèques pour nous faciliter la vie, à savoir :

• material-ui (vous pouvez utiliser n'importe quel framework CSS de votre choix)
• base de feu

Maintenant, nous allons exporter certaines entités telles que l'application, l'authentification et l'objet de stockage et nous les utiliserons dans notre app.js.

Passons au cœur de notre fichier principal, nous avons d'abord eu un élément d'entrée material-ui et l'avons enveloppé dans un gestionnaire d'événements handleSubmit.
Nous allons maintenant voir de près comment nous pouvons enregistrer l'URL des images téléchargées dans la base de données firestore pour la rendre globalement accessible :

• ÉTAPE 1 : stocker l'image téléchargée dans le stockage :
  nous avons d'abord créé une référence à notre stockage d'images nommée storageRef et l'avons transmise à la fonction uploadBytesResumable qui accepte cette référence et le fichier nécessaire au téléchargement. Pour une procédure plus détaillée, reportez -vous à ce .
• ÉTAPE 2 : stocker cette image en tant qu'URL dans la base de données firestore :
  nous avons créé une référence générique à notre firestore nommée collectionRef qui prend 3 paramètres qui sont l'objet db , le nom de la collection et le dernier est l'identifiant du document (qui peut être généré automatiquement ou quelque chose de significatif dans le contexte à votre application, ici, par souci de simplicité, j'ai codé en dur l'identifiant du document.Ensuite
  , nous avons un événement uploadTask.on () , qui a une fonction de rappel à l'intérieur de laquelle nous avons utilisé la fonction getDownloadURL basée sur la promesse et obtenu l'URL des images dans la variable downloadURL Vient maintenant la partie importante ,
  nous avons simplement poussé cette URL dans notre document en utilisant la fonction updateDoc .(Notez que nous aurions pu utiliser la fonction setDoc mais nous avons utiliséupdateDoc parce que nous voulions mettre à jour certains champs d'un document sans écraser le document entier.

Voilà, si vous avez des dobuts ou si vous avez besoin d'aide supplémentaire, contactez-moi, merci d'avoir lu