Como fazer upload de uma imagem para o armazenamento firebase e salvar o URL dessas imagens no banco de dados firestore em React + Firebase

Recentemente, fiquei preso em uma pequena implementação enquanto trabalhava com o formulário de registro no react & firebase, onde queria salvar o URL das imagens carregadas em um documento do banco de dados firestore.
Vamos explorá-lo neste artigo.

TL;DR
Vamos ver nossa demonstração em ação:

Implementação:

Supõe-se que você tenha o aplicativo react clichê pronto com você e também tenha alguns pré-requisitos básicos conhecidos sobre como criar uma conta do firebase, um novo projeto e um novo aplicativo da web dentro dele e habilitar o banco de dados e o armazenamento do firestore a partir dele. Estaremos utilizando algumas bibliotecas para facilitar nossa vida que são:

• material-ui (você pode usar qualquer framework css de sua escolha)
• base de fogo

Agora, exportaremos algumas entidades, como app ,auth e storage object, e as usaremos em nosso app.js.

Vamos pular para o núcleo do nosso arquivo principal, primeiro tivemos um elemento de entrada material-ui e o envolvemos dentro de um manipulador de eventos handleSubmit.
Agora veremos de perto como podemos salvar o URL das imagens carregadas no banco de dados firestore para torná-lo acessível globalmente:

• PASSO 1: armazenando a imagem carregada no armazenamento:
  Primeiro, criamos uma referência ao nosso armazenamento de imagens chamada storageRef e passamos para a função uploadBytesResumable que aceita essa referência e o arquivo necessário para fazer o upload. Para um procedimento mais detalhado, consulte isto .
• PASSO 2: armazenando esta imagem como um URL no banco de dados do firestore:
  Criamos uma referência genérica ao nosso firestore chamada collectionRef que recebe 3 parâmetros que são o objeto db , o nome da coleção e o último é o id do documento (que pode ser gerado automaticamente ou algo significativo no contexto para o seu aplicativo, aqui, para simplificar, codifiquei o id do documento.
  Em seguida, temos um evento uploadTask.on() , que tem uma função de retorno de chamada dentro da qual usamos a função getDownloadURL baseada em promessa e obtivemos o URL das imagens na variável downloadURL Agora vem a
  parte importante que simplesmente colocamos este url em nosso documento usando a função updateDoc . (Observe que poderíamos ter feito uso da função setDoc , mas usamosupdateDoc porque queríamos atualizar alguns campos de um documento sem substituir o documento inteiro.

É isso, se você tiver alguma dúvida ou precisar de mais ajuda, me chame, obrigado por ler