How to get a list of files from FireBase Storage using AngularFire

Question

I've got an Angular 12 app that is using Firebase storage to store some files in a directory. I implemented the integration with Firebase using the AngularFire solution. The docs on how to use the AngularFire storage functions don't seem to include how to list all files in a directory. There are some docs on the Firebase site that speak to this (listAll) but I can't seem to make the code work in Angular with AngularFire. Code sample from the Firebase site below...

import {
  getStorage,
  ref,
  listAll
} from "firebase/storage";

const storage = getStorage();

// Create a reference under which you want to list
const listRef = ref(storage, 'files/uid');

// Find all the prefixes and items.
listAll(listRef)
  .then((res) => {
    res.prefixes.forEach((folderRef) => {
      // All the prefixes under listRef.
      // You may call listAll() recursively on them.
    });
    res.items.forEach((itemRef) => {
      // All the items under listRef.
    });
  }).catch((error) => {
    // Uh-oh, an error occurred!
  });

I've figured out (through the AngularFire documentation) how to get the reference etc. (It's different than in the sample) but I run into problems when I get to the 'listAll' part of the code.

Here's how far I can get in Angular...

import {
  Component,
  OnInit
} from '@angular/core';
import {
  Observable
} from 'rxjs';
import {
  AngularFireStorage
} from '@angular/fire/compat/storage';

@Component({
  selector: 'app-openvideo',
  templateUrl: './openvideo.component.html',
  styleUrls: ['./openvideo.component.css'],
})
export class OpenvideoComponent implements OnInit {
  subscription;
  constructor(private storage: AngularFireStorage) {}

  async getVideoList() {
    const directory = 'samplevideos/';
    const listRef = this.storage.ref(directory);
    //Can't make the sample code work here
  }

  ngOnInit(): void {}

  ngOnDestroy() {}
}

The desired state is that I'm retrieving a list of files stored in the targeted directory and then I can do something with that list (I.e. Display the list to the user, allow them to select an item etc. I feel my struggle here is a combination of documentation gaps between the native Firebase Storage API and the docs that exist on the AngularFire implementation of it, combined with a weak understanding of promises, observables etc. As a side note I believe I have done the correct configuration (changed to AppModule etc.) to enable the firebase solution in my components and am using it successfully in other components (uploading files for example) so I don't think the issue is one of core configuration of angularfire. Any help would be appreciated.

Answer 1

After some trial and error I figured out how to make this work in Angular 12. For those who are interested in getting a list of files in their Firebase storage repository and then populating an array so that you can display the filename and the download link in your Angular component the code I used is found below. I'll be the first to admit I'm not the greatest coder in the world though so use at your own risk!

//This is where you store the file names and download url's
filelist = []

//This is the function you call (put it in ngOnInit or something of the like) to get the filenames
getFileList() {
  const ref = this.storage.ref('');
  let myurlsubscription = ref.listAll().subscribe((data) => {
    for (let i = 0; i < data.items.length; i++) {
      let name = data.items[i].name;
      let newref = this.storage.ref(data.items[i].name);
      let url = newref.getDownloadURL().subscribe((data) => {
        this.filelist.push({
          name: name,
          videolink: data
        });
      });
    }
  });
}