CSVStreamer.js

import { CSVReader } from "react-papaparse";

/**
  Render the <CSVStreamer /> component defined below instead of the dropzone component.
*/

export default class CSVStreamer extends React.Component {
  render() {
    return (
      <CSVReader
        config={{
          /**
            Defining a step function puts the component in stream mode which means
            the contents of the file will not be read into memory in one big gulp but
            will be streamed to the step function 1 row at a time. 

            You can comment in the console.logs to actually see the data for each row.
            Note that doing this will slow down how quickly the stream actually happens
            as the process of printing to the console is expensive computationally.
            Running the component with just the console.log in the `complete` function will
            show you how quickly the code steps through each row and 'Parsing completed' is
            printed to the console.
            
            For each row, we could simply process row with the checks and only have some sort of logging/
            output when an error is encountered.
            
            NOTE: There is also a way to process the file by chunk instead of row. See docs:
            https://react-papaparse.js.org/docs. Instead of the `step` function we would need to
            define the `chunk` function which has the same interface as `step`.
          */
          step: (results, parser) => {
            // console.log("Row data:", results.data);
            // console.log("Row errors:", results.errors);
          },
          complete: (results, file) => {
            console.log("Parsing complete:", results, file);
          },
        }}
        addRemoveButton
        removeButtonColor="#659cef"
        onRemoveFile={this.handleOnRemoveFile}
      >
        <span>Drop CSV file here or click to upload.</span>
      </CSVReader>
    );
  }
}