Experiencing the error message "delete(...).then(...).error is not a function" while attempting to remove a file from Firebase storage using AngularFire and TypeScript

I'm trying to implement the code snippet from Firebase documentation to delete a file and then upload a new image in the same directory on Firebase Storage. However, I keep encountering an error message saying "delete(...).then(...).error is not a function".

Below is the code I am using:

const filePath = `instructors/${instrcutorID}`;
// Create a reference to the resized image file
const newFileRef = this.afStorage.ref(`${filePath}/cover_img_1040x585`);
// Create a reference to the file that needs to be deleted 
const desertRef = this.afStorage
            .ref(filePath)
            .child('cover_img_1040x585');
desertRef
.delete()
.then(() => {
this.afStorage.upload(`${filePath}/cover_img`, this.coverFile);
return this.keepTrying(10, newFileRef).then((url) => {
const coverURL = url;
this.afs.doc<Instructor>(`instructors/${instrcutorID}`).update({
coverURL: coverURL,
});
this.loadingSource.next(false);
alert('Successfully, updated...');
});
})
.catch((err: string) => {
this.loadingSource.next(false);
alert('Uh-oh, an error occurred!');
return console.error(err);
});

Answer №1

After encountering an issue, I found a solution by incorporating a promise obtained from RXJS into the delete() function before .then(). This seemed to resolve the problem, although it may just be a temporary fix that I'm uncertain about.

I am open to receiving any insights on this matter. :)

// Establishing a reference for the file to be deleted
  const desertRef = this.afStorage
    .ref(filePath)
    .child('cover_img_1040x585');
  // Deleting the file
  desertRef
    .delete()
    .toPromise() // INSERTED HERE
    .then((val) => {
      this.afStorage.upload(`${filePath}/cover_img`, this.coverFile);
      this.keepTrying(10, newFileRef).then((url) => {...

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

Configuring global runtime variables in NextJS for server-side operations

Currently, I am utilizing the instrumentation.ts file in NextJS to retrieve configuration dynamically when the server starts up. My goal is to have this configuration accessible during runtime for all API routes and server-side components. What would be th ...

What is the syntax for invoking a function within a nested function in TypeScript?

Is there a way to call the function func2 from within the sample function of function func1? Any suggestions on how to achieve that? class A { public func1() { let sample = function() { //call func2... but ...

Is there a way to send map data using props in React?

I just want to store and pass the current props.url to the videomodal so I can show the same active video on the video modal. I can't use useState in the map. How can I pass it? Or is there any other solution? Videos.tsx ( props.url must be in the &l ...

The Angular2 promise resolves before the web service call has finished executing

I have a service in Angular 2 that contains a function responsible for providing data for a dropdown list. This particular function returns a promise. Below is the code snippet from the service: getStuff(): Promise<Stuff> { return t ...

Can TypeORM create an entity for a many-to-many relationship that functions like ActiveRecord's join table concept?

Consider a scenario where there is a Guardian entity connected to a Student entity. The goal is to establish their many-to-many relationship in TypeORM by introducing a new entity called StudentGuardianRelationship. This intermediary entity serves the purp ...

Typescript interface created specifically for React Higher Order Component Props

Consider the React HOC provided below which adds sorting state to a component: import React, {Component, ComponentClass, ComponentType} from 'react' interface WithSortState { sortOrder: string } interface WithSortInjectedProps { sortO ...

What is the best way to include type within a nested object?

How should I properly define types for a nested object structured like the example below? const theme: DefaultTheme = { color: { primary: '#5039E7', secondary: '#372E4B', heading: '#4D5062', }, ...

Choose a name to show when adding a new user in Firebase

Implementing authentication in my React app using Firebase has been successful for signing up and logging in. However, I have been facing challenges trying to include additional information during the sign-up process. I explored solutions provided on Stack ...

Unable to access due to CORS restriction on Express server

Whenever I attempt to send a POST api request to my express server, I encounter the following error message. Access to XMLHttpRequest at 'localhost:8081/application' from origin 'localhost:8083' has been blocked by CORS policy: No &apos ...

Struggling with object type casting in Typescript

Having issues with casting objects from an HTTP API response to Typescript. I am trying to cast the json data to a Typescript object using the "as" keyword or <Type >, but it's not working as expected. r.forEach(entry => { entry.creatio ...

The function 'addDoc' is not available for export from the module 'firebase/firestore'

After successfully running my project for the past month, I encountered an error when reinstalling Windows and attempting to rerun the project. The error message states 'addDoc' is not exported from 'firebase/firestore' Furthermore, up ...

Updating row values in an Angular table

I have a reusable table with the [cellData]="row" attribute to populate each cell on the table (see sample table in the screenshot). My question is, how can we replace the null values on the template with "---" so that instead of displ ...

Anticipate that the function parameter will correspond to a key within an object containing variable properties

As I develop a multi-language application, my goal is to create a strict and simple typing system. The code that I am currently using is as follows: //=== Inside my Hook: ===// interface ITranslation { [key:string]:[string, string] } const useTranslato ...

The routing navigate method is failing to direct to the desired component

For the past day, I have been struggling to find a solution to my issue but without success. The routing seems to be malfunctioning as it keeps showing the HTML content from app.component.html even when I try changing the path in the URL. Here is a snippe ...

Make an indirect mention of a distant JavaScript web address

Our company is looking to incorporate Rollup with Angular 4/Typescript and NPM, and we have a specific set of requirements: Various teams develop JS libraries that need to be centralized, similar to a CDN These libraries are hosted at remote URLs and sho ...

Update to using res.get() instead of res.getHeader()

Looking for assistance with the code snippet below: const compress = require('compression'); export const handleCompression = compress({ filter: function (req: express.Request, res: express.Response) { return (/json|text|javascript|css|fo ...

Issue with Click event not working on dynamically added button in Angular 8

My goal is to dynamically add and remove product images when a user clicks the add or delete button on the screen. However, I am encountering an issue where the function is not being called when dynamically injecting HTML and binding the click event. Below ...

Encountering a Typescript error while attempting to convert a JavaScript file to Typescript within an Express

After deciding to transition my express.js code to typescript, I have encountered an issue with my user model. Below is a simplified version of the code: //user.model.ts import { Schema, Types } from 'mongoose'; export interface User { na ...

Display a picture retrieved from a POST request using Angular and a Spring Boot backend

Recently, I've been delving into the world of HTTP requests. My latest task involves uploading an image from the client and sending it to the server using a POST request. When testing this process in Postman, everything works smoothly as I receive th ...

Does TypeScript lack awareness of type checking within nested functions?

Currently, I am using TypeScript with React and encountering a particular issue. Below is a function I have created to ensure that the variable 'arr' is an Array and not empty. export const isNotEmptyArr = (arr?: unknown[]) => { return Arra ...