From b9582e1e67eded2404aa09b2d31cd9f956dfa295 Mon Sep 17 00:00:00 2001
From: Evgenia Karunus <lakesare@gmail.com>
Date: Thu, 1 Aug 2024 15:18:55 +0500
Subject: [PATCH] Transform the `accept` prop into a string everywhere (#5380)

* `/dev/Dashboard.js` - add all restrictions for the development environment

* `AddFiles.tsx` - turn `accept` into a string

* everywhere - make `accept` a string across uppy
---
 packages/@uppy/dashboard/src/components/AddFiles.tsx |  2 +-
 packages/@uppy/drag-drop/src/DragDrop.tsx            |  3 +--
 packages/@uppy/file-input/src/FileInput.tsx          |  6 +-----
 private/dev/Dashboard.js                             | 10 +++++++++-
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/@uppy/dashboard/src/components/AddFiles.tsx b/packages/@uppy/dashboard/src/components/AddFiles.tsx
index da2d93d5e..4a5243ef8 100644
--- a/packages/@uppy/dashboard/src/components/AddFiles.tsx
+++ b/packages/@uppy/dashboard/src/components/AddFiles.tsx
@@ -55,7 +55,7 @@ class AddFiles extends Component {
         name="files[]"
         multiple={this.props.maxNumberOfFiles !== 1}
         onChange={this.onFileInputChange}
-        accept={this.props.allowedFileTypes}
+        accept={this.props.allowedFileTypes?.join(', ')}
         ref={refCallback}
       />
     )
diff --git a/packages/@uppy/drag-drop/src/DragDrop.tsx b/packages/@uppy/drag-drop/src/DragDrop.tsx
index b22e3f5b5..1bc94200c 100644
--- a/packages/@uppy/drag-drop/src/DragDrop.tsx
+++ b/packages/@uppy/drag-drop/src/DragDrop.tsx
@@ -165,8 +165,7 @@ export default class DragDrop<M extends Meta, B extends Body> extends UIPlugin<
         }}
         name={this.opts.inputName}
         multiple={restrictions.maxNumberOfFiles !== 1}
-        // @ts-expect-error We actually want to coerce the array to a string (or keep it as null/undefined)
-        accept={restrictions.allowedFileTypes}
+        accept={restrictions.allowedFileTypes?.join(', ')}
         onChange={this.onInputChange}
       />
     )
diff --git a/packages/@uppy/file-input/src/FileInput.tsx b/packages/@uppy/file-input/src/FileInput.tsx
index f3c260d6d..09cc9fbc0 100644
--- a/packages/@uppy/file-input/src/FileInput.tsx
+++ b/packages/@uppy/file-input/src/FileInput.tsx
@@ -96,10 +96,6 @@ export default class FileInput<M extends Meta, B extends Body> extends UIPlugin<
     } satisfies h.JSX.IntrinsicElements['input']['style']
 
     const { restrictions } = this.uppy.opts
-    const accept =
-      restrictions.allowedFileTypes ?
-        restrictions.allowedFileTypes.join(',')
-      : undefined
 
     return (
       <div className="uppy-FileInput-container">
@@ -110,7 +106,7 @@ export default class FileInput<M extends Meta, B extends Body> extends UIPlugin<
           name={this.opts.inputName}
           onChange={this.handleInputChange}
           multiple={restrictions.maxNumberOfFiles !== 1}
-          accept={accept}
+          accept={restrictions.allowedFileTypes?.join(', ')}
           ref={(input) => {
             this.input = input as HTMLFileInputElement
           }}
diff --git a/private/dev/Dashboard.js b/private/dev/Dashboard.js
index d750b783a..8e9f98f70 100644
--- a/private/dev/Dashboard.js
+++ b/private/dev/Dashboard.js
@@ -79,7 +79,15 @@ function getCompanionKeysParams (name) {
 
 export default () => {
   const restrictions = undefined
-  // const restrictions = { requiredMetaFields: ['caption'], maxNumberOfFiles: 3 }
+  // const restrictions = {
+  //   maxFileSize:      1 * 1000000, // 1mb
+  //   minFileSize:      1 * 1000000, // 1mb
+  //   maxTotalFileSize: 1 * 1000000, // 1mb
+  //   maxNumberOfFiles: 3,
+  //   minNumberOfFiles: 1,
+  //   allowedFileTypes: ['image/*', '.jpg', '.jpeg', '.png', '.gif'],
+  //   requiredMetaFields: ['caption'],
+  // }
 
   const uppyDashboard = new Uppy({
     logger: debugLogger,