` component from `@payloadcms/ui`.
+
+### Minimal example
+
+**Server Component** (`/components/CustomUpload.tsx`):
+```tsx
+import { CustomUploadClient } from './CustomUpload.client'
+export const CustomUploadServer = (props) => (
+
+
Custom Upload Interface
+
+
+)
+```
+
+**Client Component** (`/components/CustomUpload.client.tsx`):
+```tsx
+'use client'
+import { Upload, useDocumentInfo } from '@payloadcms/ui'
+export const CustomUploadClient = () => {
+ const { collectionSlug, docConfig, initialState } = useDocumentInfo()
+ return (
+
+ )
+}
+```
+
+**Collection config:**
+```ts
+admin: {
+ components: {
+ edit: {
+ Upload: '/components/CustomUpload#CustomUploadServer',
+ },
+ },
+},
+```
+
+### Available hooks & components from `@payloadcms/ui`
+
+| Hook / Component | Description |
+|---|---|
+| `useDocumentInfo()` | Collection slug, doc config, initial state |
+| `useField()` | Access/manipulate form field state |
+| `useBulkUpload()` | Bulk upload context |
+| `` | Main upload component (drag-drop, preview, `customActions` prop) |
+| `` / `` | Modal drawer + trigger button |
+| `` etc. | Form field components |
+
+### Upload Collection vs Upload Field customization
+
+| Approach | Config location | Use case |
+|---|---|---|
+| Upload Collection | `admin.components.edit.Upload` | Customize the media collection edit view |
+| Upload Field | `admin.components.Field` on an upload field | Customize the field that references uploads in other collections |
+
## Storage Adapters
All adapters auto-set `disableLocalStorage: true` per collection.