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

2 votes293 views2 answers
How to add query parameter to url reactjs
Javascript React
0 vote269 views1 answer
Loading react circular progress
Javascript React
0 vote240 views1 answer
Loop number in react
Javascript React
0 vote266 views1 answer
How to add autoserial number in react js
Javascript React
0 vote268 views1 answer
Dlowlad the json fiel in react js pretty formate
Javascript React
8 votes250 views1 answer
Ternary operator in button react
Javascript React
3 votes218 views2 answers
React api call
Javascript React
0 vote267 views1 answer
How to use rgba in react native
Javascript React
2 votes251 views2 answers
Export aab bundle react native android
Javascript React
0 vote237 views1 answer
Ts(2749) react testing library
Javascript React