title: How do I connect Firebase Storage with Cloud Firestore so my images are associated to their respective posts?
body: <p>I have a CRUD React app where you can create articles. There is a 'title', 'content' and 'image'.</p>
  <p>I have a collection in Cloud Firestore called 'articles'. The documents have the fields: 'title' and 'content' so every time I create an article in my react app, a new document is created.</p>
  <p>The next step was to be able to add images to the articles.</p>
  <p>I managed to connect to Firebase and upload an image to Firebase Storage from my React page. However how do I connect the images to their articles? Like, how do I make the connection between Cloud Firestore and Storage?</p>
  <p>Do I create an extra field in my documents called 'images'? But then how do I reference it?
  I also want to try and avoid duplicates.</p>
  <blockquote>
  <p>UploadImage.js</p>
  </blockquote>
  <pre><code>
  import React, { useState, Component } from &quot;react&quot;;
  import { storage } from &quot;../Firebase&quot;;
  
  function UploadFile() {
          const [image, setImage] = useState(null);
          const [url, setUrl] = useState(&quot;&quot;);
          const [progress, setProgress] = useState(0);
  
          const handleChange = e =&gt; {
              if (e.target.files[0]) {
                setImage(e.target.files[0]);
              }
            };
  
            const handleUpload = () =&gt; {
              const uploadTask = storage.ref(`images/${image.name}`).put(image);
              uploadTask.on(
                &quot;state_changed&quot;,
                snapshot =&gt; {
                  const progress = Math.round(
                    (snapshot.bytesTransferred / snapshot.totalBytes) * 100
                  );
                  setProgress(progress);
                },
                error =&gt; {
                  console.log(error);
                },
                () =&gt; {
                  storage
                    .ref(&quot;images&quot;)
                    .child(image.name)
                    .getDownloadURL()
                    .then(url =&gt; {
                      setUrl(url);
                    });
                }
              );
            };
  
            console.log(&quot;image: &quot;, image);
  
        return (
          &lt;div&gt;
        &lt;progress value={progress} max=&quot;100&quot; /&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;input type=&quot;file&quot; onChange={handleChange} /&gt;
        &lt;button onClick={handleUpload}&gt;Upload&lt;/button&gt;
        &lt;br /&gt;
        {url}
        &lt;br /&gt;
        &lt;img src={url || &quot;http://via.placeholder.com/300&quot;} alt=&quot;firebase-image&quot; /&gt;
      &lt;/div&gt;
           
        );
      }
  
      export default UploadFile;
  </code></pre>
  <p>This is my 'Add Article' form--&gt;</p>
  <blockquote>
  <p>AddArticle.js</p>
  </blockquote>
  <pre><code>import React, { Component } from 'react';
  import firebase from '../Firebase';
  import UploadFile from '../components/UploadFile';
  
  class AddArticle extends Component {
  
    constructor() {
      super();
      this.ref = firebase.firestore().collection('articles');
      this.state = {
        title: '',
        content: ''
      };
    }
    onChange = (e) =&gt; {
      const state = this.state
      state[e.target.name] = e.target.value;
      this.setState(state);
    }
  
    onSubmit = (e) =&gt; {
      e.preventDefault();
  
      const { title, content } = this.state;
  
      this.ref.add({
        title,
        content
  
      }).then((docRef) =&gt; {
        this.setState({
          title: '',
          content: ''
        });
        this.props.history.push(&quot;/&quot;)
      })
      .catch((error) =&gt; {
        console.error(&quot;Error adding document: &quot;, error);
      });
    }
  
    render() {
      const { title, content } = this.state;
      return (
        &lt;div className=&quot;container&quot;&gt;
        &lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;
          &lt;div className=&quot;panel panel-default&quot;&gt;
            &lt;div className=&quot;panel-heading&quot;&gt;
              &lt;h3 className=&quot;panel-title text-center&quot;&gt;
                Create a new article
              &lt;/h3&gt;
            &lt;/div&gt;
            &lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;
            &lt;div className=&quot;panel-body&quot;&gt;
              &lt;form onSubmit={this.onSubmit}&gt;
                &lt;div className=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;title&quot;&gt;Title:&lt;/label&gt;
                  &lt;input type=&quot;text&quot; className=&quot;form-control&quot; name=&quot;title&quot; value={title} onChange={this.onChange} placeholder=&quot;Title&quot; /&gt;
                &lt;/div&gt;
                &lt;div className=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;content&quot;&gt;Content:&lt;/label&gt;
                  &lt;textArea className=&quot;form-control&quot; name=&quot;content&quot; onChange={this.onChange} placeholder=&quot;Content&quot; cols=&quot;80&quot; rows=&quot;20&quot;&gt;{content}&lt;/textArea&gt;
                &lt;/div&gt;
                &lt;UploadFile /&gt;
                &lt;button type=&quot;submit&quot; className=&quot;btn btn-success&quot;&gt;Submit&lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default AddArticle;
  </code></pre>