Subir un archivo a firebase con angular2/4

+

Primero que nada tenemos que tener instalado angularfire2 que contiene la logica para utilizar firebase en angular 2 ademas de alguna que otra libreria util, tambien se supone que es la oficial entonces antes que nada debemos configurar nuestro proyecto para poder utilizar firebase, y esto es sencillo podemos hacerlo de varias formas en la documentacion oficial de angularfire2 nos dice la siguiente:

Crear una variable firebase en nuestro archivo enviroment.ts con los siguientes datos

export const environment = {
production: false,
firebase: {
apiKey: "apikey",
authDomain: "authdomain",
databaseURL: "databaseurl",
projectId: "projectid",
storageBucket: "storagebucket",
messagingSenderId: "message id"
}
};

Después de configurar nuestra variable firebase importar el archivo enviroment.ts en nuestro module app y tambien el AnguarFireModule

así:

import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';</code>

//y en los imports imports de nuestra agregar la siguiente linea
@NgModule({
imports:[ ...,
AngularFireModule.initializeApp(environment.firebase)
]

La otra forma es parecida solo que en vez de tener la configuración de firebase en otro archivo la agregas en el mismo de app.module.ts

algo asi:

import { AngularFireModule } from 'angularfire2';</code>

let firebasConfig: {
apiKey: "apikey",
authDomain: "authdomain",
databaseURL: "databaseurl",
projectId: "projectid",
storageBucket: "storagebucket",
messagingSenderId: "message id"

}

//y en los imports imports de nuestra agregar la siguiente linea
@NgModule({
imports:[ ...,
AngularFireModule.initializeApp(firebaseConfig)
]

Una vez configurado solo tenemos que importar los modulos de angularfire para que nos deje subir archivos uno seria el de database y el de authentication si es que tu aplicacion ocupa login.

"
import { AngularFireDatabaseModule } from ‘angularfire2/database’;
//Optional
import { AngularFireAuthModule } from ‘angularfire2/auth’;</code>

Listo tenemos configurado firebase, lo siguiente sera crear un componente que nos ayudara para subir el archivo entonces creamos nuestras componente que correspondera a los siguientes archivo upload.component.ts y upload.component.html o tambien para crearlo puedes utilizar el angular CLI o linea de comando de angular en español, pero para esto deberas tenerla instalada y entonces ejecutas el siguiente codigo para crear los archivo de tu componente

ng generate component upload
/* output
installing component
  create src/app/upload/upload.component.css
  create src/app/upload/upload.component.html
  create src/app/upload/upload.component.spec.ts
  create src/app/upload/upload.component.ts
  update src/app/app.module.ts
*/

Creados los archivos procederemos a crear un input type file en nuestro html que es el que nos permitira seleccionar el archivo que querramos subir a firebase y tambien le agregamos un boton que al hacer click lanzara el evento para subir la imagen. Por lo general se suben archivos de imagenes pero podrian ser de cualquier tipo para este ejemplo utilizaremos una imagen vamos al lio:

<!-- upload.component.html -->
<input id="file" name="file" type="file" />
<button>Upload</button>

Creamos la funcion upload en nuestro archivo de type script y ya tenemos casi listo,

<!-- upload.component.ts -->
upload(){
let storageRef = this.firebaseApp.storage().ref();</code>

for (let selectedFile of [(document.getElementById('file')).files[0]]) {

let path = `/${this.folder}/${selectedFile.name}`;
var iRef = storageRef.child(path);
console.log(path);
iRef.put(selectedFile).then((snapshot) => {
console.log('Uploaded a blob or file! Now storing the reference at', `/logos/${selectedFile.name}`);
//this.firebaseDB.list('/logos/').push({path:path,filename:selectedFile.name});
});
}
}

Nuestro archivo ts queda de la siguiente forma:

<code lang="javascript">
<!-- upload.component.ts -->
import { Component, OnInit } from '@angular/core';
import { FirebaseApp } from 'angularfire2';
import 'firebase/storage';</code>

@Component({
selector: 'app-upload',
templateUrl: './upload.component.html',
styleUrls: ['./upload.component.css']
})
export class UploadComponent implements OnInit {

folder:string = ""

constructor(private firebaseApp:FirebaseApp) { }

ngOnInit() {
}

upload(){
let storageRef = this.firebaseApp.storage().ref();

for (let selectedFile of [(document.getElementById('file')).files[0]]) {

let path = `/${this.folder}/${selectedFile.name}`;
var iRef = storageRef.child(path);
console.log(path);
iRef.put(selectedFile).then((snapshot) => {
console.log('Uploaded a blob or file! Now storing the reference at', `/logos/${selectedFile.name}`);
//this.firebaseDB.list('/logos/').push({path:path,filename:selectedFile.name});
});
}
}

}

Al no tener implementado el modulo de storage los de angularfire2 lo importamos directamente de firebase/storage y listo tenemos ya con esto podemos subir a firebase nuestros archivos, aunque marcara un error de que no tienes permisos por que tienes que quitarlo en la consola de firebase aunque yo no recomiendo quitarlo por que cualquiera podra subir archivos lo que puedes hacer es implementar authentication con firebase para que solo archivos authenticados a firebase puedan subir archivos que es como viene la configuracion por defecto.

Les dejare el link del repositorio para que ustedes hagan su prueba, me dicen como les fue.
link del repositorio