title: When encoding an image to base 64, the result is always undefined
body: <p>In my ReactJS project, I'm trying to store images in Firebase Realtime Database as a Base64 url and then convert back to an image on render.</p>
  
  <p>(Note: I know that firestore has this built in, however it's too late to rewrite the code to implement the rest of the project on the platform.)</p>
  
  <p>I take the file in via an input: </p>
  
  <pre><code>&lt;input onChange={this.handleImageUpload} className="form-control" type="file" name="profilePicture" id="profilePicture" placeholder="Upload a profle picture"/&gt;
  </code></pre>
  
  <p>Which runs the handleImageUpload() function:</p>
  
  <pre><code>  handleImageUpload = e =&gt; {
      e.preventDefault();
      const imageAsUrl = this.encodeImageFileAsUrl(e.target.files[0]);
  
      this.setState({
        profilePicture: imageAsUrl
      });
  
    }
  </code></pre>
  
  <p>Which calls the encodeImageAsUrl() function with the current file as input:</p>
  
  <pre><code>  encodeImageFileAsUrl = image =&gt; {
      const file = image;
      const reader = new FileReader();
      const imageAsUrl = reader.readAsDataURL(file);
      console.log("Image as url = " + imageAsUrl)
      return imageAsUrl;
  
    } 
  </code></pre>
  
  <p>The variable 'imageAsUrl' prints as 'undefined' and also note that any image I try is 1.2MB or less.</p>