Selecting a directory

Passing the non-standard webkitdirectory attribute through getInputProps makes clicking the dropzone open a folder picker instead of a file picker. The browser recursively lists the folder's files, each with its relative path exposed on file.path (via file-selector).

function Directory() {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();
  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));
  return (
    <section className="container">
      <div {...getRootProps({className: "dropzone"})}>
        <input {...getInputProps({webkitdirectory: "true"})} />
        <p>Drag 'n' drop a folder here, or click to select a folder</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}

Directory selection works only through the native <input>, so it requires useFsAccessApi to be false (the default) - the File System Access API cannot select directories. Note that webkitdirectory, while widely supported, is non-standard.

TypeScript

React's built-in types don't declare webkitdirectory, so TypeScript rejects it on <input>. Since it's a global attribute, declare it once in your own project (e.g. a react-app-env.d.ts) rather than reaching for a cast:

import "react";
 
declare module "react" {
  interface InputHTMLAttributes<T> {
    webkitdirectory?: string;
  }
}

react-dropzone deliberately doesn't ship this augmentation itself - a library-level declare module "react" would apply to your whole app and could clash with another declaration of the same attribute.