hb-uploader — uploader

Category: utilities
Tags: utilities, files

What it does

Upload progress UI driven by fetch_data (url, data, optional method, headers): wraps hb-dialog, shows an indeterminate Bulma progress bar while starting, then fills progress from streamed upload bytes. Optional upload_id identifies the nested dialog; title slot labels the dialog. Forwards dialog modalShow and emits uploadComplete / uploadError when the request finishes or fails.

Custom element

hb-uploader

Attributes (snake_case; use string values in HTML)

• id (optional), style (optional): strings.
• upload_id (optional): string — dialog id (defaults from id + _dialog in component).
• fetch_data (optional): JSON string — { url: string; data: any; method?; headers? }.

Events

• uploadError: { completed: boolean; id: string; error: Error }.
• uploadComplete: { completed: boolean; id: string }.
• modalShow: forwarded from hb-dialog — { id: string; show: boolean } (see dialog typings).

Usage notes

• Slot: title — dialog title (default “Uploading”).
• Storybook arg names may say “download”; runtime events are uploadError / uploadComplete.
• CSS vars in docs reference Bulma semantic colors (--bulma-*) for progress and labels.

Minimal HTML example

<hb-uploader
  fetch_data='{"url":"https://api.example.com/upload","data":{},"method":"POST"}'
  upload_id="my-upload-dialog"
></hb-uploader>