@uppy/components: inherit restrictions from @uppy/core

.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,19 @@ export function createDropzone<
       onClick: handleClick,
       onKeyPress: handleKeyPress,
     }),
-    getInputProps: () => ({
-      id: fileInputId,
-      type: 'file',
-      multiple: true,
-      onChange: handleFileInputChange,
-    }),
+    getInputProps: () => {
+      const { restrictions } = ctx.uppy.opts
+      const { allowedFileTypes } = restrictions
+      return {
+        id: fileInputId,
+        type: 'file' as const,
+        multiple: restrictions.maxNumberOfFiles !== 1,
+        accept:
+          Array.isArray(allowedFileTypes) && allowedFileTypes.length > 0
+            ? allowedFileTypes.join(', ')
+            : undefined,
+        onChange: handleFileInputChange,
+      }
+    },
   }
 }

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

@@ -49,13 +49,26 @@ export function createFileInput<EventType extends Event>(
   }
 
   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
+      const accept =
+        props.accept ??
+        (Array.isArray(allowedFileTypes) && allowedFileTypes.length > 0
+          ? allowedFileTypes.join(', ')
+          : undefined)
+      const multiple =
+        typeof props.multiple === 'boolean'
+          ? props.multiple
+          : maxNumberOfFiles !== 1
+      return {
+        id: fileInputId,
+        type: 'file' as const,
+        multiple,
+        accept,
+        onChange: handleFileInputChange,
+      }
+    },
     getButtonProps: () => ({
       type: 'button',
       onClick: handleClick,