Folder Upload with a Confirmation Step

ProNew

Drop a folder, review what was found (counts, total size, skipped files, the largest items) and a tree-like list of the first entries, then press Start upload; a limit is enforced with a clear message. Use this when a folder can contain far more than people expect.

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.

maxFiles1000

maxTotal1

Guide and examples

When to use it

People upload whole directories (a website, a dataset, a photo shoot) and should see what is about to be sent.

Do not use it when: Individual files do not need a confirmation step.

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
`maxFiles`	`number`	`1000`	Files read from the folder.
`maxTotal`	`number`	500 MB	Total bytes allowed.
`onStart`	`(result: FolderResult) => void \| Promise<void>`	-	Called on Start upload with `{ files: { file, path }[], skipped, truncated }`.

Accessibility

The review is a labelled region with a description list of counts, the largest files and any problem as an alert; nothing uploads until the person presses Start upload.
Drag and drop is backed by the Choose folder button of Folder Dropzone, and "Choose a different folder" resets the step.
Limits are explained in words with the numbers; the start button is disabled when the total is too large.

Testing

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

Guide and examples

When to use it

People upload whole directories (a website, a dataset, a photo shoot) and should see what is about to be sent.

Do not use it when: Individual files do not need a confirmation step.

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
`maxFiles`	`number`	`1000`	Files read from the folder.
`maxTotal`	`number`	500 MB	Total bytes allowed.
`onStart`	`(result: FolderResult) => void \| Promise<void>`	-	Called on Start upload with `{ files: { file, path }[], skipped, truncated }`.

Accessibility

The review is a labelled region with a description list of counts, the largest files and any problem as an alert; nothing uploads until the person presses Start upload.
Drag and drop is backed by the Choose folder button of Folder Dropzone, and "Choose a different folder" resets the step.
Limits are explained in words with the numbers; the start button is disabled when the total is too large.

Testing

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