Question

如果我重新打开文件选择器并单击“取消”，我想删除所选的文件进行上传。目前，此功能在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();将从状态中清除当前文件。我在这里查看了几个类似的答案，但是没有可以应用的任何解决方案。

Answer 1

通过清除每个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()}
            />

监听取消事件以在Firefox中上传文件

1 个答案: