Menu

Firebase Storage en Angular.

angular - March 12, 2018 por Carlos Rojas | Edita este Post.
Angular CLI1.7.0Angularfire25.0.0-rc.6

Firebase Cloud Storage esta diseñado para ayudarte a almacenar archivos generados por el usuario (Fotos, Videos) facil y rapidamente.

Que es Firebase Cloud Storage ?

Cloud Storage para Firebase es un servicio de almacenamiento de objetos potente, simple y rentable construido para la escala de Google.

Los SDK de Firebase para Cloud Storage agregan la seguridad de Google a las operaciones de carga y descarga de archivos para tus apps de Firebase, sin importar la calidad de la red.

AngularFire2 es la libreria oficial para Firebase y Angular.

Caracteristicas

  • Basado en Observables. Usa el poder de RxJS, Angular y Firebase.

  • Binding en tiempo real. Mantén tus datos sincronizados en cualquier momento.

  • ngrx Friendly. Integralo con ngrx usando acciones en AngularFire basada en APIs.

Conectando con AngularFire2 y Storage.

Instalar el Angular CLI (Si no lo tienes con anterioridad).

$ npm install -g @angular/cli

o

$ yarn global add @angular/cli

Luego creamos un proyecto nuevo.

$ ng new demo126

y nos ubicamos sobre el proyecto.

Luego creamos un proyecto nuevo.

$ cd demo126

Luego de crear la cuenta en Firebase, debemos crear un proyecto en Firebase y agregar las reglas de escritura/lectura publica para nuestro Storage. Luego volvemos a la terminal y ejecutamos en nuestro proyecto:

npm install angularfire2 firebase promise-polyfill --save

Ahora Debes crear el objeto firebase para tu app. Esto lo debemos hacer en el archivo /src/environments/environment.ts y reemplazar la información de la app con la que obtienes de tu proyecto en Firebase.

Define los objetos:


export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

también necesitamos agregar los modulos de AngularFire2 dentro de NgModule /src/app/app.module.ts.


import { AngularFireModule } from 'angularfire2';
import { AngularFireStorageModule } from 'angularfire2/storage';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireStorageModule
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Ok, hasta aqui deberiamos tener todo conectado.

Ahora lo inyectamos en nuestro archivo app.component.ts


import { Component } from '@angular/core';
import { AngularFireStorage } from 'angularfire2/storage';

@Component({
  selector: 'app-component',
  template: ``
})
export class AppComponent {
  constructor(private storage: AngularFireStorage) { }
}

Nuestro archivo completo se veria asi.

import { Component } from '@angular/core';

import { AngularFireStorage } from 'angularfire2/storage';
import { Observable } from "rxjs";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  uploadPercent: Observable<number>;
  downloadURL: Observable<string>;
  title = 'app';
  constructor(private storage: AngularFireStorage) { }

  uploadFile(event) {
    const file = event.target.files[0];
    const filePath = 'demo126';
    const task = this.storage.upload(filePath, file);
    
    // observe percentage changes
    this.uploadPercent = task.percentageChanges();
    // get notified when the download URL is available
    this.downloadURL = task.downloadURL();
  }
}

y modificamos nuestra plantilla para que utilice lo que acabamos de agregar en nuestro componente.app.component.html


<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<input type="file" (change)="uploadFile($event)">
<div>{{ uploadPercent | async }}</div>
<a [href]="downloadURL | async">{{ downloadURL | async }}</a>

Puedes ver el resultado final en Stackblitz

Bueno espero que sea de ayuda y no te olvides comentar y compartir :)

Ver código

¡Compártelo!