f2e04222f4
### 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.
31 lines
1.5 KiB
TypeScript
31 lines
1.5 KiB
TypeScript
export const usersSlug = 'users'
|
|
export const mediaSlug = 'media'
|
|
export const relationSlug = 'relation'
|
|
export const audioSlug = 'audio'
|
|
export const enlargeSlug = 'enlarge'
|
|
export const withoutEnlargeSlug = 'without-enlarge'
|
|
export const focalNoSizesSlug = 'focal-no-sizes'
|
|
export const focalOnlySlug = 'focal-only'
|
|
export const reduceSlug = 'reduce'
|
|
export const relationPreviewSlug = 'relation-preview'
|
|
export const mediaWithRelationPreviewSlug = 'media-with-relation-preview'
|
|
export const mediaWithoutRelationPreviewSlug = 'media-without-relation-preview'
|
|
export const mediaWithoutCacheTagsSlug = 'media-without-cache-tags'
|
|
export const adminUploadControlSlug = 'admin-upload-control'
|
|
export const adminThumbnailFunctionSlug = 'admin-thumbnail-function'
|
|
export const adminThumbnailWithSearchQueries = 'admin-thumbnail-with-search-queries'
|
|
export const adminThumbnailSizeSlug = 'admin-thumbnail-size'
|
|
export const unstoredMediaSlug = 'unstored-media'
|
|
export const versionSlug = 'versions'
|
|
export const animatedTypeMedia = 'animated-type-media'
|
|
export const customUploadFieldSlug = 'custom-upload-field'
|
|
export const hideFileInputOnCreateSlug = 'hide-file-input-on-create'
|
|
export const withMetadataSlug = 'with-meta-data'
|
|
export const withoutMetadataSlug = 'without-meta-data'
|
|
export const withOnlyJPEGMetadataSlug = 'with-only-jpeg-meta-data'
|
|
export const customFileNameMediaSlug = 'custom-file-name-media'
|
|
export const allowListMediaSlug = 'allow-list-media'
|
|
|
|
export const listViewPreviewSlug = 'list-view-preview'
|
|
export const threeDimensionalSlug = 'three-dimensional'
|