Angularfire: .downloadURL(); is not a function

[willxd42]

from https://github.com/angular/angularfire2/blob/master/docs/storage/storage.md

@Component({
  selector: 'app-root',
  template: `
    <input type="file" (change)="uploadFile($event)" />
    <div>{{ uploadPercent | async }}</div>
    <a [href]="downloadURL | async">{{ downloadURL | async }}</a>
 `
})
export class AppComponent {
  uploadPercent: Observable<number>;
  downloadURL: Observable<string>;
  constructor(private storage: AngularFireStorage) {}
  uploadFile(event) {
    const file = event.target.files[0];
    const filePath = 'name-your-file-path-here';
    const task = this.storage.upload(filePath, file);

    // observe percentage changes
    this.uploadPercent = task.percentageChanges();
    // get notified when the download URL is available
    this.downloadURL = task.downloadURL();
  }
}

this.storage.upload(filePath, file).downloadURL();
.downloadURL() is no longer available
these are the available options

.catch
.then
.pause
.cancel
.resume
.task
.snapshortChanges
.percentageChanges

downloadUrl was in "angularfire2": "^5.0.0-rc.6",

please how can I get the downloadUrl in thes present version?

"angularfire2": "^5.0.0-rc.8.0",
"firebase": "^5.0.2",

[willxd42]

fixed

uploadFile(event) {
    const file = event.target.files[0];
    const filePath = 'name-your-file-path-here';
    const task = this.storage.upload(filePath, file).then(() => {
         const ref = this.storage.ref(filePath);
         const downloadURL = ref.getDownloadURL().subscribe(url => { 
         const Url = url; // for ts
         this.url = url // with this you can use it in the html
         console.log(Url);
     })
  }

[renansigolo]

The downloadUrl method has been deprecated in favor of the new .getDownloadURL()

export class AppComponent {
  uploadPercent: Observable<number>;
  downloadURL: Observable<string>;
  constructor(private storage: AngularFireStorage) {}
  uploadFile(event) {
    const file = event.target.files[0];
    const filePath = 'name-your-file-path-here';
    const fileRef = this.storage.ref(filePath) // Add this line to get the path as a ref
    const task = this.storage.upload(filePath, file);

    // observe percentage changes
    this.uploadPercent = task.percentageChanges();
    // get notified when the download URL is available
    this.downloadURL = fileRef.getDownloadURL() // And this one to actually grab the URL from the Ref
  }
}

Also you might wanna subscribe to the function to extract the url given that it's returning you an Observable...

fileRef.getDownloadURL().subscribe(ref => { console.log('REF', ref) this.downloadURL = ref })

[codediodeio]

Another possible solution is define the dowlnoad URL after the task has been completed.

import { finalize } from 'rxjs/operators';

// ...

task.snapshotChanges().pipe(
    finalize(() => this.downloadURL = this.storage.ref(path).getDownloadURL() )
 )
.subscribe()

[willxd42]

Awesome! your solutions are always unique thanks @codediodeio

[jamesdaniels]

Dup #1645

[rv-github]

Another possible solution is define the dowlnoad URL after the task has been completed.

import { finalize } from 'rxjs/operators';

// ...

task.snapshotChanges().pipe(
    finalize(() => this.downloadURL = this.storage.ref(path).getDownloadURL() )
 )
.subscribe()

This works, for me downloadURL observable didnt work outside snapshotChanges. Thanks!