Upload Vessel

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.

Copy the upload-vessel folder and the vessel folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="vessel/vessel.css">
<link rel="stylesheet" href="upload-vessel/upload-vessel.css">
<div id="upload-vessel"></div>

<script type="module">
  import Vessel from './vessel/vessel.mjs';
  import { mount } from './upload-vessel/upload-vessel.mjs';

  const uploadVessel = mount(document.getElementById('upload-vessel'), {
    app: 'Loam',
    project: 'North field trial',
    title: 'Import sensor logs',
  }, { Vessel });

  // uploadVessel.update({ … });   change any option in place
  // uploadVessel.destroy();        and take it away again
</script>

mount(element, options, { Vessel })

Builds the block inside the element and returns its handle. Hand it the Vessel it is built with.

handle.vessel

handle.phase

handle.setProgress(f)

Add files (a FileList, or { name, size, rows } objects): they upload at once.

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

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.

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

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. Faces: Instrument Sans and Geist Mono (SIL OFL 1.1), Latin subsets as WOFF2.

• 07VesselA glass of liquid as a gauge.

More blocks on the same object:

• 06.4Specimen CaseA bento of glass-topped compartments in a machined case, each holding one real Tactile object running small (the Odometer, the Flip-Dot, the Detent Dial, the Vessel) with an engraved label card under the glass.
• 07.1Reading ProgressA long read with a test tube for a progress bar.
• 07.2Crowdfund FlaskA fundraiser where the total is honey in a flask.