# Upload Vessel

A file-import dialog where the upload fills a beaker. Water pours in with the bytes, fizzes while the files are checked, and stands full with a tick when the data is ready.

Block · With a Pass · https://tactileui.dev/blocks/upload-vessel

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Upload fills vessel, Fizz while processing, Drag tilt, File validation, Simulated upload timer, Real upload api, Container query layout, Palette tokens from one table

## Usage notes

Make an upload's three phases (sending, processing, ready) readable at a glance without a percentage: for a data import, a media upload or any drop zone in a product, the vessel pours while bytes go up, fizzes while the server works, and stands full when it is done, beside precise file rows, rates and steps.

## Options

| Option | Type | Description |
| - | - | - |
| app | text | Product |
| project | text | Project |
| title | text | Dialog title |
| note | text | Footnote |
| speed | number | How fast the simulated upload fills the beaker. |
| palette | enum | The app’s light theme, or its dark one. |
| liquid | enum | In the beaker |
| light | number | Light from (degrees) |

## Methods

- vessel
- phase
- setProgress
- update
- destroy

## States

1. **Idle**: An empty beaker in the drop zone, “Drop your files here”, Browse and a sample run, hints on what the product reads; Import disabled.
2. **Drag over**: The zone's dashed outline turns to the accent and the water in the beaker tilts toward the pointer.
3. **Uploading**: Water pours in steadily with the bytes; each file's bar fills in turn; bytes, rate and time left in mono; step one active.
4. **Refused file**: A file of the wrong kind, too large or empty is listed with its reason in the error colour and left out of the upload.
5. **Checking and indexing**: The beaker stands full and fizzes, harder while indexing; the active step's dot pings; announced once.
6. **Done**: The fizz stops, a green tick appears, every file reads “Ready”, “Open dataset” is enabled; the timer has stopped and the beaker sleeps.
7. **Import more**: The list empties and the beaker drains.
8. **Palette**: Daylight (white card, cool greys, one blue) or console (the app's dark theme); the glass re-shades itself for the drop zone.
9. **Tablet**: The app's rail goes; a narrower drop zone beside the files.
10. **Phone**: One column: the beaker on top, the files below, the dialog's buttons sharing the full width.
11. **Reduced motion**: No pour, fizz, tilt, ping or slide; the checks run faster; the level, numbers and words all remain.
12. **Off screen**: The beaker's loop pauses; the block's timer runs only while an upload or a check is in progress.

## How it works

Original composition; Loam, its project, datasets and sample files are invented. Nothing is uploaded: the upload is simulated at a set rate until a real upload is wired through setProgress, process and done. Imagery is CSS and SVG icons drawn here, and the Vessel's canvas.