Angular 6 e Firebase — Desenvolvendo um portfólio (parte 5)

Upload de Imagens

Image for post
Image for post

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.

Image for post
Image for post

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).

Image for post
Image for post

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:

Image for post
Image for post

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.

Image for post
Image for post

O código do projeto está aqui.

Até :)

Written by

Professor e desenvolvedor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store