What is the process for removing an image from Firebase storage using its URL?

Is there a way to delete an image from Firebase storage using its URL? I have noticed that when I remove an item (category) from the collection, the image associated with it remains in storage.

This is the interface for category:

    export interface ICategory {
        readonly id     : string
        name            : string
        image           : string 
    }

Here is the function for removing categories:

    export const removeCategoryFB = (id: string, setCategories: any) => {
      firestore()
        .collection("categories")
        .doc(id)
        .delete()
        .then(() => {
          getCategoriesFB(setCategories);
        })
        .catch((err) => {
          alert(err);
        });
    };

Answer №1

To tackle this issue, I implemented the following solution:

refFromURL(URL)

Here's an example of the code in action:

  firestore()
    .collection('categories')
    .doc(id)
    .get()
    .then((snapshot) => {
      storage()
        .refFromURL(snapshot.data().image.url)
        .delete()
    })

Answer №2

To remove a file, you must first obtain the storage reference and then use the file storage path for deletion.

removeChatFile(filePath) {
    const reference = firebase
      .storage()
      .ref()
      .child(filePath);
    reference.delete();
  } 

this.removeFile('files/1579283129986-vMglgpHwT6c06RSmAiuYP6Hk2sz1.png');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the emission of Vue 3 with the Options API through typing

Is there a way to declare emits in Vue 3 Options API similar to the Composition API approach? Based on the Composition API documentation: (docs) <script setup lang="ts"> // type-based const emit = defineEmits<{ (e: 'change', ...

Verify in typescript if type A is equal to either type B or type C

Within one specific file, there is a structured code block like the following: export const _total = { a: '', b: '', c: '', d: '', e: '', f: '', } type TotalKeysType = typeof _all; ex ...

When using expressjs and typescript, you may encounter an error stating that the type 'typeof <express.Router>' cannot be assigned to the parameter type 'RequestHandlerParams'

Working on my project using expressjs with the latest typescript definition file and typescript 2.3.4 from https://github.com/DefinitelyTyped/DefinitelyTyped. I've set up a router and want to access it from a subpath as per the official 4.x documentat ...

The error states that the type '() => string | JSX.Element' cannot be assigned to the type 'FC<{}>'

Can someone help me with this error I'm encountering? I am fairly new to typescript, so I assume it has something to do with that. Below is the code snippet in question: Any guidance would be greatly appreciated. const Pizzas: React.FC = () => { ...

Issues with eventEmitter functionality in Angular 2

Everyone performed admirably following the manual, here is the code snippet for WebSocketBroadcaster: import {EventEmitter, Injectable} from "@angular/core"; @Injectable() export class WebSocketBroadcaster { ee: EventEmitter<any> = new EventEmi ...

Is there a way to eliminate the latency when utilizing react context in Next.js?

I am currently working on storing basic (non-sensitive) user information, such as display name and profile picture, in react context. This data is saved in local storage to ensure persistence even if the client refreshes/closes the page, with the context r ...

Enhance your coding experience with Firebase Autocomplete on VScode

Recently, I installed VScode along with the necessary packages for JavaScript development. As I started writing code involving Firebase, I noticed that the autocomplete feature, which worked perfectly fine in Xcode, was not functioning in VScode. How can I ...

Exploring two main pages, each with tabs displaying two negative behaviors

I developed an app with an ion-footer at the bottom of each root page : <ion-footer> <ipa-footer-buttons></ipa-footer-buttons> </ion-footer> The <ipa-footer-button> component is structured as follows: html: <ion-toolb ...

Obtain the ViewContainerRef object from the Component

Looking to create nested components in Angular 4? This is the Chooser Component import {InputComponent} from './input/input.component' import {BlockComponent} from './block/block.component' export const FormChooser = { Block: Block ...

What is the best way to enable swipe functionality for ion-items in Ionic without requiring a click?

I have been working on implementing an ion-list with swipable ion-items that do not need to be clicked on the side to trigger an event. The functionality I am aiming for is similar to the default contacts app on Samsung phones, where a left swipe calls an ...

Guide on populating text boxes in a form automatically using ngFor?

As a beginner Angular developer, I am looking to automatically fill in text boxes in a form, specifically 10 text boxes (10 rows) using the ngFor directive. In my research on ngFor examples, I have noticed that most of them focus on populating a list base ...

Issue with attaching extra headers to petition

I have been working on integrating socket.io with my Angular application. Following the steps outlined in this article, I tried to incorporate jwt based authentication for my Express server. To set the authentication headers as per the socket.io docs, I up ...

Using Typescript in the package.json as a dependency

After initiating a React project with typescript using the command below: npx create-react-app frontend --template typescript https://i.sstatic.net/8n4O5.png I noticed that the tyepscript, @testing, and @types libraries were added to dependencies rather ...

Is there a way to retrieve the status code from the HttpClient module in Angular?

Can you find out how to retrieve the status codes for all requests using the HttpClient method? callingAPI() { let headers = new HttpHeaders(); headers = headers.append('Content-Type', 'application/json'); headers = headers. ...

When utilizing useMachine in TypeScript, an error is thrown regarding incompatible types

While attempting to build my first example for a xstate finite machine by following the example on github.com/carloslfu/use-machine, I encountered a TypeScript error that halted my progress: Argument of type '{ actions: { sideEffect: () => void; } ...

Enhancing TypeScript Native Interface Properties in TypeScript 2.4

After discovering an error in the native Typescript interface for HTMLTextAreaElement, I realized the need to make a correction. The current interface looks like this: interface HTMLTextAreaElement { setSelectionRange(start: number, end: number): void; ...

Issues with implementing Firebase web push notifications using NodeJS and troubleshooting them

I'm in the process of developing an application that sends web push notifications through Firebase and a NodeJs server, but I keep encountering a 'mismatched-credential' error. How can I resolve this issue? Initially, I am creating a JSON f ...

When receiving JSON and attempting to store the data in a variable, I encounter an issue where it returns the error message "undefined is not iterable (cannot read property Symbol

I'm currently integrating the Advice Slip API into my project. I am experiencing an issue when trying to store the JSON data in a variable like so: let advice; fetch("https://api.adviceslip.com/advice").then(response => response.json()). ...

One cannot initialize an empty object in Typescript

In this scenario, I am working with a variable named 'body' that is initially set to null: const body: { "name": string, "photo": { "fileName": string, "file": NodeJS.ReadableStream, "encoding": string, "m ...

Issue with MathJax rendering within an Angular5 Div that's being observed

I am trying to figure out how to enable MathJax to convert TeX to HTML for elements nested within my div. Here is the current content of app.component.html: <p> When \(a \ne\) It works baby </p> <div class="topnav"> ...