Upload Vessel

Datasheet

Mechanism

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

Stack

Vanilla ES modules, CSS, Canvas 2D

Needs

Vessel

States

12 documented

Version

0.1.0

Licence

With a Pass

States

1. IdleAn 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 overThe zone's dashed outline turns to the accent and the water in the beaker tilts toward the pointer.
3. UploadingWater 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 fileA 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 indexingThe beaker stands full and fizzes, harder while indexing; the active step's dot pings; announced once.
6. DoneThe fizz stops, a green tick appears, every file reads “Ready”, “Open dataset” is enabled; the timer has stopped and the beaker sleeps.
7. Import moreThe list empties and the beaker drains.
8. PaletteDaylight (white card, cool greys, one blue) or console (the app's dark theme); the glass re-shades itself for the drop zone.
9. TabletThe app's rail goes; a narrower drop zone beside the files.
10. PhoneOne column: the beaker on top, the files below, the dialog's buttons sharing the full width.
11. Reduced motionNo pour, fizz, tilt, ping or slide; the checks run faster; the level, numbers and words all remain.
12. Off screenThe beaker's loop pauses; the block's timer runs only while an upload or a check is in progress.