2
私はAngular2とFirebaseを使ってプロジェクトを進めています。Firebase Storageに画像をアップロードしたいと思います。AngularFire2を使用してファイルをFirebase Storageにアップロード
したがって、コンストラクタと関数、そしてテンプレートを使用してComponentを作成しました。私は変数firebaseApp、public firebaseApp: FirebaseApp;
を宣言する方法が正しいかどうかはわかりません。
import { Component, OnInit, Inject, Input } from '@angular/core';
import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';
import { MdDialog, MdDialogRef, MD_DIALOG_DATA, MdButton } from '@angular/material';
import { Http, Headers, Response } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import { FormBuilder, FormGroup } from '@angular/forms';
import { FirebaseApp } from '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) })
}
...
}
そして、私は私のテンプレートで作成したフォームは、次のようになります:
だから、私のコンポーネントでは、私が持っている
ERROR TypeError: Cannot read property 'storage' of undefined
:私はこのエラーを得続ける
<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>
を
そして、私のonChange(ファイル)内のconsole.logはこのオブジェクトを返します:
FileList {0: File, length: 1}
length: 1,
0: File {
lastModified: 1503324156295
lastModifiedDate: Mon Aug 21 2017 17:02:36 GMT+0300 (EEST),
name:"Screenshot from 2017-08-21 17-02-36.png",
size: 401442,
type: "image/png",
webkitRelativePath: ""
}