javascript - HTML 文件输入 - 检测空文件夹

Question

我有一个 React 应用程序，它可以上传包含服务器可以使用的文件的目录。

我已经添加了对选定文件夹中嵌套文件的处理，以防某些文件在上传到服务器之前包含无效的扩展名。

但是，似乎我无法检测到何时选择了完全没有文件的目录。onInputand函数永远不会被onChange触发。有没有一种方法可以检测用户是否选择了一个根本不包含文件的目录，以便向用户显示警告？

这是我正在使用的 HTML 输入：

<input
    id="uploadFolderButton"
    type="file"
    onClick={e => e.target.value = null }
    onInput={e => console.log(e.target.files)}
    onChange={() => console.log('on change!')}
    multiple
    webkitdirectory=""  // allows upload of folders 
    directory=""        // allows upload of folders
/>

我还创建了一个简单的JSFiddle，您可以在其中对其进行测试。本质上，选择一个不包含任何文件的目录来上传，并且不会发生任何事情。如果您选择包含至少一个文件的目录，onInputandonChange函数将按预期触发。

我将非常感谢有关如何检测空文件夹的帮助。也许我可以利用另一个事件来触发它？提前致谢。

标签： javascripthtmlreactjsfile-upload