How to make Select Directory using React?

Question

I need to upload all files from a folder to server. I'm trying to implement Select Directory window, and not Select file.

The normal way like:

<input type="file" webkitdirectory directory/>

Did not work for me, and showed Select File window.

But when I created empty regular html file with this input tag, it was working fine. Does anybody know how to implement the solution using React?

Thank you!

Answer 1

try bheptinh.

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

Answer 2

In React 17 with Typescript, if you are using useRef Hook, the best bet is to extend React's HTMLAttributes (in the same file of your input) and then simply add directory and webkitdirectory attributes in input tag as

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;
  }
}