CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-storage
Citrok
Citrok

Reputation: 1

Firebase return "Undefined" on "downloadURL"

I was just making a test with react and firebase (a simple app to upload image and, after the upload, show it on the page). The uploas is always successful, but I cannot show the image because the "dowloadURL" is undefined.

Can someone help me?

Here is the React/Firebase-call code

handleUpload(e) {
    console.log('handelUpload');
    const file = e.target.files[0];
    const storageRef = firebase.storage().ref(`/fotos/${file.name}`);
    const task = storageRef.put(file);

    task.on(
      'state_changed',
      snapshot => {
        let percentage = snapshot.bytesTransferred / snapshot.totalBytes * 100;
        this.setState({ uploadValue: percentage });
      },
      console.log,
      () => {
        const record = {
          photoURL: this.state.user.photoURL,
          displayName: this.state.user.displayName,
          image: task.snapshot.downloadURL
        };

        const dbRef = firebase.database().ref('pictures');
        const newPicture = dbRef.push();
        newPicture.set(record);
      }
    );
  }

And this is the code where I put the image when upload

        <FileUpload onUpload={this.handleUpload} />

      {this.state.pictures.map(picture =>
        <div>
          <hr/>
          <img src={picture.image} alt=""/> 
          <br/>
          <img width="32" src={picture.photoURL} alt={picture.displayName}/> 
          <br/>
          <span>{picture.displayName}</span>
        </div>
      ).reverse()}                
    </div>

Thank you!

Upvotes: 0

Views: 1739

Answers (1)

EECOLOR
EECOLOR

Reputation: 11244

In version 5 the downloadURL property was removed. Please see: https://firebase.google.com/support/release-notes/js

You should now use ref.getDownloadURL() (please note that this method returns a promise).

Upvotes: 1

Related Questions