bunlong / react-papaparse Goto Github PK

Hi!

When I'm using CSVDownloader the exported CSV file contains 59 rows of data of the 330 rows I expect. It's not a huge amount of data, the dowloaded CSV file is 51kb. Do I have to use some kind of stream when downloading larger amounts of data? I've just updated to version 3.9 but that didn't fix it.

Best Regards,

Ludwig

Hi, Your repo is great.
But when I'm using this on different OS that I found a bug
This is hard code so it hard for me to change accept type
accept="text/csv"
Above Code work fine on MacOS

But on Window10 / Ubuntu it should be this
accept=".csv, application/vnd.ms-excel, text/csv"

Could you make a change let user can change it as props?

Hi !

I had a problem for displaying special characters with CVSReader due to csv files which were encoded as ISO-8859-1 instead of utf-8 (ex : Pyr�n�es-Atlantiques )

By adding :

<CSVReader
  config={
    encoding: "ISO-8859-1",
  }
>
 ...
</CSVReader>

in my code it's working, the browser can now read special characters without problems. But the new problem is when loading a file encoded in utf-8, the characters are not displayed properly (ex : Pyrénées-Atlantiques )

My problem is that I am working with clients who do not use the same encoding for their csv files. Some clients use "utf-8", others use "ISO-8859-1". And I can not know in advance what will be the encoding of the file used.

Here is my code :

let changeEncoding = false 
  
   const  handleOnFileLoad = (data) => {
  
    data.map(element => {
      if (element.data.find(element => element.includes("�"))) {
        changeEncoding = true
      } 
    })
    if (changeEncoding) {
      alert("Some characters of your file will not display properly. Please load again yout file.")
      dispatch(setEncodingForExport("ISO-8859-1"))
    } else {
      dispatch(setEncodingForExport("UTF-8"))
    }
    data = data.slice(1)
  
    const enrollFieldArray = {}
  
    enrollFieldArray["data"] = data.map((element => 
      element.data
    ))
  
    dispatch(getDataFromUploadedCsv(enrollFieldArray));
    displayTable();
  
  
  };
  <CSVReader
  onFileLoad={handleOnFileLoad}
  onError={handleOnError}
  ref={buttonRef}
  noClick
  noDrag
  config={encoding}
  >

I use redux and the "encoding" variable is in the state with this default value :

encoding: {encoding: "UTF-8"}

With this solution, the client must load the file a first time to update the state with the correct value of "encoding", and load the file a second time to display data with the correct encoding.

Is there a native CSVReader's method that allows you to detect the encoding of the loaded file before displaying the data ?

Thank you very much for your help

Dimitri

I added the package and followed the Demo to create a drag or click reader. The problem is when i used the component inside my functional component it gives "cant read onDrag of undefined" error. Does this package not support running on functional components?

Hi Bunlong,

This looks like the perfect solution for a project I am currently working on.
Is there any chance that you will create a React hook version of the CsvReader implementation soon?
Keep up the excellent work!

I have this stack trace while taking a snap of a custom file reader. The component is working well except in this snapshot. It throws this error:

console.error Error: Uncaught [TypeError: Cannot read property 'removeEventListener' of null]

Here is my stack

[email protected]
[email protected]
[email protected]

Steps To Reproduce

// component

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


interface CustomtReaderProps {
  onFileLoaded?: ((data: any, file?: any) => void) | undefined;
}

export const CustomtReader: React.FC<CustomtReaderProps> = (props: CustomtReaderProps) => {

  const { onFileLoaded } = props;
  return (
    <CSVReader
      onFileLoad={onFileLoaded}
      accept='text/csv, .csv'
    >
      <span>{label}</span>
    </CSVReader>
  );

};

// test

describe('OffreTransportReader', () => {


  it('should match snapshot', () => {

    /* FIXME: in the renderer:  Uncaught [TypeError: Cannot read property 'addEventListener' of null]
                                Stacktrace:    Error: Uncaught [TypeError: Cannot read property 'addEventListener' of null]
                                hint: possibly due to the renderer method of  @react-test-render
 */


    const handleFileUploaded = jest.fn().mockImplementation();

    const tree = renderer
      .create(     // <--------------- **_error : TypeError: Cannot read property 'removeEventListener' of null_**
        <CustomtReader
          onFileLoaded={handleFileUploaded}
          label='Chargez votre offre'
        />,
      )
      .toJSON();
    expect(tree).toMatchSnapshot();
  });
});

The current behavior

Error: Uncaught [TypeError: Cannot read property 'addEventListener' of null]

The expected behavior

Test passes

Hi! Love papa parse, it's super easy to use. However, I've been struggling to figure out how to style the border-color attribute of the div aroud the input field when you drag a file over the drag and drop (with the dashed lines). It seems to default to purple. I've tried changing style attributes for the CSVreader component, but I can't seem to find anything that relates to this styling. Am I missing something, or is that hardcoded?

Hi! I am using CSVReader Click and Drag upload. I want to have a functionality to cancel uploaded file. Meaning when I click an another button I want uploaded file to be removed from CSVReader. Is there such functionality? I couldn't find it

even with child as a function i can't disable to progress bar

When downloading the CSV file, Excel doesn't recognise the separator when european locations are set.

Would it be possible to add a single line with "sep=," to the csv file to solve this?

Can see a guide for the issue here: https://support.affinity.co/hc/en-us/articles/360044453711-How-to-open-CSV-files-with-the-correct-delimiter-separator

Best Regards,

Ludwig Hedlund

In the demo as well as locally, the following code does not output anything when uploading a file.

import React, { Component } from 'react'
import { CSVReader } from 'react-papaparse'

export default class CSVReader2 extends Component {
  handleOnDrop = (data) => {
    console.log('---------------------------')
    console.log(data)
    console.log('---------------------------')
  }

  handleOnError = (err, file, inputElem, reason) => {
    console.log(err)
  }

  handleOnRemoveFile = (data) => {
    console.log('---------------------------')
    console.log(data)
    console.log('---------------------------')
  }

  render() {
    return (
      <>
        <h5>Click and Drag Upload</h5>
        <CSVReader
          onDrop={this.handleOnDrop}
          onError={this.handleOnError}
          addRemoveButton
          onRemoveFile={this.handleOnRemoveFile}
        >
          <span>Drop CSV file here or click to upload.</span>
        </CSVReader>
      </>
    )
  }
}

Am I missing something? The string parsing demo works like a charm

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!

Hello, its a good package to used, very helpfull for me. appreciate it.

but can someone tell me, how to trigger complete and step config ?
because i tried to console.log , but it never show me anything.

nothing on docs are tells me how to do it, im working on local files (not stream)

Goals is, when user finaly success load the files to input, i want to show them the percentage of the progress then after its complete i want to upload it to the api service so Backend can proccess it

Hi, thanks for react-papaparse.

After discussing it at mholt/PapaParse#830, I wonder, if you would be willing to add an option for a BOM byte, so that Excel recognizes the CSV directly as UTF8. react-csv-downloader is doing it here, but I would like to move to react-papaparse because I also would need the upload functionality.

The API could be

<CSVDownloader
  data={data}
  filename={'filename'}
  type={'link'}
  bom={true}
>
  Download
</CSVDownloader>

Thanks a lot.

Also, can we optionally disable progressbar and fileSize?

have props that allow it to be error state (red border).
have props that allow it to be disabled.

I tried deleting the selected file, on click of a button. Like so,

if (buttonRef.current) {
  buttonRef.current.removeFile(e)
}

But the error this.buttonRef.current.removeFile is not a function came up. Upon further inspection, I saw that the removeFile function is not present in the ref. How to remove a file then?

provide a way to control the upload.
For example if I reset the form I want to clear the upload file programatically.

Hi,

I am trying to read data from s3 and due to CORS I have to add Origin header but it looks like it's not setting the header as expected in Chrome. I now it should be added by default by browser but I do not see any origin header in the network tab.

Chrome: does not work
Safari: Refused to set unsafe header "Origin"
Opera: works but gives error papaparse.js:699 Refused to get unsafe header "Content-Range"

readRemoteFile(
    'https://some-s3.url.com/sample.csv',
    {
        downloadRequestHeaders: {
            'Origin': 'http://example.com/'
        },
        step: (row) => {
            console.log('Row:', row.data)
        },
        complete: (results) => {
            console.log('Results:', results)
        }
    }
);

Thanks in advance.

I am using react-papaparse for uploading a csv file in the UI. I use CSVReader component . The page is breaking in IE if I use this component. Screenshot attached. Please assist with this.

<CSVReader onFileLoad={this.uploadFile} addRemoveButton={true} onRemoveFile={this.removeImportFile} noProgressBar={true} style={{ dropArea: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", padding: "8px 20px", borderWidth: "1px", borderRadius: "5px", borderColor: "#515151", borderStyle: "dashed", backgroundColor: "#fff", outline: "none", height: "auto", transition: "border .24s ease-in-out", cursor: "pointer", overflow: "hidden", }, dropFile: { width: "auto", maxWidth: "200px", fontSize: "12px", lineHeight: "16px", height: 50, borderRadius: "5px", overflow: "hidden", padding: "10px", }, fileNameInfo: { overflow: "hidden", textOverflow: "ellipsis", maxWidth: "150px", }, removeButton: { color: "#828282", }, }} > <span className="item-content"> <div className="item-title">Upload CSV file</div> <div className="item-sub-text"> Drag & drop your file or select your file by clicking here. </div> </span> </CSVReader>

Hi,

So I am trying to manipulate the look of the dropzone to fit our sites current theme but I can't manage to do it because the styles are being applied inline. It would be helpful to have a way to customize the dropzone

I recently updated my npm packages and react-paparse updated from version 2.0.2 to version 2.1.3.

The problem is the minor update is very non-compliant with the NPM versioning.

The props changed for the CSVReader component and was not backwards compatible (which it should be if only updating minor version).

Documentation is not consistent with code. Should be config instead of configOptions and onFileLoad instead of onFileLoaded.
Code in Read.me section Header row support
Instead of

<CSVReader
  onFileLoaded={this.handleReadCSV}
  inputRef={this.fileInput}
  style={{display: 'none'}}
  onError={this.handleOnError}
  configOptions={{header: true /* Header row support */ }}
/>

It should be

<CSVReader
  onFileLoad={this.handleReadCSV}
  inputRef={this.fileInput}
  style={{display: 'none'}}
  onError={this.handleOnError}
  config={{header: true /* Header row support */ }}
/>

Hi there,

I'm integrating this library within my React project but it breaks in Internet Explorer 11, I thought something was wrong with my implementation but found out that even if you open your demo page in Internet Explorer 11 it breaks too.

Digging a bit I found the issue comes from using class straight away in one of your dist files, you can check it out here and look for class re extends Q.

I think the best would to change the library babe config to transform class while building the npm module but, do you have any other way to fix it with your current versions?

Thanks a lot!

Hello,

I am having an encoding problem with the CSVReader feature. I am working with a client who use an old version of microsoft excel.
When he save a csv from excel, the generated csv file is apparently not encoded in utf-8 but in Latin1 (iso-8859-1)
Thus, when he uploads his file, the French special characters like "é", "î" ... are replaced by �

I saw that there was a way to change the encoding with "encoding (The encoding to use when opening local files. If specified, it must be a value supported by the FileReader API.) on this page : https://react-papaparse.js.org/docs
I have just to add encoding = iso-8859-1 ? But I did not understand in which part of the code should I add it

Here is the code if my app :

onFileLoad={handleOnFileLoad}
onError={handleOnError}
ref={buttonRef}
noClick
noDrag

>
{({ file }) => (
  <aside
    style={{
      display: 'flex',
      flexDirection: 'row',
      marginBottom: 10,
      alignItems: "baseline"
    }}
  >
    <Button
    className={classes.button}
    onClick={handleOpenDialog}
    variant="contained"
    color="primary"
    component="span">
      {trad.browse_file}
    </Button>
    <Typography>{file && file.name}</Typography>

  </aside>
)}
</CSVReader>

And thanks you very much for this package !

I can't get this to work.

Any hints?

` const configOptions = {header: true, dynamicTyping: true};

    readRemoteFile(
        default, configOptions,
        {
            complete: function (results) {
                console.log(results);
                console.log(results.data[0]);
                console.log(results.data[1]);
            }
        }
    )`

Gets me back data with the header in ...

I'm creating a CSVDownload and notice if any of my data has a # at the start of the string, it crashes (well, the file output stops at the # character).

See here - File terminates where it should have written out '#123456'

If I remove the # from the string in my data generation, the file generates fully.

NOTE: Using v3.12.0

Is there a way to customize the styles of the components?
Especially on the drag and drop, i want to customize the box that shows up with the filename, progress bar, etc

My specific use case is after a successful parse, I want to show an upload form, with a preview of the parsed data. So far so good, but if the upload succeeds, or if the user elects to cancel the form, I want to return to the state things were in before a file was dropped.

I have found your component to be very easy to use so far. Thanks.

Proposal: Customizable progress bar

Reasoning: At the moment it feels clunky to only be able to pass boolean to noProgressBar and being able to pass progressBarColor as the only means of customization since you can't even detect at the moment when the data was actually passed to onFileLoad or onDrop

• Option 1: Access progress value directly from child render function

  The same way you can currently access the file inside the child render function

  Before ⏳

  <CSVReader>
    {({ file }) => (
       // render
    )}
  </CSVReader>

  After ⌛

  <CSVReader>
    {({ file, progress }) => (
       // render
    )}
  </CSVReader>

• Option 2: Allow users to pass custom progress bar render callback function

  This way the users will have greater control as to how the progress bar is displayed

  After ⌛

  // CSVReader.tsx
  
  type Props = {
    // optional, defaults to existing one
    renderProgressBar?: (...args: any[]) => (progress: number) => JSX.Element
  }
  
  // later in render method
  render () {
  
     const { renderProgressBar } = this.props
     const { progressBar } = this.state 
  
     return (
        // other stuff
       { progressBar 
          ? renderProgressBar(progressBar)
          : <ProgressBar />
       }
     )
  }

This way the users could customize the progress bar without introducing breaking changes to the existing implementation while making it more flexible.

react-papaparse v3.8.0

Draft 1

const jsonData = [
  ["firstname", "lastname", "email"],
  ["Ahmed", "Tomi", "[email protected]"],
  ["Raed", "Labes", "[email protected]"],
  ["Yezzi", "Min l3b", "[email protected]"]
]

<CSVDownloader data={jsonData} target="_blank">Download</CSVDownloader>

Draft 2

const str = `Column 1,Column 2,Column 3,Column 4
1-1,1-2,1-3,1-4
2-1,2-2,2-3,2-4
3-1,3-2,3-3,3-4
4,5,6,7`

<CSVDownloader data={str} target="_blank">Download</CSVDownloader>

For example, table names with s.table, s.process are returned with undefined issues as s is being treated as an object and not as a string. Also error is on emitted in onError. So component crashes.

https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/907679/evhs-installer-authorisations-log.csv

This is the results of the first column from the first 3 (or 4) rows:

Company Name
(UK) IDES Ltd
100% Electrical
,Totland Bay ,PO39 0EZ,,,,"South East England, South West England

Can you add the ability to customise the dropArea using the style prop?

Hello, thank you for this nice helper lib on top of papa parse, really practical. How can I change the color of the remove button?

I want to change the red color and disable the hover effect. I know it is SVG and that the color is set with fill attribute of path, but don't really know how to change it. Any help would be really appreciated! Thanks 🙏🏻

Is it posible to change
dropFileRemoveButton: { height: 23, position: 'absolute', right: 6, top: 6, width: 23, }
in CSVReader (Drag to Upload) Style. It is not included in the wiki and I was wondering if I could modify the dropFileRemoveButton.
Kind Regards
Lluis

PR: #47

When I try to upload a csv file seperated by commas in a single row, the browser becomes unresponsive. But the same file with multiline approach is getting uploaded.
For eg:
This file makes the browser unresponsive
1234566789, 9877665443, 0987654321
whereas the multiline approach works

1234567899
9876543211
0987654311

I have used 1 million record

Hi -

Just started toying around with react-papaparse, and was trying to pass in the preview options into the config for papa parse like below:

<CSVReader
              onDrop={this.handleOnDrop}
              onError={this.handleOnError}
              addRemoveButton
              onRemoveFile={this.handleOnRemoveFile}
              config={{
                header: this.state.hasHeaderRow,
                dynamicTyping: true,
                preview: 1000
              }}
              style={{minHeight: "200px"}}
            >

Unfortunately when preview is passed my handleOnDrop function is never called. When I remove that option everything works as expected. Am I missing something with this particular functionality?

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!

Feature

Create useHook component in the future.

I get following error when I import

Could not find a declaration file for module 'react-papaparse'. '/home/apoorvmote/import-export/node_modules/react-papaparse/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/react-papaparse` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-papaparse';`ts(7016)

when running npm run build I get the following error:

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

./node_modules/react-papaparse/dist/react-papaparse.es.js:13:28612 

My setup is using create-react-app and node v8 and node v13 was tried