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
transloadit · Aug 1, 2024 · b9582e1 · b9582e1
1 parent f76d744
commit b9582e1
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,