Folder Dropzone

ProNew

Drop a whole folder or pick one: it walks the directory tree, keeps each file's relative path, skips junk such as .DS_Store and node_modules, enforces a file limit and summarises what was found.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/folder-dropzone

Usage

Send path to your server (for example as a form field next to the file) to rebuild the folder structure there.

Exports

Export	Description
`FolderDropzone`	The drop target, the Choose folder button and the summary.
`readEntries(entries, options)`	Walk `webkitGetAsEntry()` entries from a drop.
`fromInputFiles(files, options)`	Convert the files of an `<input webkitdirectory>`.

Props

Prop	Type	Description
`onFolder`	`(result: FolderResult) => void`	`{ files: { file, path }[], truncated, skipped }`.
`ignore`	`string[]`	Names to skip at any depth. Default `.DS_Store`, `Thumbs.db`, `node_modules`, `.git`.
`maxFiles`	`number`	Stop reading after this many.

Accessibility

Drag and drop is never the only way: "Choose folder" is a real button that opens the directory picker, and works with the keyboard.
The result summary is a polite live region ("120 files, 4.2 MB"), including a warning when maxFiles cut the walk short and the count of skipped files.
The drag state is shown by text ("Drop the folder") and a border change, not colour alone.
The hidden directory input is removed from the tab order and the accessibility tree.

Testing

The component ships with a Testing Library test (folder-dropzone.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/folder-dropzone

Usage

Send path to your server (for example as a form field next to the file) to rebuild the folder structure there.

Exports

Export	Description
`FolderDropzone`	The drop target, the Choose folder button and the summary.
`readEntries(entries, options)`	Walk `webkitGetAsEntry()` entries from a drop.
`fromInputFiles(files, options)`	Convert the files of an `<input webkitdirectory>`.

Props

Prop	Type	Description
`onFolder`	`(result: FolderResult) => void`	`{ files: { file, path }[], truncated, skipped }`.
`ignore`	`string[]`	Names to skip at any depth. Default `.DS_Store`, `Thumbs.db`, `node_modules`, `.git`.
`maxFiles`	`number`	Stop reading after this many.

Accessibility

Drag and drop is never the only way: "Choose folder" is a real button that opens the directory picker, and works with the keyboard.
The result summary is a polite live region ("120 files, 4.2 MB"), including a warning when maxFiles cut the walk short and the count of skipped files.
The drag state is shown by text ("Drop the folder") and a border change, not colour alone.
The hidden directory input is removed from the tab order and the accessibility tree.

Testing

The component ships with a Testing Library test (folder-dropzone.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.