Cannot stream or chunk with CSVReader

[naathanbrown]

Hi,

I am trying to chunk a CSV file on upload with CSVReader using the callback as said in documentation. My current attempt looks like

                onDrop={handleOnDrop}
                onError={handleOnError}
                config={{header:true, worker: true, skipEmptyLines: true,
                    step: (results:any, parser:any) => {
                        console.log("hello")
                        console.log("Row data:", results.data)
                        console.log("Row errors:", results.errors)
                    },
                    complete: () => console.log("Done!")
                }}
                addRemoveButton
                onRemoveFile={handleOnRemoveFile}
            >
                <span>Drop CSV file here or click to upload.</span>
            </CSVReader>

Currently the data is never displayed to the console in any way and I cannot understand why?

Any help would be greatly appreciated, thank you!

[Bunlong]

@naathanbrown Please check the Demo and Source code. Thanks!

[naathanbrown]

@Bunlong Hi thanks for that, I've read all that and I'm still having issues, I realised my whole code snippet did not paste, sorry for this.

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

const Csv = () => {
    const handleOnDrop = (data: any) => {

        console.log("---------------------------");

        console.log(data);
    };
    const handleOnError = (err: any) => {
        console.log(err);
    };

    const handleOnRemoveFile = (data: any) => {
        console.log("---------------------------");
        console.log(data);
        console.log("---------------------------");
    };

    return (
        <>
            <h5>Click and Drag Upload</h5>
            <CSVReader
                onDrop={handleOnDrop}
                onError={handleOnError}
                config={{header:true, worker: true, skipEmptyLines: true,
                    step: (results:any, parser:any) => {
                        console.log("hello")
                        console.log("Row data:", results.data)
                        console.log("Row errors:", results.errors)
                    },
                    complete: () => console.log("Done!")
                }}
                addRemoveButton
                onRemoveFile={handleOnRemoveFile}
            >
                <span>Drop CSV file here or click to upload.</span>
            </CSVReader>
        </>
    );
};

export default Csv;

I may be missing something silly and I haven't noticed but any advice will help a lot, thank you!

To clarify none of the console.logs run within the step callback function, so I am unsure how I can access the data being stepped?

[Tinkvision]

Same issue for me ;)

[MaxAst]

same issue here. It looks like the step callback is getting deleted from the config object https://github.com/Bunlong/react-papaparse/blob/master/src/CSVReader.tsx#L280-L288, so that any callback passed as part of the config prop never runs. Or am I missing something?

[MaxAst]

this could fix it: https://github.com/Bunlong/react-papaparse/pull/65

[kurroo10]

can someone help me ? i try to proccess the data after file is completely loaded, but its never working for me.

trying this :

config={{
     complete: () => console.log("Done!")
}}

but sadly, its never triggered, even step is not trigger also. can someone help me ? because if i used onFileLoaded and set states, it will crash / freeze my browser instead of continue load the files.