File Picker Dialog

ProNew

A dialog with a folder tree where only files can be chosen; double click or Enter on a file confirms. Use this when people must pick one existing file, such as an attachment or an import source.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

children

Guide and examples

When to use it

Use it for attachments, import sources, a file to open, or a template to start from. It returns one file and its path.

Do not use it to choose a folder (see move-to-folder-dialog), to choose several files (use checkbox-tree), or for uploading from the computer (use a file input).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`nodes`	`TreeNode[]`	-	Folders have children; the rest are files.
`onPick`	`(file, path) => void`	-	The chosen file and the folder names down to it.
`accept`	`(file) => boolean`	-	Files that fail are shown disabled.
`children`	`ReactNode`	-	The trigger.

Accessibility

The dialog is a modal with a title and description; focus moves into it and returns to the trigger.
The tree uses the tree keyboard model. Folders open and close on Enter; Enter on a file chooses it.
The selected path is in a polite live region, so it is read when the selection changes.
Files that are not accepted are aria-disabled, still focusable and announced.

Testing

The pattern ships with a Testing Library test (file-picker-dialog.test.tsx) that covers opening, the disabled Choose button, choosing by button and by Enter, and refused files.

Guide and examples

When to use it

Use it for attachments, import sources, a file to open, or a template to start from. It returns one file and its path.

Do not use it to choose a folder (see move-to-folder-dialog), to choose several files (use checkbox-tree), or for uploading from the computer (use a file input).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`nodes`	`TreeNode[]`	-	Folders have children; the rest are files.
`onPick`	`(file, path) => void`	-	The chosen file and the folder names down to it.
`accept`	`(file) => boolean`	-	Files that fail are shown disabled.
`children`	`ReactNode`	-	The trigger.

Accessibility

The dialog is a modal with a title and description; focus moves into it and returns to the trigger.
The tree uses the tree keyboard model. Folders open and close on Enter; Enter on a file chooses it.
The selected path is in a polite live region, so it is read when the selection changes.
Files that are not accepted are aria-disabled, still focusable and announced.

Testing

The pattern ships with a Testing Library test (file-picker-dialog.test.tsx) that covers opening, the disabled Choose button, choosing by button and by Enter, and refused files.