All components (244)

Media library

Management · MediaManager · .amset-media

What it is and when to use it

A media library: search, filter by type, upload, choose and, for the chosen one, edit its details, crop it and delete it.

When to use it

A shop's photos, a blog's images or a campaign's material, and the "choose an image" picker of an editor.
items are the items, with their type, original, thumbnail and details; selection="multiple" lets you choose several and onChoose uses them.
onUpdate saves the title, alternative text, caption and tags; onCrop receives an image's crop in pixels of the original; onDelete deletes with confirmation. Without its function, the action does not appear.
Images without alternative text are marked in the grid, so they are not published like that.

When not to

A folder of documents with subfolders: FileManager. Only cropping: ImageCropper.
Where the files are stored, their versions and who can touch them are the application's job.

Keyboard: each item is a button chosen with Enter or Space; the details panel is a normal form and the crop goes in a dialog.

Accessibility: it is a named region; each item says whether it is chosen (aria-pressed), the panel carries the item's name and saving, cropping, deleting and uploading are announced.

Fine appearance: --amset-media-tile (minimum width of a thumbnail), --amset-media-panel (width of the panel) and --amset-media-radius.

What it looks like

No image chosen.

<MediaManager
  label="Shop images"
  items={medios}
  selection="multiple"
  onChoose={usarEnLaFicha}
  onUpdate={guardarDetalles}
  onDelete={borrar}
/>

Props

Import it with import { MediaManager } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`items`required	`readonly MediaItem[]`	—
`label`required	`string`	Which library it is («Shop images»). Required.
`accept`	`string`	The types accepted when uploading, like the `accept` of an `<input type="file">`. By default, image, video, audio and PDF.
`className`	`string`	Merged with the library classes; it does not replace them.
`hasMore`	`boolean`	There are more items on the server than those in `items`: with this and `onLoadMore` the “Load more” button shows.
`loading`	`boolean`	—
`onChoose`	`(items: readonly MediaItem[]) => void`	Use the selection (insert it in a page, set it as a cover). Without this the button does not appear.
`onCrop`	`(id: string, rect: CropRect) => void \| Promise<void>`	Crop an image: the crop arrives in pixels of the original; actually cropping it is the application's job.
`onDelete`	`(id: string) => void \| Promise<void>`	—
`onLoadMore`	`() => void \| Promise<void>`	—
`onUpdate`	`(id: string, details: MediaDetails) => void \| Promise<void>`	—
`onUpload`	`(files: readonly File[], onProgress: ReportProgress) => void \| Promise<void>`	Upload files, with the button or by dropping them on it. For the progress bar, call `onProgress` with a value from 0 to 100.
`selection`	`"multiple" \| "single"`	Choose one or several. One by default.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-media-tile`	`9rem`
`--amset-media-panel`	`20rem`
`--amset-media-radius`	`var(--amset-radius-lg)`

How to change it

.amset-media {
  --amset-media-tile: ...;
  --amset-media-panel: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: