Reputation: 570
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
Reputation: 7682
you can do this:
<input type="file" name="fileUpload" title=" " onChange={(e)=> {this.readFile(e) e.target.value=null }}/>
Upvotes: 7