title: file upload in react. not able to understand issue
body: <p>Hi I Need to send one input filed and one file to server using react. I am using class component. My below code is not working properly. could you please check the same?</p>
  <p><a href="https://i.stack.imgur.com/WKrvU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WKrvU.png" alt="enter image description here" /></a></p>
  <p>Below is my code.</p>
  <pre><code>import React from 'react';
  import axios from 'axios';
  
  class FileUpload extends React.Component {
    constructor() {
      super();
      this.state = {
        selectedFile: '',
        countryCode: '',
        responseArray: [],
      };
      this.handleInputChange = this.handleInputChange.bind(this);
      this.handleInput = this.handleInput.bind(this);
    }
  
    handleInputChange(event) {
      this.setState({
        selectedFile: event.target.files[0],
        responseArray: [],
      });
    }
  
    handleInput(event) {
      this.setState({
        countryCode: event.target.value,
      });
    }
  
    handleSubmit(e) {
      e.preventDefault();
      if (!this.state.selectedFile) {
        alert('Please select The file');
        return false;
      }
      if (!this.state.countryCode) {
        alert('Please select The Country Code');
        return false;
      }
      const data = new FormData();
  
      for (let i = 0; i &lt; this.state.selectedFile.length; i++) {
        data.append('file[]', this.state.selectedFile[i]);
      }
      data.append('countryCode', this.state.countryCode);
      alert(data.file || data.countryCode);
  
      let url = process.env.API_URL;
  
      axios.post(url, data, {}).then(
        (res) =&gt; {
          this.setState({ responseArray: res.data });
          this.resetFile();
        },
        (error) =&gt; {
          alert(error);
        }
      );
    }
  
    resetFile() {
      document.getElementsByName('file')[0].value = null;
    }
  
    render() {
      return (
        &lt;form&gt;
          &lt;div className=&quot;row&quot;&gt;
            &lt;div className=&quot;col-md-12&quot;&gt;
              &lt;h1&gt;Translation File Upload&lt;/h1&gt;
  
              &lt;div className=&quot;form-row&quot;&gt;
                &lt;div className=&quot;form-group col-md-8&quot;&gt;
                  &lt;label&gt;Please enter the country code&lt;/label&gt;
                  &lt;input
                    type=&quot;text&quot;
                    value={this.state.countryCode}
                    onChange={this.handleInput}
                    required
                  /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div className=&quot;form-row&quot;&gt;
                &lt;div className=&quot;form-group col-md-8&quot;&gt;
                  &lt;label&gt;Select File :&lt;/label&gt;
                  &lt;input
                    type=&quot;file&quot;
                    className=&quot;form-control&quot;
                    multiple
                    name=&quot;file&quot;
                    onChange={this.handleInputChange}
                    required
                  /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;br /&gt;
              &lt;div className=&quot;form-row&quot;&gt;
                &lt;div className=&quot;col-md-6&quot;&gt;
                  &lt;button onClick={this.handleSubmit.bind(this)}&gt;Upload &lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;br /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      );
    }
  }
  
  export default FileUpload;
  </code></pre>
  <p>handleSubmit is not getting called after used enters the value. before that if user does not enter it gives validation error. I dont know what is the msitake?</p>