Unable to save an image to the state and send it as a request to 3rd party API
<p>I have been working on a React-Redux application. Currently I am working on submitting a form. I save the data from the form into the state. But I am unable to store a picture to the state. I tried to convert the file to base64 string but it doesn't seem to work. I am checking the state by getting an output on my console. And for the image file the console shows me <strong>Array[1]</strong>. It should show me the base64 string. Here is that part of the code:</p>

<pre><code>export class SignUp extends React.Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleImageChange = this.handleImageChange.bind(this);
  }

  handleSubmit(user) {
    const { dispatch } = this.props;

    const somePromise = new Promise((resolve) =&gt; {

    console.log(user);


    this.setState({}, this.sendFormData);

    });
    dispatch(actions.submit('user', somePromise));


  }

  handleImageChange(e) {
    e.preventDefault();

    let reader = new FileReader();
    let imgFile = e.target.files[0];


    reader.onloadend = () =&gt; {
      this.setState({
        file: reader.readAsDataURL(imgFile)
      });
    }

  }

  render() {


    let { user } = this.props;

    return (

      &lt;Form model="user" onSubmit = {this.handleSubmit}&gt;

        &lt;div className={classes.signup}&gt;

        &lt;Field className = {classes.pictureDiv} model="user.file"&gt;
          &lt;label className = {classes.labelTop}&gt;PROFILE PICTURE&lt;/label&gt;
          &lt;img src={userImage} className = {classes.imageArea}/&gt;
          &lt;input type="file" onChange={this.handleImageChange} ref="pic"/&gt;
          &lt;button className = {classes.delButton}&gt;Delete&lt;/button&gt;
        &lt;/Field&gt;

        //...so on
</code></pre>

<p>And apart from that, I can't figure out that how to get that base64 string value of image file and change it into request URL as I am doing with other fields here:</p>

<pre><code> sendFormData(){


    var formData = {
      fn: ReactDOM.findDOMNode(this.refs.fn).value,
      ln: ReactDOM.findDOMNode(this.refs.ln).value,
      city: ReactDOM.findDOMNode(this.refs.city).value,
      pic: ReactDOM.findDOMNode(this.refs.pic)  //-------------@todo don't know what to do here
    };

    //for check boxes
    formData.yes = this.getSelected('yes');
    formData.no = this.getSelected('no');

    // Send the form data.
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.open('POST','http://jsonplaceholder.typicode.com/posts',true);
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4) {
        var response = JSON.parse(xmlhttp.responseText);



        if (xmlhttp.status == 200 || xmlhttp.status == 201) {
          console.log('success');
        }
        else {
          console.log('failure')

        }


      }

    };

    xmlhttp.send(this.requestBuildQueryString(formData));
  }


  requestBuildQueryString(params) {
  var queryString = [];
  for(var property in params)
    if (params.hasOwnProperty(property)) {
      queryString.push(encodeURIComponent(property) + '=' + encodeURIComponent(params[property]));
    }
  return queryString.join('&amp;');

  }
</code></pre>