1

I can use react-papaparse to parse a local file triggering onFileLoad={this.handleOnFileLoad} ok, but I'd like to stream it, so I tried the code below, trying to pass onStep or step in props but its not triggering. The documentation implies it's possible but am I going about this the wrong way? I want to process each row at a time in case its a really big file. Thanks.

import React from 'react';
import { CSVReader } from 'react-papaparse';

const buttonRef = React.createRef();

export default class CSVReader1 extends React.Component {
  handleOpenDialog = (e) => {
    // Note that the ref is set async, so it might be null at some point
    if (buttonRef.current) {
      buttonRef.current.open(e);
    }
  };
  handleOnStep = (row) => {
    console.log('handleOnComplete---------------------------');
    console.log(row);
    console.log('---------------------------');
  };
  handleOnError = (err, file, inputElem, reason) => {
    console.log('handleOnError---------------------------');
    console.log(err);
    console.log('---------------------------');
  };
  handleOnRemoveFile = (data) => {
    console.log('handleOnRemoveFile---------------------------');
    console.log(data);
    console.log('---------------------------');
  };
  handleRemoveFile = (e) => {
    // Note that the ref is set async, so it might be null at some point
    if (buttonRef.current) {
      buttonRef.current.removeFile(e);
    }
  };
  render() {
    return (
      <CSVReader
        ref={buttonRef}
        onError={this.handleOnError}
        onStep={this.handleOnStep}
        noClick
        noDrag
        onRemoveFile={this.handleOnRemoveFile}
      >
        {({ file }) => (
          <div className="form">
            <div>
              <button className="button" type="button" onClick={this.handleOpenDialog} >Browse file</button>
            </div>
            <div className="text-input">
              {file && file.name}
            </div>
            <div>
              <button className="button button--secondary" onClick={this.handleRemoveFile}>Remove</button>
            </div>
          </div>

        )}
      </CSVReader>

    );
  };
}
Iain Macaulay
  • 11
  • 1

1 Answers1

0

If you have either a step or complete handler defined, then the onFileLoad doesn't get called.

Source Line

config?.complete || config?.step
          ? config.complete
          : () => {
              if (!onDrop && onFileLoad) {
                onFileLoad(data, file);
              } else if (onDrop && !onFileLoad) {
                onDrop(data, file);
              }
            }
James Hanauersteig
  • 1