Angular 6 e Firebase — Desenvolvendo um portfólio (parte 5)
Upload de Imagens
Nesta postagem vou mostrar como realizar uploads de arquivos utilizando o serviço de armazenamento do Firebase, o Storage.
O resultado final será a inclusão de um campo no formulário e a visualização da imagem após a realização do envio.
O primeiro passo é importar o módulo AngularFireStorageModule em app.module.ts para utilizarmos as funções de upload da biblioteca angularfire2. (aque agora mudou para @angular/fire).
// Outros imports omitidos - Baixe o arquivo completo
// no final da postagem
import { AngularFireStorageModule } from ‘angularfire2/storage’;
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule, AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule, // imports firebase/firestore, only needed for database features
AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
AngularFireStorageModule // imports firebase/storage only needed for storage features
],No arquivo gerencia-component.html, vamos inserir no template um campo input para o usuário informar onde está a imagem que ele deseja enviar para o servidor. Vamos inserir também um campo para monitorar o progresso do upload (linha 27).
Método Upload
No arquivo gerencia.component.ts devemos importar a classe AngularFireStorage e a interface AngulafarFireUploadTask (linha 6).
Declaramos 5 objetos que nos ajudarão a realizar e monitorar (linha 7) o upload.
Injetamos a classe no construtor (linha 14).
No método upload() fazemos uma referência do storage (linha 20) e invocamos o upload passando o arquivo (linha 21). O retorno nós guardamos no task para recuperar o endereço no servidor (linha 25) e salvar posteriormente (linha 38).
Na linha 29 conseguimos monitorar o andamento do upload.
Finalmente, para o funcionamento da implementação é necessário que mudamos as regras do Storage no Firebase. Por padrão, o storage exige a autenticação, mas para testes vamos remover essa restrição.
Acesse o console do firebase em https://console.firebase.google.com e no menu esquerdo, clique em Storage.
Na guia regras, deixe assim:
e clique em Publicar.
Pronto, agora você consegue realizar o upload de imagens para os projetos.
Para ver os arquivos, no console do firebase, em Storage, você tem acesso aos arquivos enviados.
O código do projeto está aqui.
Até :)
