How to delete/clean a loaded data after an event

Admin 1
Viewed 198

I want load a CSV file and send it to backend. To do that I used react-csv-reader. I basically load a file, and after that I push another button and send the data to backend. My problem is that after sending it to backend the file still remains as selected/uploaded. How can I remove or clean that?

My code:

<CSVReader
  cssClass="myCSS"
  label="Choose a CSV"
  inputId="myCSV"
  inputName="myCSV"
  inputStyle={{ color: 'red' }}
  onFileLoaded={data => handleUploading(data)}
/>
//...
const handleUploading = data => {
  setSelectedFile(data);
};

As I said, I have my file content into data and I send that to backend but the file still remains as "loaded". Is there any way to clean that?

react-native reactjs frontend node.js javascript
2 Answers

Solved it with an document.getElementById('myCSV').value = ' after sending it to backend. It works fine

Admin1

You can wrap this element by a form then you could reset it, like this:

export default function App() {
  const ref = useRef();
  return (
    <div className="App">
      <form ref={ref}>
        <CSVReader
          cssClass="btn btn-default btn-sm m-t-10 waves-effect"
          label="Seleziona un file CSV"
          inputId="leadsFile"
          inputName="leadsFile"
          inputStyle={{ color: "red" }}
          onFileLoaded={(data) => {
            console.log(data);
            ref.current.reset();
          }}
        />
      <button type="button" onClick={() => ref.current.reset()}>Submit</button>
      </form>
    </div>
  );
}

I know that isn't the right place, but it's just a example for you

user_156113560
Related