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
[code lang=”javascript”]
export const environment = {
production: false,
firebase: {
apiKey: "apikey",
authDomain: "authdomain",
databaseURL: "databaseurl",
projectId: "projectid",
storageBucket: "storagebucket",
messagingSenderId: "message id"
}
};
[/code]

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

así:
[code]
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)
]
[/code]

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:

[code lang=”javascript”]
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)
]

[/code]

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.

[code language=”lang="bash”]"
import { AngularFireDatabaseModule } from ‘angularfire2/database’;
//Optional
import { AngularFireAuthModule } from ‘angularfire2/auth’;</code>
[/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

[code lang=”c”]
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
*/
[/code]

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:

[code lang=”html”]
<!– upload.component.html –>
<input id="file" name="file" type="file" />
<button>Upload</button>
[/code]

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

[code lang=”javascript”]
<!– 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) =&gt; {
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) =&gt; {
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});
});
}
}

}
[/code]

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

Facebook Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Do NOT follow this link or you will be banned from the site!