When I click on Upload button without entering country code and file it gives alert that please enter the code and choose the file. but once I choose these fields and then click on Upload button this method does not get called. I tried to check using console.log as well.

 handleSubmit() {
    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 < 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) => {
        this.setState({ responseArray: res.data });
        this.resetFile();
      },
      (error) => {
        alert(error);
      }
    );
  }

also page get refreshed automatically. I am not sure what causing the error. I tried a lot but not able to figure out the issue. please help me. Below is complete 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() {
    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 < 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) => {
        this.setState({ responseArray: res.data });
        this.resetFile();
      },
      (error) => {
        alert(error);
      }
    );
  }

  resetFile() {
    document.getElementsByName('file')[0].value = null;
  }

  render() {
    return (
      <form>
        <div className="row">
          <div className="col-md-12">
            <h1>Translation File Upload</h1>

            <div className="form-row">
              <div className="form-group col-md-8">
                <label>Please enter the country code</label>
                <input
                  type="text"
                  value={this.state.countryCode}
                  onChange={this.handleInput}
                  required
                />
              </div>
            </div>

            <div className="form-row">
              <div className="form-group col-md-8">
                <label>Select File :</label>
                <input
                  type="file"
                  className="form-control"
                  multiple
                  name="file"
                  onChange={this.handleInputChange}
                  required
                />
              </div>
            </div>
            <br />
            <div className="form-row">
              <div className="col-md-6">
                <button onClick={this.handleSubmit.bind(this)}>Upload </button>
              </div>
            </div>
            <br />
          </div>
        </div>
      </form>
    );
  }
}

export default FileUpload

;

CodePudding user response：

You have to prevent the default behavior of a onSubmit handler for a form. Modify the beginning of your submit function as such:

handleSubmit(e) {
   e.preventDefault()
(...)

For a form submit handler, it prevents the form from been submitted.

CodePudding user response：

Regarding the refreshing issue. I believe this is the expected behavior of the form and the submit button, and all you need is to prevent the behavior.

Regarding the second issue, I believe it is a backend issue. try to disable Axios and check if you still have the same issue

CodePudding user response：

First of all the default method of form is refreshing of page , as others have said you need to call

  e.preventDefault() in your handle submit function

secondly never access "DOM" directly, REACT manages the DOM so if you mess with it directly , react wont know and it will end up causing a lot of confusion.

instead of setting the value directly like here

document.getElementsByName('file')[0].value = null;

make it a controlled form and keep the value of files in state and reset it to null and pass it to input field. when you reset the file you dont update your state properties, selectedFile and countryCode fields are not null at that point and it will not alert you because you have reset your files directly by DOM without React but you are checking alert from react state values.