Как загрузить изображение в хранилище firebase и сохранить URL-адрес этого изображения в базе данных firestore в React+Firebase

Итак, недавно я застрял в небольшой реализации при работе с регистрационной формой в React & Firebase, где я хотел сохранить URL-адрес загруженных изображений в документе базы данных FireStore.
Давайте рассмотрим это в этой статье.

TL;DR
Давайте посмотрим на нашу демонстрацию в действии:

Выполнение:

Предполагается, что у вас есть готовое шаблонное приложение для реагирования, а также известны некоторые базовые предварительные условия о том, как создать учетную запись firebase, новый проект и новое веб-приложение внутри него, а также активировать базу данных firestore и хранилище из нее. Мы будем использовать некоторые библиотеки, чтобы упростить нашу жизнь, а именно:

• material-ui (вы можете использовать любой CSS-фреймворк по вашему выбору)
• огневая база

Теперь мы экспортируем некоторые объекты, такие как объект приложения, аутентификации и хранилища, и будем использовать их в нашем app.js.

Давайте перейдем к ядру нашего основного файла, у нас сначала был элемент ввода material-ui, и мы поместили его в обработчик события handleSubmit.
Теперь мы внимательно посмотрим, как мы можем сохранить URL-адрес загруженных изображений в базе данных firestore, чтобы сделать его доступным по всему миру:

• ШАГ 1: сохранение загруженного изображения в хранилище.
  Сначала мы создали ссылку на наше хранилище изображений с именем storageRef и передали ее функции uploadBytesResumable , которая принимает эту ссылку и файл, необходимый для загрузки. Для более подробной процедуры обратитесь к этому .
• ШАГ 2: сохранение этого изображения в виде URL-адреса в базе данных firestore: мы
  создали общую ссылку на наше firestore с именем collectionRef, которая принимает 3 параметра: объект базы данных, имя коллекции и последний идентификатор документа (который может быть сгенерирован автоматически или что-то значимое в контексте к вашему приложению, здесь для простоты я жестко запрограммировал идентификатор документа Затем у нас есть событие uploadTask.on() , в котором есть функция обратного вызова, внутри которой мы использовали функцию getDownloadURL на основе обещаний и получили URL-адрес изображения в переменной downloadURL , Теперь наступает важная часть, мы просто вставили этот URL в наш документ, используя функцию updateDoc . (Обратите внимание, что мы могли бы использовать функцию setDoc , но мы использовали
  
  updateDoc , потому что мы хотели обновить некоторые поля документа, не перезаписывая весь документ.

Вот и все, если у вас есть какие-либо сомнения или вам нужна дополнительная помощь, свяжитесь со мной, спасибо за чтение