diff --git a/.changeset/nice-pigs-argue.md b/.changeset/nice-pigs-argue.md new file mode 100644 index 000000000..b800e8899 --- /dev/null +++ b/.changeset/nice-pigs-argue.md @@ -0,0 +1,5 @@ +--- +"@uppy/components": patch +--- + +Dropzone and FileInput inherit restrictions from @uppy/core diff --git a/packages/@uppy/components/src/hooks/dropzone.ts b/packages/@uppy/components/src/hooks/dropzone.ts index 0adffefd9..b3b20071b 100644 --- a/packages/@uppy/components/src/hooks/dropzone.ts +++ b/packages/@uppy/components/src/hooks/dropzone.ts @@ -21,6 +21,7 @@ export type DropzoneReturn = { id: string type: 'file' multiple: boolean + accept?: string onChange: (event: ChangeEventType) => void } } @@ -117,11 +118,17 @@ export function createDropzone< onClick: handleClick, onKeyPress: handleKeyPress, }), - getInputProps: () => ({ - id: fileInputId, - type: 'file', - multiple: true, - onChange: handleFileInputChange, - }), + getInputProps: () => { + const { restrictions } = ctx.uppy.opts + const accept = restrictions.allowedFileTypes?.join(', ') + + return { + id: fileInputId, + type: 'file' as const, + multiple: restrictions.maxNumberOfFiles !== 1, + accept, + onChange: handleFileInputChange, + } + }, } } diff --git a/packages/@uppy/components/src/hooks/file-input.ts b/packages/@uppy/components/src/hooks/file-input.ts index 7c9713ce2..98f46af87 100644 --- a/packages/@uppy/components/src/hooks/file-input.ts +++ b/packages/@uppy/components/src/hooks/file-input.ts @@ -49,13 +49,23 @@ export function createFileInput( } return { - getInputProps: () => ({ - id: fileInputId, - type: 'file', - multiple: props.multiple ?? true, - accept: props.accept, - onChange: handleFileInputChange, - }), + getInputProps: () => { + const { restrictions } = ctx.uppy.opts + const { allowedFileTypes, maxNumberOfFiles } = restrictions + + let accept = props.accept + accept ??= allowedFileTypes?.join(', ') + let multiple = props.multiple + multiple ??= maxNumberOfFiles !== 1 + + return { + id: fileInputId, + type: 'file' as const, + multiple, + accept, + onChange: handleFileInputChange, + } + }, getButtonProps: () => ({ type: 'button', onClick: handleClick,