Como fazer upload de arquivos para o Firebase Storage usando React.js

O armazenamento do Firebase oferece uma maneira simples de armazenar dados gerados pelo usuário, como imagens, vídeos e arquivos de áudio. Ele se integra à autenticação do Firebase, para que você possa controlar quem tem acesso aos arquivos.

Você pode armazenar grandes quantidades de conteúdo usando o Firebase, pois ele é dimensionado automaticamente para atender às suas necessidades. É simples de usar com uma estrutura de terceiros, como a biblioteca React JavaScript

Configuração do projeto

Para fazer upload de arquivos para Armazenamento do Firebase, você precisa criar um formulário da Web que permita aos usuários selecionar um arquivo do sistema de arquivos.

Começar por criando um aplicativo React usando create-react-app. Execute este comando para gerar um projeto React chamado upload do firebase:

npx crio-react-app firebase-upload

Para simplificar, você só precisa de um botão de entrada que aceite arquivos e um botão de upload. Substitua o conteúdo de App.js com o seguinte código.

importar





instagram viewer
 {useState} a partir de "reagir"
funçãoAplicativo() {
 const [arquivo, setArquivo] = useState("");
// Manipula a entrada mudançaeventoe estado de atualizações
funçãomanipularAlterar(evento) {
setFile(evento.alvo.arquivos[0]);
 }
Retorna (
<div>
<tipo de entrada ="Arquivo" aceitar="imagem/*" onChange={handleChange}/>
<botão>Carregar para o Firebase</button>
</div>
 );
}
exportarpredefinição Aplicativo;

No código acima, o entrada Tag aceitar atributo está definido para permitir apenas imagens. o handleChange() A função manipula a mudança de entrada e atualiza o estado para armazenar o arquivo selecionado.

Configurar o Firebase

Antes de fazer upload do arquivo para o armazenamento do Firebase, você precisa criar um projeto do Firebase.

Criar um projeto do Firebase

Siga as instruções abaixo para criar um projeto do Firebase:

1. Vou ao Firebase página do console e clique em Adicionar projeto ou Criar um projeto (se você estiver criando um projeto pela primeira vez).
2. Dê ao seu projeto um nome de sua escolha e clique em Continuar.
3. Desmarque o Google Analytics, pois você não precisa dele para este projeto e clique em Criar projeto.
4. Clique Continuar assim que o projeto estiver pronto.
5. Clique no ícone da web na página de visão geral do projeto para registrar um aplicativo da web.
6. Dê um apelido ao seu aplicativo e clique em Registro.
7. Copie o objeto de configuração fornecido. Você precisará dele para conectar seu aplicativo ao Firebase.

Criar um bucket do Cloud Storage

O Firebase armazena arquivos em um bucket de armazenamento em nuvem. Siga os seguintes passos para criá-lo:

1. Na página de visão geral do projeto, clique no botão Armazenar guia no painel de navegação esquerdo.
2. Clique Iniciar e selecione modo de teste.
3. Selecione o local do bucket de armazenamento padrão e clique em Feito.

Agora você está pronto para começar a fazer upload de arquivos para o armazenamento do Firebase.

Adicionar Firebase ao React

No seu terminal, navegue até a pasta do projeto React. Execute o seguinte comando para instalar o SDK do Firebase:

npm instalar base de fogo

Crie um novo arquivo, firebaseConfig.jse inicialize o Firebase.

importar { inicializarAplicativo} a partir de "firebase/aplicativo";
importar { getArmazenamento } a partir de "firebase/armazenamento";
// Inicializa o Firebase
const app = inicializeApp ({
 Chave API: <Chave API>,
 authDomain: <authDomain>,
 ID do projeto: <ID do projeto>,
 armazenamentoBalde: <balde de armazenamento>,
 mensagemSenderId: <mensagemSenderId>,
 appId: <ID do aplicativo>,
 ID de medição: <ID de medição>,
});
// Referência de armazenamento do Firebase
const armazenamento = getArmazenamento (aplicativo);
exportarpredefinição armazenar;

Use o objeto de configuração obtido após criar o projeto Firebase para inicializar o aplicativo Firebase.

A linha final exporta a referência de armazenamento do Firebase para que você possa acessar essa instância do restante do seu aplicativo.

Criar uma função de manipulador para fazer upload das imagens para o Firebase

Clicar no botão de upload deve acionar a função responsável por fazer upload do arquivo para o armazenamento do Firebase. Vamos criar essa função.

Dentro App.js, adicione a função handleUpload. Na função, verifique se o arquivo não está vazio, pois um usuário pode clicar no botão de upload antes de escolher um arquivo. Se o arquivo não existir, gere um alerta que instrua o usuário a fazer upload de um arquivo primeiro.

funçãohandleUpload() {
 if (!arquivo) {
 alerta("Por favor, escolha um arquivo primeiro!")
 }
}

Se o arquivo existir, crie uma referência de armazenamento. Uma referência de armazenamento atua como um ponteiro para o arquivo na nuvem em que você deseja operar.

Comece importando o serviço de armazenamento que você criou no firebaseConfig.js Arquivo.

importar armazenar a partir de "./firebaseConfig.js"

Importar referência da instância de armazenamento do Firebase e transmita o serviço de armazenamento e o caminho do arquivo como um argumento.

importar {ref} a partir de "firebase/armazenamento"
funçãohandleUpload() {
 if (!arquivo) {
 alerta("Por favor, escolha um arquivo primeiro!")
 }
const storageRef = ref (armazenamento, `/arquivos/${file.name}`)
}

Em seguida, crie uma tarefa de upload passando a instância de armazenamento do Firebase para o uploadBytesResumable() função. Existem vários métodos que você pode usar, mas este em particular permite pausar e retomar um upload. Ele também expõe atualizações de progresso.

o uploadBytesResumable() A função aceita a referência de armazenamento e o arquivo a ser carregado.

importar {
 ref,
 uploadBytesResumable 
} a partir de "firebase/armazenamento";
funçãohandleUpload() {
E se (!Arquivo) {
 alert("Por favor, escolha um arquivo primeiro!")
 }
const storageRef = ref (armazenamento, `/arquivos/${file.name}`)
const uploadTask = uploadBytesResumable (storageRef, arquivo);
}

Para monitorar o progresso e lidar com erros à medida que o arquivo é carregado, ouça alterações de estado, erros e conclusão.

importar {
 ref,
 uploadBytesResumable,
 getDownloadURL 
} a partir de "base de fogo/armazenamento";
funçãohandleUpload() {
 if (!arquivo) {
 alerta("Por favor, escolha um arquivo primeiro!")
 }
const storageRef = ref (armazenamento,`/arquivos/${file.name}`)
const uploadTask = uploadBytesResumable (storageRef, arquivo);
uploadTask.em(
"estado_alterado",
 (instantâneo) => {
const porcentagem = Matemática.redondo(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
//atualiza o progresso
 setPercent (percentual);
 },
 (erro) => console.log (erro),
 () => {
//baixa a url
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
console.log (url);
 });
 }
 ); 
}

Aqui o estado_alterado O evento tem três funções de retorno de chamada. Na primeira função, você acompanha o progresso do upload e o estado do progresso. Na segunda função de retorno de chamada, trate de um erro se o upload não for bem-sucedido.

A função final é executada assim que o upload é concluído e obtém o URL de download e o exibe no console. Em um aplicativo da vida real, você pode salvá-lo em um banco de dados.

Você pode exibir o estado de progresso do upload usando o estado de porcentagem. Adicione também um ao clicar evento no botão de upload para acionar o handleUpload função.

importar { useEstado } a partir de "reagir";
funçãoAplicativo() {
const [percent, setPercent] = useState(0);
Retorna (
<div>
<tipo de entrada ="Arquivo" onChange={handleChange} aceitar="" />
<botão onClick={handleUpload}>Carregar para o Firebase</button>
<p>{por cento} "% feito"</p>
</div>
 )
}

Aqui está o código completo para App.js:

importar { useEstado } a partir de "reagir";
importar { armazenar } a partir de "./firebaseConfig";
importar { ref, uploadBytesResumable, getDownloadURL } a partir de "firebase/armazenamento";
funçãoAplicativo() {
// Estado para armazenar o arquivo carregado
 const [arquivo, setArquivo] = useState("");
// progresso
const [percent, setPercent] = useState(0);
// Manipula o evento de upload do arquivo e atualiza o estado
funçãomanipularAlterar(evento) {
setFile(evento.alvo.arquivos[0]);
 }
const handleUpload = () => {
 if (!arquivo) {
 alerta("Por favor, carregue uma imagem primeiro!");
 }
const storageRef = ref (armazenamento, `/arquivos/${file.name}`);
// o progresso pode ser pausado e retomado. Ele também expõe atualizações de progresso.
// Recebe a referência de armazenamento e o arquivo para upload.
const uploadTask = uploadBytesResumable (storageRef, arquivo);
uploadTask.em(
"estado_alterado",
 (instantâneo) => {
const porcentagem = Matemática.redondo(
 (snapshot.bytesTransferred / snapshot.totalBytes) * 100
 );
//atualiza o progresso
 setPercent (percentual);
 },
 (erro) => console.log (erro),
 () => {
//baixa a url
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
console.log (url);
 });
 }
 );
 };
Retorna (
<div>
<tipo de entrada ="Arquivo" onChange={handleChange} aceitar="/image/*" />
<botão onClick={handleUpload}>Carregar para o Firebase</button>
<p>{por cento} "% feito"</p>
</div>
 );
}
exportarpredefinição Aplicativo;

Fazendo mais com o armazenamento do Firebase

O upload de arquivos é um dos recursos mais básicos do armazenamento do Firebase. No entanto, há outras coisas que o armazenamento do Firebase permite que você faça. Você pode acessar, exibir, organizar e excluir seus arquivos.

Em um aplicativo mais complicado, você pode querer autenticar os usuários para dar a eles permissão para interagir apenas com seus arquivos.

Autenticação de usuários com Firebase e React

Leia a seguir

Sobre o autor