Events for

Question

I need to write a file input that accepts CSV file, validates it and if there is error in file will not be uploaded. Here's code of React Component:

<CustomInput
 type="file"
 id="fileBrowser"
 name="file"
 label={filename || 'Choose CSV'}
 onChange={this.loadFile}
 accept="text/csv"
 invalid={!file.isValid}
/>

So I have problem: onChange event handles only when input file is changed. Imagine that I input invalid CSV file, get error, find it in this file, correct and try load this file again but onChange event doesn't handle because input thinks I have the same file because of its name. The only resolution I've found is to load another file and again old file or change name of old file.

If there's another solution?

When you detect the input File is invalid, clear your `` (vanilla would be `input.value = null;`). — Kaiido, Aug 21 '18 at 08:39

score 1 · Accepted Answer · answered Aug 21 '18 at 08:45

Set the value of the Input to null when you find the file to be invalid.

function foo() {
  var fileInput = document.querySelector(`input[name="myFile"]`);
  // your logic tho file that the file was invalid
  // if invalid
  fileInput.value = null;
  console.log("onchange called");
  
}

<input type="file" name="myFile" onchange="foo()">

Events for

1 Answers1