@tuzzle/chooser
A framework-agnostic media-library and upload widget for any page.
@tuzzle/chooser is a vanilla media-library and upload widget. It is pure DOM plus CSS-in-JS with no framework dependency, and it powers the chooser components in the React, Vue, and Nuxt packages. Reach for it directly when you are not using one of those frameworks.
npm install @tuzzle/chooser
Usage
import { createChooser } from '@tuzzle/chooser'
const chooser = createChooser({
auth: { baseUrl: 'https://api.tzzl.io', accessToken: '...' },
space: 'a1b2c3',
cdnUrl: 'https://cdn.tzzl.io',
multiple: true,
upload: true,
onSelect: assets => insert(assets),
onError: err => console.error(err),
})
document.querySelector('#pick')?.addEventListener('click', () => chooser.open())
Options
| Option | Notes |
|---|---|
space, cdnUrl | Required. The space and CDN host to browse / deliver from. |
client or auth | Pass a @tuzzle/client instance, or inline { baseUrl, accessToken, refreshToken? }. |
multiple, maxFiles | Allow selecting more than one asset. |
accept | Restrict to mime types / prefixes / extensions. |
upload, search, folders | Toggle upload, search, and folder navigation. |
uploadConfigId | Apply a specific upload config. |
theme, cssVariables, classNames | Styling (see below). |
container | Mount into a specific element instead of the body. |
text | Override UI strings. |
onSelect, onUpload, onOpen, onClose, onError | Callbacks. |
Controller
createChooser returns a controller:
chooser.open()
chooser.close()
chooser.isOpen()
chooser.destroy()
// Subscribe to events; returns an unsubscribe function
const off = chooser.on('select', assets => insert(assets))
Events: select, open, close, upload, error.
Theming
Style the widget with a theme object, individual --tz-* CSS variables, or your own classNames.
createChooser({
// ...
theme: { mode: 'auto', accent: '#f96919', radius: '0.5rem' },
cssVariables: { '--tz-bg': '#0b0c0f' },
})