feat(fileuploaderdropcontainer): added pattern for accepted file ext (#9929)

TannerS · kodiakhq[bot] · tay1orjones · web-flow · commit 90ffba0bdd2a · 2021-10-28T19:00:15.000Z
* feat(fileuploaderdropcontainer): added pattern for accepted file ext

* chore: update snaps

Co-authored-by: kodiakhq[bot] &lt;49736102+kodiakhq[bot]@users.noreply.github.com&gt;
Co-authored-by: Taylor Jones &lt;taylor.jones826@gmail.com&gt;
Co-authored-by: Taylor Jones &lt;tay1orjones@users.noreply.github.com&gt;
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2946,6 +2946,7 @@ Map {
       "labelText": "Add file",
       "multiple": false,
       "onAddFiles": [Function],
+      "pattern": ".[0-9a-z]+$",
       "tabIndex": 0,
     },
     "propTypes": Object {
@@ -2979,6 +2980,9 @@ Map {
       "onAddFiles": Object {
         "type": "func",
       },
+      "pattern": Object {
+        "type": "string",
+      },
       "role": Object {
         "type": "string",
       },
diff --git a/packages/react/src/components/FileUploader/FileUploader-story.js b/packages/react/src/components/FileUploader/FileUploader-story.js
@@ -140,6 +140,10 @@ const props = {
     disabled: boolean('Disabled (disabled)', false),
     role: text('ARIA role of the button (role)', ''),
     tabIndex: number('Tab index (tabIndex)', 0),
+    pattern: text(
+      'Accepted MIME types or file extensions regex pattern (pattern)',
+      undefined
+    ),
     onAddFiles: action('onAddFiles'),
   }),
 };
diff --git a/packages/react/src/components/FileUploader/FileUploaderDropContainer.js b/packages/react/src/components/FileUploader/FileUploaderDropContainer.js
@@ -21,6 +21,7 @@ function FileUploaderDropContainer({
   multiple,
   name,
   onAddFiles,
+  pattern,
   role,
   tabIndex,
   ...rest
@@ -52,7 +53,7 @@ function FileUploaderDropContainer({
     const acceptedTypes = new Set(accept);
     return transferredFiles.reduce((acc, curr) => {
       const { name, type: mimeType = '' } = curr;
-      const fileExtensionRegExp = new RegExp(/\.[0-9a-z]+$/, 'i');
+      const fileExtensionRegExp = new RegExp(pattern, 'i');
       const hasFileExtension = fileExtensionRegExp.test(name);
       if (!hasFileExtension) {
         return acc;
@@ -178,6 +179,11 @@ FileUploaderDropContainer.propTypes = {
    */
   onAddFiles: PropTypes.func,
 
+  /**
+   * Provide a custom regex pattern for the acceptedTypes
+   */
+  pattern: PropTypes.string,
+
   /**
    * Provide an accessibility role for the <FileUploaderButton>
    */
@@ -202,6 +208,7 @@ FileUploaderDropContainer.defaultProps = {
   multiple: false,
   onAddFiles: () => {},
   accept: [],
+  pattern: '.[0-9a-z]+$',
 };
 
 export default FileUploaderDropContainer;
diff --git a/packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js b/packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js
@@ -87,4 +87,92 @@ describe('FileUploaderDropContainer', () => {
       { addedFiles: files }
     );
   });
+
+  it('should mark invalid files using default pattern', () => {
+    const onAddFiles = jest.fn();
+    const { container } = render(
+      <FileUploaderDropContainer onAddFiles={onAddFiles} accept={['.txt']} />
+    );
+    const input = container.querySelector('input');
+
+    const files = [
+      new File(['foo'], 'foo.txt', { type: 'text/plain' }),
+      new File(['bar'], 'bar.a_a', { type: 'text/plain' }),
+      new File(['bar_foo'], 'bar_foo.b-b', { type: 'text/plain' }),
+      new File(['bar-foo'], 'bar-foo.a-b_c', { type: 'text/plain' }),
+    ];
+
+    uploadFiles(input, files);
+
+    expect(onAddFiles).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: {
+          files,
+        },
+      }),
+      { addedFiles: files }
+    );
+
+    expect(onAddFiles).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: {
+          files,
+        },
+      }),
+      {
+        addedFiles: expect.arrayContaining([
+          expect.not.objectContaining({ invalidFileType: true }),
+          expect.objectContaining({ invalidFileType: true }),
+          expect.objectContaining({ invalidFileType: true }),
+          expect.objectContaining({ invalidFileType: true }),
+        ]),
+      }
+    );
+  });
+
+  it('should not mark any invalid files using custom pattern', () => {
+    const onAddFiles = jest.fn();
+    const { container } = render(
+      <FileUploaderDropContainer
+        onAddFiles={onAddFiles}
+        accept={['.txt', '.a_a', '.b-b', '.a-b_c']}
+        pattern=".[0-9a-z-_]+$"
+      />
+    );
+    const input = container.querySelector('input');
+
+    const files = [
+      new File(['foo'], 'foo.txt', { type: 'text/plain' }),
+      new File(['bar'], 'bar.a_a', { type: 'text/plain' }),
+      new File(['bar_foo'], 'bar_foo.b-b', { type: 'text/plain' }),
+      new File(['bar-foo'], 'bar-foo.a-b_c', { type: 'text/plain' }),
+    ];
+
+    uploadFiles(input, files);
+
+    expect(onAddFiles).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: {
+          files,
+        },
+      }),
+      { addedFiles: files }
+    );
+
+    expect(onAddFiles).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: {
+          files,
+        },
+      }),
+      {
+        addedFiles: expect.arrayContaining([
+          expect.not.objectContaining({ invalidFileType: true }),
+          expect.not.objectContaining({ invalidFileType: true }),
+          expect.not.objectContaining({ invalidFileType: true }),
+          expect.not.objectContaining({ invalidFileType: true }),
+        ]),
+      }
+    );
+  });
 });
