chore: extends dropzone and upload field (#7713)

## Description

Tweaks to Upload and Dropzone components, making them more extendable.

- Dropzone adds prop to allow multiple files
- Upload correctly sets url if state is initialized with a File

- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [x] Chore (non-breaking change which does not add functionality)

## Checklist:

- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] Existing test suite passes locally with my changes
- [ ] I have made corresponding changes to the documentation

packages/ui/src/elements/Dropzone/index.tsx

@@ -13,13 +13,20 @@ const handleDragOver = (e: DragEvent) => {
 const baseClass = 'dropzone'
 
 export type Props = {
-  className?: string
-  mimeTypes?: string[]
-  onChange: (e: FileList) => void
-  onPasteUrlClick?: () => void
+  readonly className?: string
+  readonly mimeTypes?: string[]
+  readonly multipleFiles?: boolean
+  readonly onChange: (e: FileList) => void
+  readonly onPasteUrlClick?: () => void
 }
 
-export const Dropzone: React.FC<Props> = ({ className, mimeTypes, onChange, onPasteUrlClick }) => {
+export const Dropzone: React.FC<Props> = ({
+  className,
+  mimeTypes,
+  multipleFiles,
+  onChange,
+  onPasteUrlClick,
+}) => {
   const dropRef = React.useRef<HTMLDivElement>(null)
   const [dragging, setDragging] = React.useState(false)
   const inputRef = React.useRef(null)
@@ -111,17 +118,21 @@ export const Dropzone: React.FC<Props> = ({ className, mimeTypes, onChange, onPa
       >
         {t('upload:selectFile')}
       </Button>
-      <Button
-        buttonStyle="secondary"
-        className={`${baseClass}__file-button`}
-        onClick={onPasteUrlClick}
-        size="medium"
-      >
-        {t('upload:pasteURL')}
-      </Button>
+      {typeof onPasteUrlClick === 'function' && (
+        <Button
+          buttonStyle="secondary"
+          className={`${baseClass}__file-button`}
+          onClick={onPasteUrlClick}
+          size="medium"
+        >
+          {t('upload:pasteURL')}
+        </Button>
+      )}
       <input
         accept={mimeTypes?.join(',')}
+        aria-hidden="true"
         className={`${baseClass}__hidden-input`}
+        multiple={multipleFiles}
         onChange={handleFileSelection}
         ref={inputRef}
         type="file"

packages/ui/src/elements/Upload/index.tsx

@@ -109,15 +109,7 @@ export const Upload: React.FC<UploadProps> = (props) => {
   const handleFileChange = useCallback(
     (newFile: File) => {
       if (newFile instanceof File) {
-        const fileReader = new FileReader()
-        fileReader.onload = (e) => {
-          const imgSrc = e.target?.result
-
-          if (typeof imgSrc === 'string') {
-            setFileSrc(imgSrc)
-          }
-        }
-        fileReader.readAsDataURL(newFile)
+        setFileSrc(URL.createObjectURL(newFile))
       }
 
       setValue(newFile)
@@ -202,6 +194,9 @@ export const Upload: React.FC<UploadProps> = (props) => {
 
   useEffect(() => {
     setDoc(reduceFieldsToValues(initialState || {}, true))
+    if (initialState?.file?.value instanceof File) {
+      setFileSrc(URL.createObjectURL(initialState.file.value))
+    }
     setReplacingFile(false)
   }, [initialState])
 

packages/ui/src/exports/client/index.ts

@@ -32,6 +32,7 @@ export { Collapsible } from '../../elements/Collapsible/index.js'
 export { CopyToClipboard } from '../../elements/CopyToClipboard/index.js'
 export { DeleteMany } from '../../elements/DeleteMany/index.js'
 export { DocumentControls } from '../../elements/DocumentControls/index.js'
+export { Dropzone } from '../../elements/Dropzone/index.js'
 export { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js'
 export { DocumentFields } from '../../elements/DocumentFields/index.js'
 export { Drawer, DrawerToggler, formatDrawerSlug } from '../../elements/Drawer/index.js'