How to delete data from Firebase version 7?

Question

I am using firebase v7.21.1 and I am having this problem, that when i delete a file from my webApp, the fie disappears, but when i reload the page, it is still there and when i click on it, it gives me an error message: code 403, Permission denied and the file is still in my firebase database. Anyone ever had this issue? Check my code below.

import React from "react"
import { Container } from "react-bootstrap"
import { useFolder } from "../../hooks/useFolder"
import AddFolderButton from "./AddFolderButton"
import AddFileButton from "./AddFileButton"
import Folder from "./Folder"
import File from "./File"
import Navbar from "./Navbar"
import FolderBreadcrumbs from "./FolderBreadcrumbs"
import { useParams, useLocation } from "react-router-dom"
import { useState, useContext, useEffect } from "react";
import { storage } from "../../firebase"



export default function Dashboard() {
  const { folderId } = useParams()
  const { state = {} } = useLocation()
  const [allFiles, setFiles] = useState([]);
  const { folder, childFolders, childFiles } = useFolder(folderId, state.folder)


  useEffect(() => {
    setFiles(childFiles);
  }, [childFiles]);


  const deleteFromFirebase = (url) => {
    console.log(url);
          let fileRef = storage.refFromURL(url.url);
    console.log(fileRef);
          fileRef
            .delete()
            .then(() => {
              setFiles(allFiles.filter((childFile) => childFile !== url));
              alert("File deleted successfully!");
            })
            .catch((err) => {
              console.log(err);
            });
        };

      

  return (
    
    
    <>
    
      <Navbar />
      <Container fluid>
        <div className="d-flex align-items-center">
          <FolderBreadcrumbs currentFolder={folder} />
          <AddFileButton currentFolder={folder} />
          <AddFolderButton currentFolder={folder} />
        </div>
        {childFolders.length > 0 && (
          <div className="d-flex flex-wrap">
            {childFolders.map(childFolder => (
              <div
                key={childFolder.id}
                style={{ maxWidth: "250px" }}
                className="p-2"
              >
                <Folder folder={childFolder} />
              </div>
            ))}
          </div>
        )}

        {childFolders.length > 0 && childFiles.length > 0 && <hr />}
        {childFiles.length > 0 && (
          <div className="flex-wrap">
            {allFiles.map(childFile => ( 
              <div class = "row">
              <div
                key={childFile.id}
                style={{ Width: "auto" }}
                className="p-2"
              >
                <File file={childFile} />
                </div>
                <div style={{ padding: "8px" }}>
                <button type="button"  class="btn btn-primary" onClick={() => deleteFromFirebase(childFile)} confirm="Are your sure?">delete</button>
                </div>
              </div>
            ))}
          </div>
        )}
      </Container>
    </>
  )
}

I am using these conditions in the security rules and the issue still persists.

service cloud.firestore { 
match /databases/{database}/documents { 
match /{document=**} { 
allow read; 
allow write; 
allow delete; } } } 

service firebase.storage {
  // The {bucket} wildcard indicates we match files in all Cloud Storage buckets
  match /b/{bucket}/o {
    // Match filename
    match /{allPaths=**} {
      allow read;
      allow write;
    }
  }
}

Answer 1

i had to add to delete also from firestore database, this is working for me now...:

 const deleteFromFirebase = async (fileDoc) => {
    try {
      await storage.refFromURL(fileDoc.url).delete();
      await fileDoc.ref.delete();
      setFiles(allFiles.filter((childFile) => childFile !== fileDoc));
      alert("File deleted successfully!");
    } catch (e) {
      alert(`Error while deleting file ${e.message}`);
    }
  };