35 lines
1.1 KiB
Plaintext
35 lines
1.1 KiB
Plaintext
|
---
|
||
|
|
title: Media library
|
||
|
|
description: Supply a storage adapter and add browsing, upload, folders, and asset selection.
|
||
|
|
order: 21
|
||
|
|
toc:
|
||
|
|
- id: implement-the-adapter
|
||
|
|
title: Implement the adapter
|
||
|
|
- id: provide-media
|
||
|
|
title: Provide media
|
||
|
|
- id: selection-flows
|
||
|
|
title: Selection flows
|
||
|
|
---
|
||
|
|
|
||
|
|
## Implement the adapter {#implement-the-adapter}
|
||
|
|
|
||
|
|
`MediaAdapter` is the media feature's complete persistence boundary. Implement its query, upload, folder, update, and delete operations with the product's storage service.
|
||
|
|
|
||
|
|
## Provide media {#provide-media}
|
||
|
|
|
||
|
|
Mount the adapter once around the media surfaces:
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { MediaLibrary, MediaProvider } from "@workspace/blocks/media"
|
||
|
|
|
||
|
|
;<MediaProvider adapter={mediaAdapter} notify={showNotice}>
|
||
|
|
<MediaLibrary />
|
||
|
|
</MediaProvider>
|
||
|
|
```
|
||
|
|
|
||
|
|
The optional `notify` callback translates operational results into the application's toast or notification system.
|
||
|
|
|
||
|
|
## Selection flows {#selection-flows}
|
||
|
|
|
||
|
|
Use `MediaPickerDialog` for single or multiple asset selection. `readMediaDimensions`, `formatMediaFileSize`, and `defaultMediaReference` cover the common presentation work around uploads and previews.
|