Transform the accept prop into a string everywhere

[lakesare]

This PR passes a string to accept, just like its type wants (property) JSXInternal.HTMLAttributes<HTMLInputElement>.accept?: string | undefined.

Technically, accept was already transforming the array into a string - but that was undocumented behaviour.

Before

After

[github-actions]

Diff output files

diff --git a/packages/@uppy/dashboard/lib/components/AddFiles.js b/packages/@uppy/dashboard/lib/components/AddFiles.js
index 07770cb..8a0edf9 100644
--- a/packages/@uppy/dashboard/lib/components/AddFiles.js
+++ b/packages/@uppy/dashboard/lib/components/AddFiles.js
@@ -19,6 +19,7 @@ class AddFiles extends Component {
       event.target.value = null;
     };
     this.renderHiddenInput = (isFolder, refCallback) => {
+      var _this$props$allowedFi;
       return h("input", {
         className: "uppy-Dashboard-input",
         hidden: true,
@@ -29,7 +30,9 @@ class AddFiles extends Component {
         name: "files[]",
         multiple: this.props.maxNumberOfFiles !== 1,
         onChange: this.onFileInputChange,
-        accept: this.props.allowedFileTypes,
+        accept: (_this$props$allowedFi = this.props.allowedFileTypes) == null
+          ? void 0
+          : _this$props$allowedFi.join(", "),
         ref: refCallback,
       });
     };
diff --git a/packages/@uppy/drag-drop/lib/DragDrop.js b/packages/@uppy/drag-drop/lib/DragDrop.js
index bf02d06..5f2d2c3 100644
--- a/packages/@uppy/drag-drop/lib/DragDrop.js
+++ b/packages/@uppy/drag-drop/lib/DragDrop.js
@@ -101,6 +101,7 @@ export default class DragDrop extends UIPlugin {
     this.i18nInit();
   }
   renderHiddenFileInput() {
+    var _restrictions$allowed;
     const {
       restrictions,
     } = this.uppy.opts;
@@ -113,7 +114,9 @@ export default class DragDrop extends UIPlugin {
       },
       name: this.opts.inputName,
       multiple: restrictions.maxNumberOfFiles !== 1,
-      accept: restrictions.allowedFileTypes,
+      accept: (_restrictions$allowed = restrictions.allowedFileTypes) == null
+        ? void 0
+        : _restrictions$allowed.join(", "),
       onChange: this.onInputChange,
     });
   }
diff --git a/packages/@uppy/file-input/lib/FileInput.js b/packages/@uppy/file-input/lib/FileInput.js
index 90b6833..13cfa50 100644
--- a/packages/@uppy/file-input/lib/FileInput.js
+++ b/packages/@uppy/file-input/lib/FileInput.js
@@ -48,6 +48,7 @@ export default class FileInput extends UIPlugin {
     this.input.click();
   }
   render() {
+    var _restrictions$allowed;
     const hiddenInputStyle = {
       width: "0.1px",
       height: "0.1px",
@@ -59,7 +60,6 @@ export default class FileInput extends UIPlugin {
     const {
       restrictions,
     } = this.uppy.opts;
-    const accept = restrictions.allowedFileTypes ? restrictions.allowedFileTypes.join(",") : undefined;
     return h(
       "div",
       {
@@ -72,7 +72,9 @@ export default class FileInput extends UIPlugin {
         name: this.opts.inputName,
         onChange: this.handleInputChange,
         multiple: restrictions.maxNumberOfFiles !== 1,
-        accept: accept,
+        accept: (_restrictions$allowed = restrictions.allowedFileTypes) == null
+          ? void 0
+          : _restrictions$allowed.join(", "),
         ref: input => {
           this.input = input;
         },

[lakesare]

This adds all existing restrictions to our dev file - I frequently need those, and I assume others do too