react-papaparse icon indicating copy to clipboard operation
react-papaparse copied to clipboard

Post raw csv to external API *before* parsing

Open efaves opened this issue 4 years ago • 5 comments

Hi there! We are just getting started with react-papaparse and are liking it so far! The one question we have at the moment is whether it is possible to use the Drop Area for csv import, but to post the raw csv file to an external API before continuing with csv parsing.

So, suppose I have a csv on my local machine and want to save the original to a file store (e.g. S3) via an API before continuing to parse. Does this functionality already exist?

Thanks!

efaves avatar Jan 30 '21 16:01 efaves

@efaves This functionality not yet exist. It will be in next version. Thanks!

Bunlong avatar Apr 20 '21 17:04 Bunlong

Hi!

I would need such a feature as well. We have a CSV-file that wraps each string into 2 double quotes and thus the delimiter is not detectable. So I would need to remove all quotes from each (or the whole file) line before parsing. Is there any way to accomplish that?

Thanks!

elias-thok avatar Apr 21 '21 09:04 elias-thok

@elias-thok , I'm thinking of something more generic like a callback you would use per your needs. I call it it beforeParse. It would work like so:

  <CSVReader
        onDrop={this.handleOnDrop}
        onError={this.handleOnError}
        beforeParse={this.handleBeforeParse}
      >

While you would use the handler for your s3 upload:

function handleBeforeParse(rawdata: any){
// your logic
}

If so, @Bunlong, the beforeParse can be called right here, before Papaparse parses the data.

reader.onload = (e: any) => {
       beforeParse(e.target.result);
      PapaParse.parse(e.target.result, options);
    };

What are your thoughts on this?

exaucae avatar Oct 14 '21 20:10 exaucae

in the 3.18.1 version.

the CSVReader component,

have the onFileLoad property that is a callback that takes two results, the parse results, and the file File type, the last one can be read and get the raw input.

 <CSVReader
                  onFileLoad={onFileLoad}
const parseRawCsv = (rawCsv: string) => {

   // to parse with the header to get a key value object. 
    readString(rawCsv, {
      worker: true,
      header: true,
      complete: (results) => {


      },
    });
  };

  const onFileLoad = (data: any, file: File) => {
    let reader = new FileReader();
    reader.readAsText(file);

    reader.onload = function () {

      // here we have the raw results 

      parseRawCsv(reader.result as string);
    };
  };

romelgomez avatar Jan 25 '23 22:01 romelgomez

You could use the file argument in the onUploadAccepted function https://github.com/Bunlong/react-papaparse/blob/118a9ec03cb27eb2fed4674c1ebc1565b590240d/src/useCSVReader.tsx#L45

e.g.

 onUploadAccepted={(results: any, file: any) => {
        console.log("Results", results);
        console.log("File", file);
}}

charliemday avatar Nov 22 '23 16:11 charliemday