Uploading and downloading from Firebase

Question

I'm working on a photos app in Ionic but when I try to display them after upload I get some issues.

This is my .ts file

interface FeaturedPhotoUrls {
  url1?: string;
  url2?: string;
}


@IonicPage(
  {
    name: 'AbstractPage'
  }
)
@Component({
  selector: 'page-abstract',
  templateUrl: 'abstract.html',
})
export class AbstractPage {

 featuredPhotoStream: AngularFireObject<FeaturedPhotoUrls>;

  constructor(public navCtrl: NavController, public navParams: NavParams, private db: AngularFireDatabase) {

    this.featuredPhotoStream = this.db.object('/photos/abstract');
  }
  featuredPhotoSelected(event: any) {


    const file: File = event.target.files[0];
    console.log("Selected filename: ", file.name);

    const metaData = {'contentType': file.type};
    const storageRef: firebase.storage.Reference = firebase.storage().ref('/photos/abstract/url1');
    storageRef.put(file, metaData);
    console.log("Uploading: ", file.name)
     }

and this in html:

<input type="file" (change)="featuredPhotoSelected($event)">
<img [src]="(featuredPhotoStream | async)?.url1">

and this is what I get:

ERROR Error: Uncaught (in promise): Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

What did I do wrong?

Answer 1

From the docs what's piped into async needs to be a Promise or Observable: https://angular.io/api/common/AsyncPipe

From the docs you have to use .valueChanges() to turn it into what you need:

this.db.object('/photos/abstract').valueChanges();

Check out the docs for this as an example https://github.com/angular/angularfire2/blob/master/docs/rtdb/objects.md#user-content-retrieve-data

import { Component } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  template: `
  <h1>{{ (item | async)?.name }}</h1>
  `,
})
export class AppComponent {
  item: Observable<any>;
  constructor(db: AngularFireDatabase) {
    this.item = db.object('item').valueChanges();
  }
}