CODEWITHSUNDEEP
reactjstypescriptinput
Christian Buchwald
Christian Buchwald

Reputation: 570

React file input only works once

I have a function component with an input for file uploading. This component works fine if I add e.g. a .csv file called 1.csv. It works as well for additional files that I load afterwards like 2.csv or 3.csv and if I change the order (e.g. first 3.csv, then 1.cav, then 2.csv) everything is fine. If I upload 1.csv and then upload 1.csv again with no other uploads in between then the onChange event isn't triggered. Any ideas what's preventing the onChange event if the file is identical to the previous one?

My component:

interface UploadInputProps {
  accept?: string;
  label?: string;
  onChange?: (value: any) => void;
}

const UploadInput: React.FC<UploadInputProps> = ({ accept, label, onChange }) => {
return (
<Container style="align-items: center">
  <div className="upload-btn-wrapper">
    <label className="uploadBtn">
      <i className="fal fa-file-import uploadIcon" />
      <input type="file" name="fileUpload" title=" " accept={accept} onChange={onChange} />
      {label}
    </label>
  </div>
</Container>
);
};

I guess it's because a file input is always a uncontrolled component in react. Any ideas how to trigger it even if it's the same file x times in a row?

Thanks in advance :)

Upvotes: 6

Views: 2776

Answers (1)

Red Baron
Red Baron

Reputation: 7682

you can do this:

<input type="file" name="fileUpload" title=" " onChange={(e)=> {this.readFile(e) e.target.value=null }}/>

Upvotes: 7

Related Questions