Jak przesłać obraz do magazynu firebase i zapisać adres URL tego obrazu w bazie danych firestore w React + Firebase

Tak więc ostatnio utknąłem w małej implementacji podczas pracy z formularzem rejestracyjnym w React & Firebase, gdzie chciałem zapisać adres URL przesłanych obrazów w dokumencie bazy danych Firestore.
Przyjrzyjmy się temu w tym artykule.

TL;DR
Zobaczmy nasze demo w akcji:

Realizacja:

Zakłada się, że masz gotową aplikację do reagowania na szablony , a także znasz podstawowe wymagania wstępne dotyczące tworzenia konta Firebase, nowego projektu i nowej aplikacji internetowej w nim oraz włączenia bazy danych Firestore i przechowywania z niej. Będziemy korzystać z niektórych bibliotek, aby ułatwić sobie życie, które są:

• material-ui (możesz użyć dowolnego wybranego frameworka css)
• baza ogniowa

Teraz wyeksportujemy niektóre encje, takie jak app, auth & storage object i wykorzystamy je w naszym app.js.

Przejdźmy do rdzenia naszego głównego pliku, najpierw mieliśmy element wejściowy material-ui i opakowaliśmy go w procedurę obsługi zdarzeń handleSubmit.
Teraz przyjrzymy się z bliska, jak jesteśmy w stanie zapisać adresy URL przesłanych obrazów w bazie danych firestore, aby były dostępne globalnie:

• KROK 1: przechowywanie przesłanego obrazu w magazynie:
  Najpierw stworzyliśmy odniesienie do naszego magazynu obrazów o nazwie storageRef i przekazaliśmy je do funkcji uploadBytesResumable , która akceptuje to odniesienie i plik potrzebny do przesłania. Aby uzyskać bardziej szczegółową procedurę, zapoznaj się z tym .
• KROK 2: przechowywanie tego obrazu jako adresu URL w bazie danych firestore:
  Stworzyliśmy ogólne odniesienie do naszego firestore o nazwie collectionRef, które przyjmuje 3 parametry, którymi są obiekt db , nazwa kolekcji i ostatni to identyfikator dokumentu (który może być generowany automatycznie lub coś znaczącego w kontekście do Twojej aplikacji, tutaj dla uproszczenia zakodowałem na stałe identyfikator dokumentu.
  Następnie mamy zdarzenie uploadTask.on() , które ma funkcję wywołania zwrotnego, wewnątrz której użyliśmy funkcji getDownloadURL opartej na obietnicy i otrzymaliśmy adres URL obrazów w zmiennej downloadURL .
  Teraz jest ważna część, którą po prostu wrzuciliśmy ten adres URL do naszego dokumentu za pomocą funkcji updateDoc . (Zauważ, że mogliśmy skorzystać z funkcji setDoc , ale użyliśmyupdateDoc , ponieważ chcieliśmy zaktualizować niektóre pola dokumentu bez nadpisywania całego dokumentu.

To wszystko, jeśli masz jakieś wątpliwości lub potrzebujesz dalszej pomocy, napisz do mnie, dzięki za przeczytanie