csv upload with react

Solutions on MaxInterview for csv upload with react by the best coders in the world

showing results for - "csv upload with react"
Camilo
27 Sep 2017
1import React, {Component} from 'react';
2import logo from './logo.svg';
3import './App.css';
4import CSVReader from 'react-csv-reader';
5import axios from 'axios';
6
7class App extends Component {
8
9  constructor(props) {
10    super(props);
11    this.state = { 
12      apiResponse: '',
13      file: null,
14    };
15    this.handleImport = this.handleImport.bind(this);
16    this.handleSubmit = this.handleSubmit.bind(this);
17  }
18
19
20  callAPI() {
21      fetch("http://localhost:9000/testAPI")
22          .then(res => res.text())
23          .then(res => this.setState({ apiResponse: res }));
24          console.log(this.state.apiResponse)
25  }
26
27  componentDidMount() {
28      this.callAPI();
29  }
30
31  handleImport(data){
32
33    this.setState({file:data.target.files[0]})
34
35    //because I couldn't get state to work I used axios imediately with the data
36    axios.post("http://localhost:9000/upload", data, { // receive two parameter endpoint url ,form data 
37    }).then(res => { // then print response status
38        console.log(res.statusText)
39    })
40
41  }
42
43  //I'm not using handlesubmit here as it involves a button press 
44  handleSubmit(e){
45    e.preventDefault();
46    const data = new FormData();
47    data.append('file', this.state.file);
48
49    console.log(data);
50
51    axios.post("http://localhost:9000/upload", data, { // receive two parameter endpoint url ,form data 
52    }).then(res => { // then print response status
53        console.log(res.statusText)
54    })
55  } 
56
57
58  render() {
59    return (
60      <div className="App">
61        <header className="App-header">
62          <img src={logo} className="App-logo" alt="logo" />
63          <p className='App-intro'> {this.state.apiResponse}</p>
64        </header>
65
66        <content className='body_cont'>
67
68          {/* My Form */}
69          <form action="POST">
70            <input type="file" name='file' onChange={this.handleImport} />
71            <button type='submit' onClick={this.handleSubmit}>Upload File</button>
72          </form>  
73
74        </content>
75      </div>
76    );
77  }
78}
79
80export default App;
81