javascript - Upload file to Firebase Storage using AngularFire2 -

i working on project angular2 , firebase , willing upload images firebase storage.

so, created component contructor , function, and, then, template. not sure whether way declare variable firebaseapp, public firebaseapp: firebaseapp; correct.

so, in component, have:

import { component, oninit, inject, input } '@angular/core'; import {angularfiredatabase, firebaselistobservable} 'angularfire2/database'; import { mddialog, mddialogref, md_dialog_data, mdbutton } '@angular/material'; import { http, headers, response } '@angular/http'; import {observable} 'rxjs/rx'; import { formbuilder, formgroup } '@angular/forms'; import { firebaseapp } 'angularfire2'; import 'firebase/storage';  @component({   selector: 'individual-chat',   templateurl: './chat.component.html',   styleurls: ['./chat.component.css'] })  export class individualchat implements oninit {     public firebaseapp: firebaseapp; constructor(     firebaseapp: firebaseapp,     public afauth: angularfireauth,      public af: angularfiredatabase,     public http: http,     public dialog: mddialog   ){ }     editchatdata(){       this.af.object('groupconversations/'+ this.my_id + '/' +this.conversation_id ).update({ groupname: this.group_edit_data.name ? this.group_edit_data.name : 'new group' });            }     onchange(files) {     console.log(files, files[0]);       let storageref = this.firebaseapp.storage().ref().child('groupimages');        storageref.put(files[0]).then( snapshot => {         console.log('successfully added');               }).catch(err => { console.error("whoupsss!", err) })     }   ... } 

and form created in template looks this:

<form name="form" (ngsubmit)="editchatdata()" enctype="multipart/form-data">   <input type="file" #file (change)="onchange(file.files)" />   <input type="text" placeholder="group name" name="name" [(ngmodel)]="group_edit_data.name" #name="ngmodel" class="form-control" value=" {{ group_name }}" />   <button class="btn">done</button> </form> 

i keep getting error:

error typeerror: cannot read property 'storage' of undefined 

and, console.log in onchange(files) return object:

filelist {0: file, length: 1} length: 1, 0: file { lastmodified: 1503324156295 lastmodifieddate: mon aug 21 2017 17:02:36 gmt+0300 (eest), name:"screenshot 2017-08-21 17-02-36.png", size: 401442, type: "image/png", webkitrelativepath: "" } 

cannot read property 'storage' of undefined tells this.firebaseapp undefined.

you can initialize in constructor, way:

constructor(   firebaseapp: firebaseapp,   public afauth: angularfireauth,    public af: angularfiredatabase,   public http: http,   public dialog: mddialog ) {   this.firebaseapp = firebaseapp; } 

wiki