Как сделать Select Directory с помощью React?

Question

Мне нужно загрузить все файлы из папки на сервер. Я пытаюсь реализовать окно выбора каталога, а не выбрать файл.

Нормальный способ, как:

<input type"file" webkitdirectory directory/>

У меня не сработало, и показало окно выбора файла.

Но когда я создал пустой обычный HTML-файл с этим тегом ввода, он работал нормально. Кто-нибудь знает, как реализовать решение с помощью React?

Спасибо!

Answer 1

Попробуй бхептиньх.

<input directory="" webkitdirectory="" type="file" />

Answer 2

В React 17 с Typescript, если вы используете useRef Hook, лучше всего расширить React HTMLAttributes (в том же файле ваших входных данных), а затем просто добавить атрибуты directory и webkitdirectory во входной тег как

import * as React from "react";

export const ImportForm: React.FunctionComponent<FormProps> = (props) => {
const folderInput= React.useRef(null);

return (
<>
           <div className="form-group row">
              <div className="col-lg-6">
                <label>Select Folder</label>
              </div>
              <div className="col-lg-6">
                <input
                  type="file"  
                  directory=""
                  webkitdirectory=""                
                  className="form-control"
                  ref={folderInput}
                />
              </div>
            </div>
</>)
};

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's HTMLAttributes
    directory?: string;        // remember to make these attributes optional....
    webkitdirectory?: string;
  }
}