Csv upload with react

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import CSVReader from 'react-csv-reader';
import axios from 'axios';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = { 
      apiResponse: '',
      file: null,
    };
    this.handleImport = this.handleImport.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }


  callAPI() {
      fetch("http://localhost:9000/testAPI")
          .then(res => res.text())
          .then(res => this.setState({ apiResponse: res }));
          console.log(this.state.apiResponse)
  }

  componentDidMount() {
      this.callAPI();
  }

  handleImport(data){

    this.setState({file:data.target.files[0]})

    //because I couldn't get state to work I used axios imediately with the data
    axios.post("http://localhost:9000/upload", data, { // receive two parameter endpoint url ,form data 
    }).then(res => { // then print response status
        console.log(res.statusText)
    })

  }

  //I'm not using handlesubmit here as it involves a button press 
  handleSubmit(e){
    e.preventDefault();
    const data = new FormData();
    data.append('file', this.state.file);

    console.log(data);

    axios.post("http://localhost:9000/upload", data, { // receive two parameter endpoint url ,form data 
    }).then(res => { // then print response status
        console.log(res.statusText)
    })
  } 


  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p className='App-intro'> {this.state.apiResponse}</p>
        </header>

        <content className='body_cont'>

          {/* My Form */}
          <form action="POST">
            <input type="file" name='file' onChange={this.handleImport} />
            <button type='submit' onClick={this.handleSubmit}>Upload File</button>
          </form>  

        </content>
      </div>
    );
  }
}

export default App;

Source: stackoverflow.com

Similar codes

15 votes291 views2 answers
UseReducer() hook react
Javascript React
21 votes279 views6 answers
React native vector icons
Javascript React
1 vote287 views1 answer
React-native link to play store
Javascript React
0 vote298 views1 answer
React native navigation remove top header screen
Javascript React
7 votes275 views6 answers
Prop types in react
Javascript React
0 vote282 views1 answer
Toggle boolean state react
Javascript React
2 votes302 views2 answers
Run react native app in production mode
Javascript React
1 vote302 views2 answers
React chartjs 2
Javascript React
1 vote283 views1 answer
Select in react with nchange
Javascript React
0 vote272 views1 answer
Jest create react app only run one test
Javascript React