delete Cloud Firestore doc and Fire Storage file simultaneously

Question

I have a Cloud Firestore collection of documents (metadata about files that I've uploaded), and I have a bucket of those files in Firebase Storage.

I want to delete a given file using my Angular app. I can delete the Firestore docs, but I'm unable to delete the corresponding files in Storage.

Compile error: Property 'then' does not exist on type 'Observable<any>'.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';                      // I was experimenting with onPromise()
import { finalize, tap } from 'rxjs/operators';
import { AngularFireStorage } from '@angular/fire/storage';
import { StateService } from '../services/state.service';

// ...

export class AdminComponent implements OnInit {

    isProgressVisible: boolean;

    constructor(private storage: AngularFireStorage, public stateService: StateService) {
        this.isProgressVisible = false;
    }

    // ...    

    deleteFile(file): void {
        this.isProgressVisible = true;

        let storagePath = file.storagePath;                     // ex: 'uploads/1598066351161_myfile.txt'
        let delimiter = storagePath.indexOf('/');
        let docID = file.storagePath.substring(delimiter + 1);  // ex: '1598066351161_myfile.txt'

        let self = this;
 
        this.stateService.firebase.firestore().collection('files').doc(docID).delete().then(function () {
            console.log('cloud firestore doc deleted');

            let ref = self.storage.ref(storagePath);            // delete the file from Storage
            ref.delete().then(function () {
                console.log('file deleted from storage!');
            }).catch(function (error) {
                console.error('Error deleting file from storage:', error);
            });

        }).catch(function (error) {
            console.error('Error deleting cloud firestore doc:', error);
        });
    }
}

Any help is appreciated!

Emil Gi Emil Gi · Accepted Answer · 2020-08-24T08:03:30

this.stateService.firebase.firestore().collection('files').doc(docID).delete() returns an observable which is not promise. You should either convert it to promise with toPromise() or use subscribe instead of then.

Check this post for more insights.

delete Cloud Firestore doc and Fire Storage file simultaneously

1 Answers