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

The use of the `/deep/` combinator in CSS has been phased out and is set to be completely removed

After updating my angular to version 4.0.0 and chrome to 62.0.3202.94, I encountered the following error message: [Deprecation] /deep/ combinator in CSS is deprecated and will be removed in M63, around December 2017. Refer to for more information. The ...

When utilizing Jest, the issue arises that `uuid` is not recognized as

My current setup is as follows: // uuid-handler.ts import { v4 as uuidV4 } from 'uuid'; const generateUuid: () => string = uuidV4; export { generateUuid }; // uuid-handler.spec.ts import { generateUuid } from './uuid-handler'; de ...

Error message: Unable to locate Bootstrap call in standalone Angular project after executing 'ng add @angular/pwa' command

Having an issue while trying to integrate @angular/pwa, it keeps showing me an error saying "Bootstrap call not found". It's worth mentioning that I have removed app.module.ts and am using standalone components in various places without any module. Cu ...

Creating a default option of "please select" on an Angular select element with a null value for validation

Within my Angular application, I am using a select element with an ngFor loop: <select formControlName="type" required> <option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option> </select> When view ...

Utilize Angular to initiate the transmission of attribute values upon a click event

My question may be simple, but I've been struggling to find an answer. How can I send attributes or item property bindings of an item through a click event in the best way? For example: <item class="item" [attr.data-itemid]="item.id ...

Next.js: Generating static sites only at runtime due to getStaticProps having no data during the build phase, skipping build time generation

I am looking to customize the application for individual customers, with a separate database for each customer (potentially on-premise). This means that I do not have access to any data during the build phase, such as in a CI/CD process, which I could use ...

What are the recommended TypeScript tsconfig configurations for running Node.js 10?

Can someone provide information on the necessary target/libs for enabling Node.js v10.x to utilize async/await without generators? I have found plenty of resources for node 8 but not as much for node 10. ...

Sortable layouts and tables in Ionic 3

I found a great example of an Ionic table that I'm using as reference: https://codepen.io/anon/pen/pjzKMZ <ion-content> <div class="row header"> <div class="col">Utility Company Name</div> <div c ...

The Angular firestore is showing an error stating that the property 'toDate' is not found in the 'Date' type

I am currently working on converting a timestamp object from Firestore to a Date object in TypeScript by utilizing the toDate() method. import { AngularFirestore } from '@angular/fire/firestore'; ... constructor(private database?: AngularFirestor ...

What about combining a fat arrow function with a nested decorator?

Trying to implement a fat arrow function with a nestjs decorator in a controller. Can it be done in the following way : @Controller() export class AppController { @Get() findAll = (): string => 'This is coming from a fat arrow !'; } Wh ...

Issue with spyOn function being called in Jasmine test for Angular 2

Within the initialization of my Angular component, there is a function: populateForm(id:String, index:number){ let blogs = this.blogsService.returnBlogs() blogs.map((blog:Blog)=>{ blog._id === id ? this.blogsService.populateForm.next({blog: ...

Nestjs: Can't find property in Mongoose document

I am currently encountering some issues with the following code while using Nestjs along with Mongoose: import { Injectable } from '@nestjs/common'; import { Key, KeyDocument } from '@app/mongo'; import { Model } from 'mongoose&apo ...

Error in Angular nested form: Unable to access property 'length' of null object

I have created a nested form with various form controls: this.newRequest = this._fb.group({ requestType: [], tripType: [], feeders: [''], directFlight: [], departure: [''], arrival: [''], depDate: ...

Starting object arrays in Angular 6 using ES6

As someone who is just starting out with javascript, I have encountered a challenge with a nested class structure. Specifically, I am looking to initialize an array of EventDate objects and assign it to 'this.dates' within the CustomerEvents cons ...

What is the best way to include the file name and size as query parameters in Node.js?

To retrieve an image from the folder, a query needs to be passed containing the filename and dimensions like this: localhost:3000/images?filename=myImage&width=100&height=100 The initial objective is to fetch images from the designated folder, res ...

Invoking a parent method from a child component in a TypeScript and React application

I'm facing an issue where I am unable to call a method from a parent component in my child component. The method in the parent element is not being triggered when the child component tries to call it. This problem is showcased in a simple example with ...

Getting the Firebase Project Name or ID from a Cloud Function is a simple task that involves using

While working with Cloud Functions, I need to retrieve the project name from one of my Javascript server files. The project name is stored in .firebaserc file, but I am not sure if this file is accessible on the server side. Is there a way to achieve somet ...

Tips for accessing the firebase user's getIdToken method in Next.js after a page reload

Currently, I am developing a Next.js project and implementing user authentication using Firebase's signInWithPhoneNumber method for phone number verification. After successful verification, I receive a Firebase user with the getIdToken method to retri ...

Whenever I try to access my Node.js API from Heroku's live server, I encounter a CORS policy error

Whenever I try to access my Node.js API from the Angular app (running on a local setup) and host the API on Heroku's live server, I encounter the following error: CORS policy: No 'Access-Control-Allow-Origin'. Interestingly, when I host the ...

The option value in mat-autocomplete is not displaying correctly on IOS devices

When I click on the first option in the dropdown menu, it does not display the selected option in the field. However, when I select the second option, then the value of the first option appears, and when I choose the third option, the value of the second o ...