What is the process for obtaining the complete URL using the getDownloadURL() function along with a token?

An error occurred due to an unresolved FirebaseStorageError: "storage/object-not-found". The message indicates that the object 'k91a73uzb99' does not exist in Firebase Storage. This type of error is categorized under FirebaseError with a code of 404 and a related status indicating failure to get the object.

export class ReportComponent implements OnInit {

  ref: AngularFireStorageReference;
  task: AngularFireUploadTask;
  newUrl: Observable<string>;

  constructor(private firesStore: AngularFireStorage,
              ) { }

  ngOnInit() { }

  async onSelectFile(event) {
    const id = Math.random().toString(36).substring(2);

    this.ref = this.fireStore.ref(id);
this.task = this.ref.put(event.target.files[0]); /*
        .snapshotChanges()
            .subscribe( (value) => {
            }); */

this.uploadPercent = this.task.percentageChanges();
// get notified when the download URL is available
this.task.snapshotChanges().pipe(
      finalize(() => {
        this.newUrl = this.ref.getDownloadURL();
        console.log(this.newUrl);
      })
).subscribe();

}

Expected: < storageBucket >/o/< ref(id) >?alt=media&token=<........>

Actual: < storageBucket >/o/< ref(id) >

Answer №1

When you see the error message "storage/object-not-found" and "Object 'k91a73uzb99' does not exist," it indicates that the file being uploaded has not completed the process yet. The following lines of code are where the issue lies:

this.ref = this.firesStore.ref(id);
this.task = this.ref.put(event.target.files[0]);

The mistake is trying to retrieve the download URL before the upload has finished. Here is how you should handle it:

this.newUrl = await this.firesStore.ref(id).getDownloadURL();

To ensure a successful upload, refer to the documentation example which demonstrates using AngularFireUploadTask to wait for the upload completion before accessing the download URL. Modify your code as follows:

this.uploadPercent = task.percentageChanges();
// Wait for the download URL to be available
task.snapshotChanges().pipe(
    finalize(() => this.newUrl = this.ref.getDownloadURL() )
 )
.subscribe()

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

In the Angular Google Maps API, is it possible to update the attributes of <agm-marker> directly within the TypeScript code?

Currently, I am fetching markers from the database and displaying them on a map using Angular Google Maps (AGM) by utilizing the <agm-marker> tag. In my code snippet below, you can see how I fetch and store the markers in an array named markers in t ...

Creating a universal wrapper function to serve as a logging tool?

Currently, I am working on a generic JS function that can wrap any other function. The purpose of this wrapper is to execute the wrapped function, log the input and output events, and then return the output for "transparent" logging. However, as I attempt ...

"TypeORM's createConnection function on MacOS with PG database returns a Pending status even when using

Running MacOS Catalina version 10.15.4 To replicate the issue, follow these steps using the quick guide: npm install typeorm --save npm install reflect-metadata --save npm install @types/node --save npm install pg --save npm install typeorm -g typeorm in ...

Inspecting an unspecified generic parameter for absence yields T & ({} | null)

Recently, I came across a perplexing issue while responding to this specific inquiry. It pertains to a scenario where a generic function's parameter is optional and its type involves the use of generics. Consider the following function structure: func ...

Error message in Angular 2: "__generator is not recognized"

I've been working on intercepting outgoing HTTP requests in Angular 2 in order to generate a token from the request body and attach it to the header of each post request. Below is the code snippet that I've implemented. Initially, I encountered ...

Supporting right-to-left (RTL) localization in Angular 2 and later versions

When it comes to incorporating right-to-left (RTL) support into a localized Angular 2+ application, particularly for languages like Hebrew and Arabic, what is considered the best approach? I have explored various tutorials, including Internationalization ...

Accessing Angular's Observable Objects

I am currently in the process of learning Angular and trying to work with Observables. However, I am facing an issue where I cannot extract data from an Observable when it is in object form. public rowData$!: Observable<any[]>; UpdateGrid() { this ...

Unable to confirm the version of Angular

I am currently using node version 10.14.1 and npm version 6.4.1 with angular version 7.0.3 installed. However, when I try to check the angular version by running the ng --version command, I encounter an error message in the command prompt. C:\Users&b ...

The issue of flickering while scrolling occurs when transitioning to a new page in Angular

I have encountered an unusual issue in my Angular 13 + Bootstrap 5 application. When accessing a scrollable page on small screen devices, the scrolling function does not work properly and causes the page to flicker. I observed that this problem does not o ...

The reason behind the ghost problem - classRef isn't recognized as a constructor

Recently, I encountered an issue where the app was not loading in the browser while running an Angular NX project locally with the command "start-dev": "nx run-many --target=serve --all". The screen would get stuck on our loading animat ...

What is the best way to connect a toArray function to an interface property?

Consider the following scenario: interface D { bar: string } interface B { C: Record<string, D> // ... additional properties here } const example: B = { C: { greeting: { bar: "hi" } } // ... additional properties here } Now I would like t ...

What could be causing my NodeJS Backend to not retrieve the data properly?

For a current project, I am tasked with building a mobile application using Flutter for the frontend and NodeJS for the backend. To facilitate this, I have acquired a VPS from OVHcloud running Ubuntu 20.04. Following various tutorials, I set up a server as ...

What causes the "Method Not Allowed" error while trying to restore the package.json package in VS2015?

When trying to restore a package.json file in VS2015, I am encountering a "Method Not Allowed" error. https://i.stack.imgur.com/OgK5P.png https://i.stack.imgur.com/AAkoQ.png The error log displays the following: npm ERR! Error: Method Not Allowed npm ER ...

What steps do I need to take to create a fresh interface in useState with the help of Typescript

I'm attempting to replicate an input by utilizing useState with an interface. Each time I click on the + button, the interface should be duplicated in the state, thereby duplicating my input. Here is the code I am working on: interface newInputsInter ...

When compiling my TypeScript file, I encountered an error stating that a block-scoped variable cannot be redeclared

In my Visual Studio Code, I have written just one line of code in my ex1.ts file: let n: number = 10; Upon compiling using the command tsc ex1.ts, the compiler successfully generates the ex1.js file. However, VSC promptly displays an error in the .ts file ...

Accessing the 8100 ionic application from any port or device other than the original one is not possible

I have successfully developed an Ionic application that runs smoothly on the browser using port 8100. However, I am encountering issues with logging in from simulator or any other port. I have implemented httpClient to fetch headers. Can someone please pro ...

Angular2: Observable flatMap issue with Undefined Property Subscribe

I am using the final version of Angular 2 and attempting to make an HTTP request that relies on another HTTP request. In my scenario, I am trying to retrieve an account with the user ID as a parameter which is obtained from another HTTP request (getUser). ...

Vue is alerting me that I cannot assign a reactive property to an undefined, null, or primitive value, specifically null

When retrieving data from Firebase, I am attempting to update the properties of the object being displayed on the UI. However, whenever I try to make any changes to the data, an error is thrown. Error in v-on handler: "TypeError: Cannot use 'in&apos ...

Unable to compile Angular 5 using the AOT systemjs configuration

I've hit a roadblock in finding a solution to my issue. Maybe someone out there can lend me a hand. I'm in the process of upgrading from ng 4.4.4 to 5.0.1 and everything seems to be functioning fine in JIT mode. However, when attempting to compi ...

A generic type in TypeScript that allows for partial types to be specified

My goal is to create a type that combines explicit properties with a generic type, where the explicit properties have priority in case of matching keys. I've tried implementing this but encountered an error on a specific line - can anyone clarify why ...