onFileLoaded doesnt return data for second time about react-csv-reader HOT 9 OPEN

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.

from react-csv-reader.

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.

from react-csv-reader.

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.

from react-csv-reader.

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

from react-csv-reader.

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

from react-csv-reader.

I have the same issue

from react-csv-reader.

Has there been any resolution to this issue?

from react-csv-reader.

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}
  />

from react-csv-reader.

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.

from react-csv-reader.