Capturing the file path reference from subsribe and saving it in Firebase

Question

Capturing the file path reference from subsribe and saving it in Firebase

Currently, I have a script that is responsible for uploading my image once the form is submitted.

updateUser(user: User, privateUser: PrivateUser, dob) {
  //store img in storage
  if(this.file){
  var path = `users/${this.userID}/${this.file.name}`
  var ref = this.storage.ref(path);
  this.storage.upload(path, this.file);

    this.downloadURL = ref.getDownloadURL();
    this.refURL =this.downloadURL.subscribe(url => console.log(url) );
    console.log(this.refURL);

  }
}

I am currently working on saving the download URL as a reference point in Firebase. The script is successfully printing the desired output from

this.refURL =this.downloadURL.subscribe(url => console.log(url) );

. However, when I execute console.log(this.refURL);, it returns a subscriber instead of the actual URL value. How can I proceed with storing the URL value in Firebase?

angular typescript firebase rxjs firebase-storage

Answer 1

Answer №1

When you subscribe to an observable, you essentially listen for changes and receive values in return. This is how observables work - by subscribing to them, you can perform actions based on the changes received.

this.downloadURL.subscribe(url => {
this.refURL=url;//or some other action here
})

Alternatively, you can convert it to a promise and use await to get the response.

async updateUser(user: User, privateUser: PrivateUser, dob) {
  // Store image in storage
  if(this.file){
  var path = `users/${this.userID}/${this.file.name}`
  var ref = this.storage.ref(path);
  this.storage.upload(path, this.file);

    this.downloadURL = ref.getDownloadURL();
    this.refURL= await this.downloadURL.toPromise();
    console.log(this.refURL);

  }
}

Check out the demo here!

Answer 2

When you subscribe to an observable, you essentially listen for changes and receive values in return. This is how observables work - by subscribing to them, you can perform actions based on the changes received.

this.downloadURL.subscribe(url => {
this.refURL=url;//or some other action here
})

Alternatively, you can convert it to a promise and use await to get the response.

async updateUser(user: User, privateUser: PrivateUser, dob) {
  // Store image in storage
  if(this.file){
  var path = `users/${this.userID}/${this.file.name}`
  var ref = this.storage.ref(path);
  this.storage.upload(path, this.file);

    this.downloadURL = ref.getDownloadURL();
    this.refURL= await this.downloadURL.toPromise();
    console.log(this.refURL);

  }
}

Check out the demo here!

Capturing the file path reference from subsribe and saving it in Firebase

Answer №1

Similar questions

Encountering "Object is possibly undefined" during NextJS Typescript build process - troubleshooting nextjs build

The service has terminated unexpectedly because of signal: Ended prematurely: 9

Unable to set a value for an Angular formcontrol

Is there a way to retrieve the DOM element from an ngFor array?

What is the best way to create an "equals" method for an interface in mongodb?

Guide to configuring a not null property in Typescript Sequelize:

Steps to set angular for all items in the dropdown menu:

Tips on updating the datepicker format to be dd/mm/yyyy in ngbdatepicker

No GraphQL type definitions were discovered for the specified pointers: src/**/*.graphql

The Angular 2 Router's navigation functionality seems to be malfunctioning within a service

Leveraging TypeScript's "this" keyword within an interface

The logic behind combining elements from two arrays in JavaScript/TypeScript

Is it possible to use ES6 import and require in Typescript 2?

Iterating through an Object using the ngFor directive

Customizing table header sort icons in PrimeNG 15.4+: A step-by-step guide

The Axios GET method retrieves a response in the form of a string that represents an object

Troubleshooting problem with toggling Bootstrap accordion

Issue detected in the ngx-joyride package: Error found in ./node_modules/ngx-joyride/assets/images/close.svg

Issue encountered in Typescript: callback functions are returning undefined value when called from a superclass

Issue with Angular: Child component not receiving data after successful parent component call