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

[Murderlon]

Closes #5970

AI disclosure: codex made the initial implementation

[changeset-bot]

🦋 Changeset detected

Latest commit: 9a64b86

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@uppy/components	Patch
@uppy/react	Patch
@uppy/svelte	Patch
@uppy/vue	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Diff output files

diff --git a/packages/@uppy/components/lib/hooks/dropzone.d.ts b/packages/@uppy/components/lib/hooks/dropzone.d.ts
index a235370..5a4af46 100644
--- a/packages/@uppy/components/lib/hooks/dropzone.d.ts
+++ b/packages/@uppy/components/lib/hooks/dropzone.d.ts
@@ -19,6 +19,7 @@ export type DropzoneReturn<DragEventType, ChangeEventType> = {
         id: string;
         type: 'file';
         multiple: boolean;
+        accept?: string;
         onChange: (event: ChangeEventType) => void;
     };
 };
diff --git a/packages/@uppy/components/lib/hooks/dropzone.js b/packages/@uppy/components/lib/hooks/dropzone.js
index cca0e57..eeca099 100644
--- a/packages/@uppy/components/lib/hooks/dropzone.js
+++ b/packages/@uppy/components/lib/hooks/dropzone.js
@@ -72,11 +72,16 @@ export function createDropzone(ctx, options = {}) {
       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",
+        multiple: restrictions.maxNumberOfFiles !== 1,
+        accept,
+        onChange: handleFileInputChange,
+      };
+    },
   };
 }
diff --git a/packages/@uppy/components/lib/hooks/file-input.js b/packages/@uppy/components/lib/hooks/file-input.js
index 30c4adc..2af1733 100644
--- a/packages/@uppy/components/lib/hooks/file-input.js
+++ b/packages/@uppy/components/lib/hooks/file-input.js
@@ -20,13 +20,21 @@ export function createFileInput(ctx, props = {}) {
     input.value = "";
   };
   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",
+        multiple,
+        accept,
+        onChange: handleFileInputChange,
+      };
+    },
     getButtonProps: () => ({
       type: "button",
       onClick: handleClick,

[mifi]

in the issue linked, maxFileSize is also mentioned as not being inherited. should it be inherited too?

[Murderlon]

in the issue linked, maxFileSize is also mentioned as not being inherited. should it be inherited too?

It can't be inherited, accept DOM property can only do file types. The rest is done programmatically in uppy.addFile()