Come caricare un'immagine nell'archivio Firebase e salvare l'URL di quell'immagine nel database Firestore in React+Firebase

Di recente sono rimasto bloccato in una piccola implementazione mentre lavoravo con il modulo di registrazione in react & firebase dove volevo salvare l'URL delle immagini caricate in un documento del database firestore.
Esploriamolo in questo articolo.

TL; DR
Vediamo la nostra demo in azione:

Implementazione:

Si presume che tu abbia un'app di reazione boilerplate pronta con te e che tu abbia anche alcuni prerequisiti di base noti su come creare un account Firebase, un nuovo progetto e una nuova app Web al suo interno e abilitare il database Firestore e l'archiviazione da esso. Faremo uso di alcune librerie per semplificarci la vita che sono:

• material-ui (puoi usare qualsiasi framework css di tua scelta)
• base di fuoco

Ora esporteremo alcune entità come app, auth e storage object e le utilizzeremo nel nostro app.js.

Passiamo al nocciolo del nostro file principale, per prima cosa abbiamo avuto un elemento di input material-ui e lo abbiamo racchiuso all'interno di un gestore di eventi handleSubmit.
Ora vedremo da vicino come siamo in grado di salvare l'URL delle immagini caricate nel database firestore per renderlo accessibile a livello globale:

• PASSAGGIO 1: memorizzazione dell'immagine caricata nello spazio di archiviazione: per
  prima cosa abbiamo creato un riferimento al nostro archivio di immagini denominato storageRef e lo abbiamo passato alla funzione uploadBytesResumable che accetta questo riferimento e il file necessario per il caricamento. Per una procedura più dettagliata, fare riferimento a questo .
• PASSAGGIO 2: memorizzazione di questa immagine come URL nel database firestore:
  abbiamo creato un riferimento generico al nostro firestore denominato collectionRef che accetta 3 parametri che sono oggetto db , nome raccolta e ultimo è id documento (che può essere generato automaticamente o qualcosa di significativo nel contesto alla tua applicazione, qui per semplicità ho codificato l'ID del documento.Poi
  abbiamo un evento uploadTask.on() , che ha una funzione di callback all'interno della quale abbiamo utilizzato la funzione getDownloadURL basata sulla promessa e ottenuto l'URL delle immagini nella variabile downloadURL Ora
  arriva la parte importante: abbiamo semplicemente inserito questo URL nel nostro documento usando la funzione updateDoc .(Nota che avremmo potuto usare la funzione setDoc ma abbiamo usatoupdateDoc perché volevamo aggiornare alcuni campi di un documento senza sovrascrivere l'intero documento.

Ecco fatto, se hai qualche dubbio o hai bisogno di ulteriore assistenza contattami, grazie per aver letto