AngularFire Storage Upload in Service-trying to get the Download Url after upload

[dooziiinc]

Greetings!
I am struggling to understand what is happening here. I am using the AngularFire Storage Module to upload a file to Firebase Storage. I looked at the documents showing how, from the component, the fileRef.getDownloadUrl() returns a value to the uninitialized url: Observable as shown in the example code.

However, I moved my upload functionality into an Angular service, and am confused as to how the getDownloadUrl() works once in the service. Let me drop some code to illustrate my confusion:

Component.ts

export class MyComponent implements OnInit, OnDestroy{
...
downloadUriSub:Subscription;
storageUri: string;

ngOnInit(): void {
    this.wordList = [];
   
    this.downloadUriSub = this.storageService.downloadUrl$.subscribe((res) => {
      console.log('SUBSCRIBED to download url'); **_// This is not getting called during init_**
      this.storageUri = res;
    },
    (err)=>{
      console.log('Error in subscription: ' + err);
    });

**Service.ts**

export class StorageService {

downloadUrl$: Observable<string> = new Observable<string|undefined>();

constructor(private afStorage:AngularFireStorage) {
}

uploadFile(file:File):Observable<number | undefined> {
  
  const filePath = this.basePath+ Date.now().toString();
  const fileRef = this.afStorage.ref(filePath);
  const uploadTask = this.afStorage.upload(filePath, file);

  uploadTask.snapshotChanges().pipe(
      finalize(() => {
        this.downloadUrl$ = fileRef.getDownloadURL(); **_//This is not triggering the update to the Observable_**
      })
   )
  .subscribe();
  return uploadTask.percentageChanges();
}

How is this supposed to work exactly? I used the example code from the docs within the component and it worked, but moving the upload functionality into the service resulted in being unable to get the download url back from the subscription to the downloadUrl$:Observable.

Any guidance would be GREATLY appreciated!!

[dooziiinc]

So I ended up making a few changes that seem to work nicely:

export class StorageService{
...
downloadUrl$: BehaviorSubject<string> = new BehaviorSubject<string>('');
...
uploadFile(file:File):Observable<number | undefined> {
    
    const filePath = this.basePath;
    const fileRef = this.afStorage.ref(filePath);
    const uploadTask = this.afStorage.upload(filePath, file);

    uploadTask.snapshotChanges().pipe(
        finalize(() => {
          fileRef.getDownloadURL().pipe(map(res =>{
            this.downloadUrl$.next(res);  
          })).subscribe();
        })
     )
    .subscribe();
    return uploadTask.percentageChanges();
  }