Kendell Joseph f2e04222f4 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: [],
}
```

![image](https://github.com/user-attachments/assets/4706e05b-4e95-4f15-8444-a279c589074e)

### 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.

2025-06-13 12:47:46 -04:00

..

collections

feat: admin upload controls (#11615)

2025-06-13 12:47:46 -04:00

mocks

chore: hoists tests out of payload package

2023-09-01 14:45:41 -04:00

.gitignore

feat!: on demand rsc (#8364)

2024-11-11 13:59:05 -05:00

2mb.jpg

fix: ensure body limit is respected (#5807)

2024-04-16 09:22:41 -04:00

animated.webp

fix(payload, ui): unable to save animated file types with undefined image sizes (#6757)

2024-06-13 09:43:44 -04:00

audio.mp3

chore: hoists tests out of payload package

2023-09-01 14:45:41 -04:00

config.ts

feat: admin upload controls (#11615)

2025-06-13 12:47:46 -04:00

createStreamableFile.ts

fix: ensure body limit is respected (#5807)

2024-04-16 09:22:41 -04:00

duck.glb

fix: correctly detect glb & gltf mimetypes during upload (#12623)

2025-06-02 11:26:26 -07:00

e2e.spec.ts

feat: admin upload controls (#11615)

2025-06-13 12:47:46 -04:00

getMimeType.ts

fix(payload, ui): unable to save animated file types with undefined image sizes (#6757)

2024-06-13 09:43:44 -04:00

horizontal-squares.jpg

fix(ui): uploading from drawer & focal point positioning (#7117)

2024-07-18 13:43:53 -04:00

image.jpg

chore: hoists tests out of payload package

2023-09-01 14:45:41 -04:00

image.png

chore: hoists tests out of payload package

2023-09-01 14:45:41 -04:00

image.svg

chore: hoists tests out of payload package

2023-09-01 14:45:41 -04:00

int.spec.ts

chore: adds filters (#12622)

2025-06-12 09:46:49 -04:00

ios-image.jpeg

fix(payload): calculates correct aspect ratio dimensions on sharp based files (#8537)

2024-10-08 14:45:51 -04:00

non-animated.webp

fix(payload, ui): unable to save animated file types with undefined image sizes (#6757)

2024-06-13 09:43:44 -04:00

payload-types.ts

feat: admin upload controls (#11615)

2025-06-13 12:47:46 -04:00

shared.ts

feat: admin upload controls (#11615)

2025-06-13 12:47:46 -04:00

small.png

chore: hoists tests out of payload package

2023-09-01 14:45:41 -04:00

startMockCorsServer.ts

feat: adds support for both client-side and server-side remote URL uploads fetching (#10004)

2025-01-17 09:16:29 -05:00

temp-renamed.png

chore: hoists tests out of payload package

2023-09-01 14:45:41 -04:00

temp.png

chore: hoists tests out of payload package

2023-09-01 14:45:41 -04:00

test-image-1500x735.jpeg

fix: incorrect height rounding when resizing images with sharp (#11634)

2025-03-12 09:48:05 -04:00

test-image-avif.avif

fix: avif images not converting to upload.formatOptions set file types (#11505)

2025-03-03 14:58:39 -05:00

test-image.jpg

fix: focal and cropping issues, adds test (#4039)

2023-11-07 15:20:57 -05:00

test-image.png

feat(ui): adds edit many option for bulk uploads (#10646)

2025-01-22 16:20:13 -05:00

test-image.tiff

fix: image resize tiff files (#5449)

2024-03-25 11:09:17 -04:00

test-pdf.pdf

fix(ui): skip bulk upload thumbnail generation on non-image files (#11378)

2025-02-25 16:55:44 -05:00

tsconfig.eslint.json

chore: run lint & prettier on everything

2024-03-14 23:53:47 -04:00

tsconfig.json

feat!: prebundle payload, ui, richtext-lexical (#6579)

2024-06-17 14:25:36 -04:00

unstored.png

fix: resize image if no aspect ratio change (#3859)

2023-10-26 09:04:13 -04:00