Upload Files Before Submitting the Form

ProNew

Files upload as soon as they are chosen, the form's Submit stays disabled while any upload runs or has failed with a message saying why, and the submit sends only the ids of finished uploads. Use this when large files make a single submit slow and fragile.

Customize

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

Guide and examples

When to use it

A form includes large files and you want to upload them while the person fills in the rest.

Do not use it when: With small files, a normal multipart submit is simpler.

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	Description
`upload`	`Uploader<string>`	Upload one file; resolve with its id.
`onSubmit`	`({ title, fileIds }) => void \| Promise<void>`	Receives only finished uploads.

Accessibility

A disabled Submit explains itself: a status line linked with aria-describedby says what it is waiting for (uploads, a failed upload, a missing title).
The file input is a native control with a label; the chosen files are a labelled list with a status in words and buttons named after each file.
Retry and Remove make a failed upload recoverable without starting over.

Testing

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

Guide and examples

When to use it

A form includes large files and you want to upload them while the person fills in the rest.

Do not use it when: With small files, a normal multipart submit is simpler.

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	Description
`upload`	`Uploader<string>`	Upload one file; resolve with its id.
`onSubmit`	`({ title, fileIds }) => void \| Promise<void>`	Receives only finished uploads.

Accessibility

A disabled Submit explains itself: a status line linked with aria-describedby says what it is waiting for (uploads, a failed upload, a missing title).
The file input is a native control with a label; the chosen files are a labelled list with a status in words and buttons named after each file.
Retry and Remove make a failed upload recoverable without starting over.

Testing

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