@angular/fire AngularFireStorage getDownloadUrl()

Question

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.

According to https://github.com/angular/angularfire2/blob/master/docs/storage/storage.md#downloading-files you should only need `this.imageUrl = ref.getDownloadURL()`. — Frank van Puffelen, Nov 26 '18 at 15:15
Please check [https://stackoverflow.com/a/57267424/11127383](https://stackoverflow.com/a/57267424/11127383) for an example how it works at this point of time. — Daniel Danielecki, Jul 30 '19 at 08:38

score 4 · Answer 1 · answered Nov 26 '18 at 15:12

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()

Thanks Jeremy. Just one last thing. I get the following error on testing: [ts] Cannot find name 'finalize'. [2304]. Am I missing an import or something? — altergothen, Nov 26 '18 at 20:18
Sounds like it, you'll need `import { finalize } from 'rxjs/operators';` at the top of that component — JeremyW, Nov 26 '18 at 20:24
Hi @JeremyW. Please can you kindly assist with follow up question? Thanks ;-) https://stackoverflow.com/questions/53853189/angularfire-storage-task-observable-never-completes — altergothen, Jan 09 '19 at 00:44

@angular/fire AngularFireStorage getDownloadUrl()

1 Answers1