MediaPicker

Tip

View source on GitHub →

A picker for image attachments — a thin wrapper around FilePickerShell that always uses kind='image' and adapts the button style based on the rendered image preview (the buttons switch between glass and glassDark to stay legible over the artwork).

import { MediaPicker } from '@eightshift/frontend-libs-tailwind/scripts';

<MediaPicker
	onChange={({ id, url }) => setAttributes({ imageId: id, imageUrl: url })}
	imageId={imageId}
	imageUrl={imageUrl}
/>;

Highlighted props

Prop	Type	Description
onChange	(media) => void	Required. Called with { id, url, ... } on select, or { id: undefined, url: undefined } on remove.
imageId	string	ID of the currently selected image. Used when replacing to mark the current selection.
imageUrl	string	URL of the currently selected image. Drives the preview.
allowedTypes	string[]	Allowed MIME types. Defaults to ['image'].
noDelete	boolean	Hide the "Remove" button.
noUpload	boolean	Hide the "Upload" button in the empty state.
hidden	boolean	If true, nothing is rendered.
className	string	Extra classes for the picker wrapper.

Restricting to a single type

<MediaPicker
	onChange={onChange}
	imageId={imageId}
	imageUrl={imageUrl}
	allowedTypes={['image/svg+xml']}
/>

Read-only picker (no upload, no delete)

<MediaPicker
	onChange={onChange}
	imageId={imageId}
	imageUrl={imageUrl}
	noUpload
	noDelete
/>

Note

For non-image media, reach for FileSelector with the matching kind instead.