CODEWITHSUNDEEP
angularfirebasefirebase-storageangularfire2
Kelvin Muza
Kelvin Muza

Reputation: 121

How do you Delete from Firebase Storage using Angularfire2

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?

Upvotes: 12

Views: 8628

Answers (4)

Rami Alloush
Rami Alloush

Reputation: 2626

The following is working on Angular v15 and AngularFire v7.5.0

  //remove all request files
  removeRequestFiles(requestId: string) {
    const folderPath = `requests/${requestId}`;
    const folderRef = this.storage.ref(folderPath);

    folderRef.listAll().subscribe((list: ListResult) => {
      list.items.forEach((fileRef: Reference) => fileRef.delete());
    });
  }

Upvotes: 1

Ali
Ali

Reputation: 61

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()
  });
})

Upvotes: 3

SiddAjmera
SiddAjmera

Reputation: 39432

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();
}
...

Upvotes: 17

Loheek
Loheek

Reputation: 1985

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.

Upvotes: 3

Related Questions