title: Uploading image to firebase storage: Unhandled Rejection (TypeError): Cannot read property 'state' of undefined
body: <p>I have a CMS where I create an article with a title, the content and an image. I then display all of that in the homepage. The images are being stored in Firebase Storage and I manage to do that successfully (when I check storage, they're there), however as soon as I submit the form, I see this error:</p>
  <blockquote>
  <p>Unhandled Rejection (TypeError): Cannot read property 'state' of undefined</p>
  </blockquote>
  <p>I'm really new to this so if you know what's wrong please be as specific as possible. I'm still learning how to pass props and all of that.</p>
  <p><strong>UploadFile.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import firebase from '../Firebase';
  
  function UploadFile() {
  
    const [fileUrl, setFileUrl] = React.useState(null);
  
    const onFileChange = async (e) =&gt; {
      const file = e.target.files[0]
      const storageRef = firebase.storage().ref()
      const fileRef = storageRef.child(`/articleImages/${file.name}`)
      await fileRef.put(file);
      setFileUrl(await fileRef.getDownloadURL().then(fileUrl =&gt; {
          firebase.firestore().collection('articles').doc(this.state.documentId).update({
              fileUrl: fileUrl
          })
          .then(() =&gt; {
              setFileUrl('')
          })
      } ));
    };
  
    return (
      &lt;&gt;
          &lt;input type=&quot;file&quot; onChange={onFileChange} /&gt;
        &lt;div&gt;
            &lt;img width=&quot;100&quot; height=&quot;100&quot; src={fileUrl} alt=''/&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  
  export default UploadFile;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/MAsGk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MAsGk.png" alt="enter image description here" /></a></p>
  <p>This is the form where I've added the UploadFile component:</p>
  <p><strong>AddArticle.js</strong></p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import firebase from &quot;../Firebase&quot;;
  import UploadFile from &quot;../components/UploadFile&quot;;
  
  class AddArticle extends Component {
    constructor() {
      super();
      this.ref = firebase.firestore().collection(&quot;articles&quot;);
      this.state = {
        title: &quot;&quot;,
        content: &quot;&quot;,
        fileUrl: &quot;&quot;,
      };
    }
    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, fileUrl } = this.state;
  
      this.ref
        .add({
          title,
          content,
          fileUrl,
        })
        .then((docRef) =&gt; {
          this.setState({
            title: &quot;&quot;,
            content: &quot;&quot;,
            fileUrl: &quot;&quot;,
            documentId: docRef.id,
          });
  
          this.props.history.push(&quot;/&quot;);
        })
        .catch((error) =&gt; {
          console.error(&quot;Error adding document: &quot;, error);
        });
    };
  
    render() {
      const { title, content, fileUrl } = 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;input type=&quot;file&quot; onChange={this.onFileChange} /&gt; */}
                &lt;UploadFile onChange={this.onChange} value={fileUrl} /&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>
  <p>And finally, I have a homepage where I display the image and the other data from the form:</p>
  <p><strong>ViewAllArticles.js</strong></p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import firebase from &quot;../Firebase&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  
  class ViewAllArticles extends Component {
    constructor(props) {
      super(props);
      this.ref = firebase.firestore().collection(&quot;articles&quot;);
      this.unsubscribe = null;
      this.state = {
        articles: [],
      };
    }
  
    onCollectionUpdate = (querySnapshot) =&gt; {
      const articles = [];
      querySnapshot.forEach((doc) =&gt; {
        const { title, content, fileUrl } = doc.data();
        articles.push({
          key: doc.id,
          doc, // DocumentSnapshot
          title,
          content,
          fileUrl,
        });
      });
      this.setState({
        articles,
      });
    };
  
    componentDidMount() {
      this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate);
    }
  
    render() {
      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;All articles&lt;/h3&gt;
            &lt;/div&gt;
            &lt;br&gt;&lt;/br&gt;
            &lt;br&gt;&lt;/br&gt;
            &lt;br&gt;&lt;/br&gt;
            &lt;div className=&quot;panel-body&quot;&gt;
              &lt;table className=&quot;table table-stripe&quot;&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th&gt;Title&lt;/th&gt;
                    &lt;th&gt;Content&lt;/th&gt;
                    &lt;th&gt;Image&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                  {this.state.articles.map((article) =&gt; (
                    &lt;tr&gt;
                      &lt;td&gt;
                        &lt;Link to={`/editArticle/${article.key}`}&gt;
                          {article.title}
                        &lt;/Link&gt;
                      &lt;/td&gt;
                      &lt;td&gt;{article.content}&lt;/td&gt;
                      &lt;td&gt;
                        &lt;img
                          width=&quot;100&quot;
                          height=&quot;100&quot;
                          src={article.fileUrl}
                          onError={(e) =&gt; {
                            e.target.onerror = null;
                            e.target.src =
                              &quot;https://images.unsplash.com/photo-1597759261513-474270ffae0f?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2238&amp;q=80&quot;;
                          }}
                        /&gt;
                      &lt;/td&gt;
                    &lt;/tr&gt;
                  ))}
                &lt;/tbody&gt;
              &lt;/table&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default ViewAllArticles;
  </code></pre>