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
Es hora de aprender Angular!. Aprende con nuestro curso. El primer mes es por nuestra cuenta :)
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 :)