Я хочу удалить выбранный файл для загрузки, если я снова открою селектор файлов и нажму «Отмена». На данный момент это нормально работает в Chrome, но не в Firefox.
<input
type='file'
id='uploadDocument'
accept = {ACCEPT_TYPES}
onChange = {(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.currentTarget.files){
props.documentChanged(e.currentTarget.files[0])
}else{
props.fileSelectCanceled();
console.error('file selection cancelled');
}
}
}
/>
В идеале, когда e.currentTarget пуст, props.fileSelectCanceled(); очистит текущий файл от состояния.
Я просмотрел здесь несколько похожих ответов, но не могу применить ни одного решения.





Если очищать состояние для каждого onClick, файл будет назначен для состояния только в том случае, если он выбран. Следующий код сработал:
<input
type='file'
id='uploadDocument'
accept = {ACCEPT_TYPES}
onChange = {(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.currentTarget.files){
props.documentChanged(e.currentTarget.files[0]);
}
}
}
onClick = {() => props.fileSelectCanceled()}
/>
Вы можете установить выбранный файл в состояние, когда файл выбран. Когда пользователь нажимает на селектор файлов, вы можете установить для выбранного файла значение null с помощью
onClick = {e => e.target.value = null}. Обработчик изменений будет похож наonChange = {e => this.setState({ selectedFile: e.target.files[0] })}. Поэтому, когда файл выбран, обработчик onChange будет выполнен, и выбранный файл будет сохранен в состоянии.