Блог

У меня есть приложение React, которое включает в себя возможность загружать каталоги, содержащие файлы, которые затем может использовать сервер.

Я добавил обработку вложенных файлов в выбранных папках на случай, если некоторые из них содержат недопустимое расширение перед загрузкой на сервер.

Однако, похоже, я не могу определить, когда выбран каталог, в котором полностью отсутствуют файлы. Функции onInput и 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, где вы можете его протестировать. По сути, выберите каталог для загрузки, который не содержит никаких файлов, и ничего не произойдет. Если вы выберете каталог, содержащий хотя бы один файл, функции onInput и onChange будут запущены, как и ожидалось.

Я был бы очень признателен за некоторую помощь в том, как обнаружить пустую папку. Возможно, есть еще одно событие, к которому я могу подключиться, которое действительно срабатывает? Заранее спасибо.