Nsryjdtyk

I am trying to use the new @angular/fire 5.1.0
to view an image uploaded to firebase using AngularFireStorage.
I used to be able to make use of task.downloadURL() in angularfire2

"correct me if I'm wrong but now I have to use afStorage.getDownloadURL()
Please can you kindly assist me with setting imageUrl correctly.

import { AngularFireStorage, AngularFireStorageReference, AngularFireUploadTask } from '@angular/fire/storage'

....

        downloadURL: Observable<string>; 

        imageUrl: string;

....



async onGetFromGallery(){

  try{ ....

    const imageData = await this.camera.getPicture(options);

    const image = 'data:image/jpeg;base64,' + imageData;

    const id = Math.random().toString(36).substring(2);

    const user = this.authenticatorService.getUser();

    this.ref = this.afStorage.ref(user.uid + '/images/categories/'+id);

    this.task = this.ref.putString(image, 'data_url');



    //--- Previously:angularfire2:

    // this.downloadURL = this.ref.getDownloadURL();

    // this.downloadURL.subscribe(url=> this.imageUrl=url);

    //--- now replaced by this.ref.getDownloadURL()...



    //My Attempt - unable to getDownloadUrl?

    this.task

    .snapshotChanges().toPromise().then(_ =>

       {

        this.ref.getDownloadURL().toPromise().then(res => {

          console.log('URL: ', res);

          this.imageUrl = res;

        });

      })



  } catch(e) {

    console.error(e);

    this.errorMessage = JSON.stringify(e);

  }

}

view excerpt:

<img [src]="imageUrl"  style="width:100%;">

package.json excerpt:

"@angular/compiler-cli": "5.2.11",

"@angular/fire": "^5.1.0",

"firebase": "^5.5.9",

"cordova-android": "~7.0.0",

Thank you.

There are some other minor structure changes in the code too, not just renaming the method.

Check out the example code in the official AngularFire2 docs under the section titled "Monitoring upload percentage". Specifically, the example upload function they include:

uploadFile(event) {

    const file = event.target.files[0];

    const filePath = 'name-your-file-path-here';

    const fileRef = this.storage.ref(filePath);

    const task = this.storage.upload(filePath, file);



    // observe percentage changes

    this.uploadPercent = task.percentageChanges();



    // get notified when the download URL is available

    task.snapshotChanges().pipe(

        finalize(() => this.downloadURL = fileRef.getDownloadURL() )

     )

    .subscribe()

}

and even more specifically, this part of that function, the listener....

// get notified when the download URL is available

task.snapshotChanges().pipe(

    finalize(() => this.imageUrl = fileRef.getDownloadURL() )

 )

.subscribe()

It will fire when the upload has finalized and populate the this.downloadURL variable with the URL. You've already defined the fileRef, in your code it's just ref, so the following should work, untested though:

    // get notified when the download URL is available

    task.snapshotChanges().pipe(

        finalize(() => this.downloadURL = ref.getDownloadURL() )

     )

    .subscribe()