diff --git a/packages/ui/src/elements/Dropzone/index.tsx b/packages/ui/src/elements/Dropzone/index.tsx index ab8043f14..ccb9a4954 100644 --- a/packages/ui/src/elements/Dropzone/index.tsx +++ b/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 = ({ className, mimeTypes, onChange, onPasteUrlClick }) => { +export const Dropzone: React.FC = ({ + className, + mimeTypes, + multipleFiles, + onChange, + onPasteUrlClick, +}) => { const dropRef = React.useRef(null) const [dragging, setDragging] = React.useState(false) const inputRef = React.useRef(null) @@ -111,17 +118,21 @@ export const Dropzone: React.FC = ({ className, mimeTypes, onChange, onPa > {t('upload:selectFile')} - + {typeof onPasteUrlClick === 'function' && ( + + )} = (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 = (props) => { useEffect(() => { setDoc(reduceFieldsToValues(initialState || {}, true)) + if (initialState?.file?.value instanceof File) { + setFileSrc(URL.createObjectURL(initialState.file.value)) + } setReplacingFile(false) }, [initialState]) diff --git a/packages/ui/src/exports/client/index.ts b/packages/ui/src/exports/client/index.ts index 631ffbb30..516be2059 100644 --- a/packages/ui/src/exports/client/index.ts +++ b/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'