Cómo cargar una imagen en el almacenamiento de firebase y guardar la URL de esas imágenes en la base de datos de firestore en React+Firebase

Recientemente me quedé atrapado en una pequeña implementación mientras trabajaba con el formulario de registro en reaccionar y base de fuego donde quería guardar la URL de las imágenes cargadas en un documento de la base de datos de Firestore.
Vamos a explorarlo en este artículo.

TL;DR
Veamos nuestra demostración en acción:

Implementación:

Se supone que tiene la aplicación de reacción repetitiva lista con usted y también tiene algunos requisitos previos básicos conocidos sobre cómo crear una cuenta de base de fuego, un nuevo proyecto y una nueva aplicación web dentro de ella y habilitar la base de datos de Firestore y el almacenamiento desde ella. Haremos uso de algunas bibliotecas para facilitarnos la vida, que son:

• material-ui (puede usar cualquier marco css de su elección)
• base de fuego

Ahora exportaremos algunas entidades, como la aplicación, la autenticación y el objeto de almacenamiento, y las utilizaremos en nuestro app.js.

Vayamos al núcleo de nuestro archivo principal, primero tuvimos un elemento de entrada material-ui y lo envolvimos dentro de un controlador de eventos handleSubmit.
Ahora veremos de cerca cómo podemos guardar la URL de las imágenes cargadas en la base de datos de Firestore para que sea accesible globalmente:

• PASO 1: almacenar la imagen cargada en el almacenamiento:
  Primero creamos una referencia a nuestro almacenamiento de imágenes llamada storageRef y la pasamos a la función uploadBytesResumable que acepta esta referencia y el archivo necesario para cargar. Para un procedimiento más detallado, consulte este .
• PASO 2: almacenar esta imagen como una URL en la base de datos de firestore:
  Creamos una referencia genérica a nuestro firestore llamada collectionRef que toma 3 parámetros que son el objeto db , el nombre de la colección y el último es la identificación del documento (que puede generarse automáticamente o algo significativo en contexto a su aplicación, aquí por el bien de la simplicidad he codificado la identificación del documento
  Luego tenemos un evento uploadTask.on() , que tiene una función de devolución de llamada dentro de la cual usamos la función getDownloadURL basada en promesas y obtuvimos la URL de las imágenes en la variable downloadURL Ahora viene la parte importante ,
  simplemente insertamos esta URL en nuestro documento usando la función updateDoc . (Tenga en cuenta que podríamos haber usado la función setDoc pero usamosupdateDoc porque queríamos actualizar algunos campos de un documento sin sobrescribir todo el documento.

Eso es todo, si tienes alguna duda o necesitas más ayuda, contáctame, gracias por leer