feat: admin upload controls (#11615)
### What?
Adds the ability to add additional components to the file upload
component.
```ts
export const Media: CollectionConfig = {
slug: 'media',
upload: {
admin: {
components: {
controls: [
'/collections/components/Control/index.js#UploadControl',
],
},
},
},
fields: [],
}
```

### Provider
Use the `useUploadControls` provider to either `setUploadControlFile`
passing a file object, or set the file by url using
`setUploadControlFileUrl`.
```tsx
'use client'
import { Button, useUploadControls } from '@payloadcms/ui'
import React, { useCallback } from 'react'
export const UploadControl = () => {
const { setUploadControlFile, setUploadControlFileUrl } = useUploadControls()
const loadFromFile = useCallback(async () => {
const response = await fetch('https://payloadcms.com/images/universal-truth.jpg')
const blob = await response.blob()
const file = new File([blob], 'universal-truth.jpg', { type: 'image/jpeg' })
setUploadControlFile(file)
}, [setUploadControlFile])
const loadFromUrl = useCallback(() => {
setUploadControlFileUrl('https://payloadcms.com/images/universal-truth.jpg')
}, [setUploadControlFileUrl])
return (
<div>
<Button id="load-from-file-upload-button" onClick={loadFromFile}>
Load from File
</Button>
<br />
<Button id="load-from-url-upload-button" onClick={loadFromUrl}>
Load from URL
</Button>
</div>
)
}
```
### Why?
Add the ability to use a custom component to select a document to
upload.
This commit is contained in:
@@ -22,8 +22,8 @@ import { DocumentFields } from '../../DocumentFields/index.js'
|
||||
import { MoveDocToFolder } from '../../FolderView/MoveDocToFolder/index.js'
|
||||
import { Upload_v4 } from '../../Upload/index.js'
|
||||
import { useFormsManager } from '../FormsManager/index.js'
|
||||
import { BulkUploadProvider } from '../index.js'
|
||||
import './index.scss'
|
||||
import { BulkUploadProvider } from '../index.js'
|
||||
|
||||
const baseClass = 'collection-edit'
|
||||
|
||||
|
||||
@@ -9,6 +9,7 @@ import { toast } from 'sonner'
|
||||
|
||||
import { useConfig } from '../../providers/Config/index.js'
|
||||
import { useTranslation } from '../../providers/Translation/index.js'
|
||||
import { UploadControlsProvider } from '../../providers/UploadControls/index.js'
|
||||
import { Drawer, useDrawerDepth } from '../Drawer/index.js'
|
||||
import { AddFilesView } from './AddFilesView/index.js'
|
||||
import { AddingFilesView } from './AddingFilesView/index.js'
|
||||
@@ -75,7 +76,9 @@ export function BulkUploadDrawer() {
|
||||
return (
|
||||
<Drawer gutter={false} Header={null} slug={drawerSlug}>
|
||||
<FormsManagerProvider>
|
||||
<DrawerContent />
|
||||
<UploadControlsProvider>
|
||||
<DrawerContent />
|
||||
</UploadControlsProvider>
|
||||
</FormsManagerProvider>
|
||||
</Drawer>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user