Problem when adding a picture from flamelink

Question

I have a problem when I'm trying to load a picture from my Flamelink schema that is connected to my Firebase DB.

I have a simple component that displays a puppy for sale:

const PuppyCard = (props) => {
  return (
    <div className='PuppyCard'>
      <div className='PuppyCard__img'>
        <img src={props.data.picture} alt={props.data.name} />
      </div>
      <div className='PuppyCard__text'>
        <h2>{props.data.name}</h2>
        <h3>{props.data.sex}</h3>
        <h4>{props.data.age}</h4>
        <h4>{props.data.price}</h4>
      </div>
    </div>
  )
}

And as you can see there is a props.data.picture as my src for the image, but when i try to load it on the website i get everything but the picture. After looking into my DB i saw that the picture is not a file but a reference to the other folder created by flamelink: 1

This is what i am fetching from the DB right now.

getPuppies = () => {
    db
      .collection('fl_content')
      .get()
      .then(docs => {
        if (!docs.empty) {
          let allPuppies = []
          docs.forEach(function (doc) {
            const puppy = {
              id: doc,
              ...doc.data()
            }

            allPuppies.push(puppy)
          })

          this.setState({
            puppies: allPuppies
          }, () => {
            this.setState({
              isLoaded: true
            })
          })
        }
      })
  }

Any help is appreciated!

Answer 1

I've managed to solve this problem, although now i realize that the question is not accurate.

What I was trying to do was to get the picture that was uploaded in the Flamelink CMS to display on the website, however i was only getting a file ID when i tapped into the property of the props.

My solution to this problem was:

1. store the fileID in a variable

2. Query the folder created by the flamelink CMS inside the Cloud Firestore called "fl_files" =>

    db.collection('fl_files').doc(fileID).get().then(function (doc) {
    var fileName = doc.Nf.nn.proto.mapValue.fields.file.stringValue;
    console.log(fileName);
   
    storageRef.child('flamelink/media/' + fileName).getDownloadURL().then(function (url) {
      console.log(url);
   
      var img = document.getElementById('an id for the image inside a react child component');
      img.src = url
    })
   

Please note that 'flamelink/media/' is inside the Storage, not inside Cloud Firestore.

Hope this helps somebody with the same problem I've had! Issue closed :)