Direct Upload to a Signed URL

ProNew

Upload straight to storage (S3, R2, GCS) with a short-lived signed URL: ask your API for the URL, PUT the file with real progress, then tell your API it finished; each step has its own message and a failure at any step is retryable. Use this when files should not pass through your server.

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

Files go to object storage directly to save bandwidth and avoid your server's request limits.

Do not use it when: Small files on a simple site can go through your own endpoint; signing adds moving parts.

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
`sign`	`({ name, type, size }) => Promise<{ url, headers?, key }>`	Ask your API for a signed URL.
`confirm`	`(key) => Promise<void>`	Tell your API the upload finished.
`transport`	`(signed) => Uploader`	Replace the PUT, for example with a multipart upload.

Accessibility

Each file shows the current step in words ("Getting upload link", "Uploading", "Finishing", "Done"), a named progress bar while bytes move and an alert that says which step failed.
Retry restarts from signing, because signed URLs expire; the file list is a labelled list and the picker is a normal button.
Signed URLs are never shown to the person or put in the page text.

Testing

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

Guide and examples

When to use it

Files go to object storage directly to save bandwidth and avoid your server's request limits.

Do not use it when: Small files on a simple site can go through your own endpoint; signing adds moving parts.

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
`sign`	`({ name, type, size }) => Promise<{ url, headers?, key }>`	Ask your API for a signed URL.
`confirm`	`(key) => Promise<void>`	Tell your API the upload finished.
`transport`	`(signed) => Uploader`	Replace the PUT, for example with a multipart upload.

Accessibility

Each file shows the current step in words ("Getting upload link", "Uploading", "Finishing", "Done"), a named progress bar while bytes move and an alert that says which step failed.
Retry restarts from signing, because signed URLs expire; the file list is a labelled list and the picker is a normal button.
Signed URLs are never shown to the person or put in the page text.

Testing

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