Angularfire: getDownloadURL()

Created on 1 Jun 2018  Â·  3Comments  Â·  Source: angular/angularfire

I have a function which uploads an image to Firebase Storage. The code snippet (My Code) is the implementation; I made sure to reference the guidance here.

I played around to see if I could better understand the issue. I moved the following code outside of the '.pipe()' (My Test Code) and received an error that 'Object(...) is not a function'.
finalize(() => this.downloadUrl = ref.getDownloadURL() )
Thinking that it is the ref.getDownloadURL(), I just commented it out completely, and the error disappeared. Any idea what the issue may be?

My packges:
Angular: "@angular/core": "^5.0.0",
Firebase: "firebase": "^5.0.4",
AngularFire: "angularfire2": "^5.0.0-rc.10",
"rxjs": "^5.5.2",

My Code:
````
import {AngularFireStorage} from 'angularfire2/storage';
import {finalize} from 'rxjs/operators';

export class Component {

constructor( private fileStore: AngularFireStorage) { }

uploadPercent: Observable;
downloadUrl: Observable;

uploadHeaderImage(file: File) {

const _fileName = uuid();
const _filePath = '/event/' + _fileName;

const ref = this.fileStore.ref(_filePath);
const task = this.fileStore.upload(_filePath, file);

this.uploadPercent = task.percentageChanges();
task.snapshotChanges().pipe(
  finalize(() => this.downloadUrl = ref.getDownloadURL() )
).subscribe();

}

}

````
The Error:

ERROR Error: Uncaught (in promise): UnsubscriptionError: 1 errors occurred during unsubscription: 1) TypeError: Object(...) is not a function UnsubscriptionError: 1 errors occurred during unsubscription: 1) TypeError: Object(...) is not a function at new UnsubscriptionError (UnsubscriptionError.js:18) at SafeSubscriber.Subscription.unsubscribe (Subscription.js:97) at SafeSubscriber.Subscriber.unsubscribe (Subscriber.js:125) at Subscriber._complete (Subscriber.js:134) at Subscriber.complete (Subscriber.js:115) at Subscriber.wrappedComplete (Subscriber.js:223) at SafeSubscriber.__tryOrUnsub (Subscriber.js:240) at SafeSubscriber.complete (Subscriber.js:225) at FinallySubscriber.Subscriber._complete (Subscriber.js:135) at FinallySubscriber.Subscriber.complete (Subscriber.js:117) at new UnsubscriptionError (UnsubscriptionError.js:18) at SafeSubscriber.Subscription.unsubscribe (Subscription.js:97) at SafeSubscriber.Subscriber.unsubscribe (Subscriber.js:125) at Subscriber._complete (Subscriber.js:134) at Subscriber.complete (Subscriber.js:115) at Subscriber.wrappedComplete (Subscriber.js:223) at SafeSubscriber.__tryOrUnsub (Subscriber.js:240) at SafeSubscriber.complete (Subscriber.js:225) at FinallySubscriber.Subscriber._complete (Subscriber.js:135) at FinallySubscriber.Subscriber.complete (Subscriber.js:117) at resolvePromise (zone.js:809) at eval (zone.js:861) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4740) at ZoneDelegate.invokeTask (zone.js:420) at Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at ZoneTask.invokeTask [as invoke] (zone.js:500) at invokeTask (zone.js:1517) at XMLHttpRequest.globalZoneAwareCallback (zone.js:1543)

My Test Code
````
private uploadHeaderImage(file: File) {

const _fileName = uuid();
const _filePath = '/event/' + this.event.detail.rid + '/' + _fileName;

this.log.debug('Uploading image to resource: ', _filePath);

const ref = this.fileStore.ref(_filePath);
const task = this.fileStore.upload(_filePath, file);

this.downloadUrl = ref.getDownloadURL();
this.uploadPercent = task.percentageChanges();
task.snapshotChanges().pipe(
  //finalize(() => this.downloadUrl = ref.getDownloadURL() )
).subscribe();

````

My Test Error
ERROR TypeError: Object(...) is not a function at Object.getDownloadURL (ref.js:6) at MakerEventComponent.uploadHeaderImage (maker-event.component.ts:246) at MakerEventComponent.SelectImageFile (maker-event.component.ts:155) at Object.eval [as handleEvent] (MakerEventComponent.html:17) at handleEvent (core.js:13547) at callWithDebugContext (core.js:15056) at Object.debugHandleEvent [as handleEvent] (core.js:14643) at dispatchEvent (core.js:9962) at eval (core.js:10587) at HTMLInputElement.eval (platform-browser.js:2628)

All 3 comments

In recent versions we require RXJS 6, https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md

Hi @WB3Tech , have you solved this issue?

Yes, thank you. I switched to RxJS 6

On Mon, Jul 23, 2018 at 2:44 AM, Indiana Zhao notifications@github.com
wrote:

Hi @WB3Tech https://github.com/WB3Tech , have you solved this issue?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angularfire2/issues/1700#issuecomment-406956222,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AcdvYKXlgFJXBNtuSV1WRKFmmCS9Z5Geks5uJXDOgaJpZM4UXALH
.

--
Cheers,

Bill Bensing
WB3 Tech | https://wb3tech.com

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jteplitz picture jteplitz  Â·  3Comments

fisherds picture fisherds  Â·  3Comments

itisparas picture itisparas  Â·  3Comments

adriandurran picture adriandurran  Â·  3Comments

goekaypamuk picture goekaypamuk  Â·  3Comments