title: Javascript base64 encoding function returns undefined
body: <p>I am attempting to add Base64 encoded images to a string array. Using a file input form created with react-bootstrap's FormControl:</p>
  
  <pre><code>&lt;FormControl
     type="file"
     values={this.state.files}
     multiple
     onChange={this.addImage.bind(this)}
  /&gt;
  </code></pre>
  
  <p>I am calling this function:</p>
  
  <pre><code>addImage(event) {
    var newArr = [];
    for(var i=0; i&lt;event.target.files.length; i++) {
      newArr.push(this.getBase64(event.target.files[i])));
    }
    this.setState({ files: newArr });
  }
  </code></pre>
  
  <p>The function which encodes the images looks like this:</p>
  
  <pre><code>getBase64(file) {
    var reader = new FileReader();
    reader.onloadend = function() {
      return reader.result
    }
    reader.readAsDataURL(file);
  }
  </code></pre>
  
  <p>When the addImage() function calls the getBase64() function the returned value is <em>undefined</em>. I believe this is caused from the time it takes the getBase64() function to run. When I add a console.log line to spit out the reader.result the base64 string is output to the console properly, but the returned value is still, obviously, the same.</p>
  
  <p>What is going on here and how can I get the actual base64 string returned properly?</p>