onFileLoaded doesnt return data for second time

[hungdev]

Describe the bug and Reproduce If the file loads the first time, the file has a duplicate header, it calls the onFileLoaded function, but the second load is the same file, it will not call the onFileLoaded function anymore.

Expected behavior 2nd time it still has to run into function onFileLoaded

Screenshots If applicable, add screenshots to help explain your problem.

Platform (please complete the following information):

• Browser Chrome
• Version "react-csv-reader": "^3.0.6"

CSV file: https://drive.google.com/file/d/1QfDRRAzsHZ6P4IiXNq-pUNba2KkOQd3u/view?usp=sharing

My code:

const papaParseOptions = {
  header: true,
  dynamicTyping: true,
  skipEmptyLines: true,
  transformHeader(header) {
    return header
  }
};
        <CSVReader
              onFileLoaded={handleForce}
              parserOptions={papaParseOptions}
            />


  const handleForce = (data, fileInfo) => {
    console.log('data', data)
  };

[hungdev]

I found a way to fix it, use if else to check in onFileLoaded func, and clearing data:

(document.getElementById('CSVReader') as HTMLInputElement).value = '';

and attach id to component: inputId='CSVReader' like this:

<CSVReader
              inputId='CSVReader'
              inputStyle={{ display: 'none' }}
              onFileLoaded={handleForce}
              parserOptions={papaParseOptions}
            />

But I think its bad way. I hope we can use better solution. Because i think we shouldnt use pure js ( document.getElementById ) in ReactJs.

[niladri407]

Same issue is with me. It's working properly in firefox but in chrome and edge It's not reading the file from second time.

[RWTloopesko]

I'm having the same issue in Chrome. hungdev's solution works well but it seems like there should be a more "Reactish" way to do this. There should be a method to clear the input after it loads.

[csmartinsfct]

To fix it you can also use a new key in the component every time you load a new file.

[nzambello]

I see that it's happening on Chrome and Safari and not on Firefox. I'm looking at the difference

[danielperaza]

I have the same issue

[cvanputt]

Has there been any resolution to this issue?

[adebayoileri]

I'm having the same issue in Chrome. hungdev's solution works well but it seems like there should be a more "Reactish" way to do this. There should be a method to clear the input after it loads.

Seems the issue still persists, a "react" way could be the useRef

import { useRef } from 'react';

const csvRef = useRef();

<CSVReader
      inputId='CSVReader'
      inputStyle={{ display: 'none' }}
      onFileLoaded={(data) => {
         handleForce(data);
         csvRef.current.value = '';
      }}
      parserOptions={papaParseOptions}
      inputRef={csvRef}
  />

[GisliBG]

If you are looking for a work around, what @csmartinsfct works. Add a key prop to the component and make sure to create a new key after each time onFileLoaded executes.