@uppy/components: inherit restrictions from @uppy/core (#6014)

Closes #5970

AI disclosure: codex made the initial implementation

---------

Co-authored-by: Mikael Finstad <finstaden@gmail.com>

.changeset/nice-pigs-argue.md

@@ -0,0 +1,5 @@
+---
+"@uppy/components": patch
+---
+
+Dropzone and FileInput inherit restrictions from @uppy/core

packages/@uppy/components/src/hooks/dropzone.ts

@@ -21,6 +21,7 @@ export type DropzoneReturn<DragEventType, ChangeEventType> = {
     id: string
     type: 'file'
     multiple: boolean
+    accept?: string
     onChange: (event: ChangeEventType) => void
   }
 }
@@ -117,11 +118,17 @@ export function createDropzone<
       onClick: handleClick,
       onKeyPress: handleKeyPress,
     }),
-    getInputProps: () => ({
+    getInputProps: () => {
-      id: fileInputId,
+      const { restrictions } = ctx.uppy.opts
-      type: 'file',
+      const accept = restrictions.allowedFileTypes?.join(', ')
-      multiple: true,
+
-      onChange: handleFileInputChange,
+      return {
-    }),
+        id: fileInputId,
+        type: 'file' as const,
+        multiple: restrictions.maxNumberOfFiles !== 1,
+        accept,
+        onChange: handleFileInputChange,
+      }
+    },
   }
 }

packages/@uppy/components/src/hooks/file-input.ts

@@ -49,13 +49,23 @@ export function createFileInput<EventType extends Event>(
   }
 
   return {
-    getInputProps: () => ({
+    getInputProps: () => {
-      id: fileInputId,
+      const { restrictions } = ctx.uppy.opts
-      type: 'file',
+      const { allowedFileTypes, maxNumberOfFiles } = restrictions
-      multiple: props.multiple ?? true,
+
-      accept: props.accept,
+      let accept = props.accept
-      onChange: handleFileInputChange,
+      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,