title: ReactJS: How to handle Image / File upload with Formik?
body: <p>I am designing a profile page for my site using <code>ReactJS</code>. 
  Now my question is how do I upload the image from local machine and save it to the database and also displaying it in the profile page</p>
  
  <pre><code>import React, {Component} from 'react';
  import { connect } from 'react-redux';
  import { AccountAction } from '../../actions/user/AccountPg1Action';
  import { Formik, Form, Field, ErrorMessage } from 'formik';
  import * as Yup from 'yup';
  
  class AccountInfo extends Component {
    constructor(props) {
      super(props) 
      this.state = {
        currentStep: 1,
        userAccountData: {
          userid: '',
          useravtar: '',
          attachement_id: '',
     }
    }
   }
  
  handleFileUpload = (event) =&gt; {
    this.setState({useravtar: event.currentTarget.files[0]})
  };
  
  handleChange = event =&gt; {
      const {name, value} = event.target
      this.setState({
        [name]: value
      })    
    }
  
  handleSubmit = event =&gt; {
      let that = this;
      const { AccountAction } = that.props;
      event.preventDefault();
  
      let accountInputs = {
        userid: 49,
        useravtar: that.state.image,
        attachement_id: 478,
  }
      that.setState({
        userAccountData: accountInputs,
      })
  
      AccountAction(accountInputs)
    }
  AccountInfoView = () =&gt; {
  console.log(this.state.useravtar)
      return (
        &lt;section id="account_sec" className="second_form"&gt;
        &lt;div className="container"&gt;
        &lt;React.Fragment&gt;
          &lt;Formik
            initialValues={‌{
              file: null,
              email: '',
              phone: ''
            }}
            validationSchema={accountInfoSchema}
            render={(values) =&gt; {
            return(
          &lt;Form onSubmit={this.handleSubmit}&gt;
          &lt;Step1 
            currentStep={this.state.currentStep} 
            handleChange={this.handleChange}
            file= {this.state.useravtar}
            handleFileUpload={this.handleFileUpload}
            /&gt;
            &lt;/Form&gt;
          );
        }}
        /&gt;
        &lt;/React.Fragment&gt;
        )
    }
  
    render() {    
  
      return (
        &lt;div&gt;{this.authView()}&lt;/div&gt;
      )
    }
  }
  
  function Step1(props) {
  console.log(props.useravtar)
    if (props.currentStep !== 1) {
      return null
    } 
  
    return(
      &lt;div className="upload"&gt;
          &lt;label htmlFor="profile"&gt;
            &lt;div className="imgbox"&gt;
              &lt;img src="images/trans_116X116.png" alt="" /&gt;
              &lt;img src={props.useravtar} className="absoImg" alt="" /&gt;
            &lt;/div&gt;
          &lt;/label&gt;
  &lt;input id="file" name="file" type="file" accept="image/*" onChange={props.handleFileUpload}/&gt;
          &lt;span className="guide_leb"&gt;Add your avatar&lt;/span&gt;
        &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>When I do console in <code>handleChange</code> action for event.target.file[0] it responds with undefined. </p>
  
  <p>Also, doing a <code>console.log(this.state.useravtar)</code> in <code>handleSubmit</code> action it shows a pathname like <code>c:/fakepath/imgname.jpg</code></p>
  
  <p>P.S: I have a multiple forms so I am using it in a <code>Step</code> wise. And i am using Redux Reducer for storing the data. </p>
  
  <p>I have referred <a href="https://stackoverflow.com/q/42758040/7995957">this</a> link but my requirement is not looking like this. </p>