web-dev-qa-db-fra.com

Comment télécharger et lire des fichiers CSV dans React.js?

Je voudrais que l'utilisateur télécharge un fichier .csv et que le navigateur puisse ensuite analyser les données de ce fichier. J'utilise ReactJS. Comment cela fonctionnerait-il? Merci.

javascriptreactjscsvuser-input
17
user2593758

Deviner. Une combinaison de react-file-reader et de FileReader de HTML5 (voir this page).

Placez le bit react-file-reader dans le rendu:

<ReactFileReader handleFiles={this.handleFiles} fileTypes={'.csv'}>
    <button className='btn'>Upload</button>
</ReactFileReader>

Et puis ceci ci-dessus.

handleFiles = files => {
    var reader = new FileReader();
    reader.onload = function(e) {
    // Use reader.result
    alert(reader.result)
    }
  reader.readAsText(files[0]);
}
19
user2593758

Je voudrais utiliser Papa Parse ( https://www.npmjs.com/package/papaparse ). Et voici un exemple de composant de réaction:

class FileReader extends React.Component {
  constructor() {
    super();
    this.state = {
      csvfile: undefined
    };
    this.updateData = this.updateData.bind(this);
  }

  handleChange = event => {
    this.setState({
      csvfile: event.target.files[0]
    });
  };

  importCSV = () => {
    const { csvfile } = this.state;
    Papa.parse(csvfile, {
      complete: this.updateData,
      header: true
    });
  };

  updateData(result) {
    var data = result.data;
    console.log(data);
  }

  render() {
    console.log(this.state.csvfile);
    return (
      <div className="App">
        <h2>Import CSV File!</h2>
        <input
          className="csv-input"
          type="file"
          ref={input => {
            this.filesInput = input;
          }}
          name="file"
          placeholder={null}
          onChange={this.handleChange}
        />
        <p />
        <button onClick={this.importCSV}> Upload now!</button>
      </div>
    );
  }
}

export default FileReader;
4
ttfreeman