How do you Delete from Firebase Storage using Angularfire2

Question

I am basically new to Angularfire2, I am trying to delete a folder from Firebase Storage when the user presses the delete button. Unfortunately, such information is not in the Angularfire2 documentation .

I have basically tried to use the code below:

constructor(private afs: AngularFirestore, private storage: AngularFireStorage) { 
      this.clientsCollection = this.afs.collection('clients', ref => ref.orderBy('uid', 'asc'));;
  }

   deleteClient(client, callback){
    this.storage.ref(client.uid).delete();
  }

Unfortunately, it throws the following error

FirebaseStorageError {code_: "storage/object-not-found", message_: "Firebase Storage: Object '3CqyNHrIwQ3sRlj83JKM' does not exist.", serverResponse_: "{↵  "error": {↵    "code": 404,↵    "message": "Not Found.  Could not delete object"↵  }↵}", name_: "FirebaseError"}

I have stored each client's documents in a folder which has the name similar to the client's uid . Which is really just an ID generated by Firebase. I get the above error when I try to delete that folder. Please help, how do I go about this?

Answer 1

I think a better way would be to delete a file via its download URL . To do that, you can simply call storage.refFromURL(url).delete() on the instance of the injected AngularFireStorage dependency.

...
constructor(private storage: AngularFireStorage) { }
...
delete(downloadUrl) {
  return this.storage.storage.refFromURL(downloadUrl).delete();
}
...

Answer 2

Even if it's not in the documentation, you are using the right way to delete files using AngularFireStorage. I use it myself, and you can check it in source files .

Seems like your client.uid is not refering to any resource.

But even if it was, you're saying that "when I try to delete that folder" but according to this post you cannot delete folders , you will have to keep list of files.

Answer 3

You can list all items inside the folder then delete them one by one, empty folder will be removed automatically!

let folderPath = 'path/to/folder';

this.storage.storage.ref(folderPath).listAll().then(data => {
  data.items.forEach(item => {
    this.storage.storage.ref(item['location']['path']).delete()
  });
})