React file input only works once

Question

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 :)

Red Baron · Accepted Answer · 2020-06-16 12:56:45Z

7

you can do this:

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

answered Jun 16, 2020 at 12:56

Red Baron

7,75312 gold badges48 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Christian Buchwald Over a year ago

null was not allowed as it expected a string, but e.target.value='' worked. Thank you very much :)

Przemysław Konieczniak Over a year ago

@RedBaron I meet this construction for the first time. It would be nice if you can explain how it works :)

Collectives™ on Stack Overflow

React file input only works once

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related