fix(react): adjust validation logic for files uploaded (#11361)

* chore(react): add mime-types

* fix(react): adjust validation logic for files uploaded

* chore(react): add test for case insensitive files

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/src/components/FileUploader/FileUploader.js

@@ -23,13 +23,13 @@ export default class FileUploader extends React.Component {
     accept: PropTypes.arrayOf(PropTypes.string),
 
     /**
-     * Specify the type of the <FileUploaderButton>
+     * Specify the type of the `<FileUploaderButton>`
      */
     buttonKind: PropTypes.oneOf(ButtonKinds),
 
     /**
      * Provide the label text to be read by screen readers when interacting with
-     * the <FileUploaderButton>
+     * the `<FileUploaderButton>`
      */
     buttonLabel: PropTypes.string,
 
@@ -62,7 +62,7 @@ export default class FileUploader extends React.Component {
     labelDescription: PropTypes.string,
 
     /**
-     * Specify the title text of this <FileUploader>
+     * Specify the title text of this `<FileUploader>`
      */
     labelTitle: PropTypes.string,
 

packages/react/src/components/FileUploader/FileUploaderButton.js

@@ -148,12 +148,12 @@ FileUploaderButton.propTypes = {
   multiple: PropTypes.bool,
 
   /**
-   * Provide a name for the underlying <input> node
+   * Provide a name for the underlying `<input>` node
    */
   name: PropTypes.string,
 
   /**
-   * Provide an optional `onChange` hook that is called each time the <input>
+   * Provide an optional `onChange` hook that is called each time the `<input>`
    * value changes
    */
   onChange: PropTypes.func,
@@ -165,7 +165,7 @@ FileUploaderButton.propTypes = {
   onClick: PropTypes.func,
 
   /**
-   * Provide an accessibility role for the <FileUploaderButton>
+   * Provide an accessibility role for the `<FileUploaderButton>`
    */
   role: PropTypes.string,
 
@@ -178,7 +178,7 @@ FileUploaderButton.propTypes = {
     : PropTypes.oneOf(['default', 'field', 'small', 'sm', 'md', 'lg']),
 
   /**
-   * Provide a custom tabIndex value for the <FileUploaderButton>
+   * Provide a custom tabIndex value for the `<FileUploaderButton>`
    */
   tabIndex: PropTypes.number,
 };

packages/react/src/components/FileUploader/FileUploaderDropContainer.js

@@ -59,9 +59,14 @@ function FileUploaderDropContainer({
         return acc;
       }
       const [fileExtension] = name.match(fileExtensionRegExp);
-      if (acceptedTypes.has(mimeType) || acceptedTypes.has(fileExtension)) {
+
+      if (
+        acceptedTypes.has(mimeType) ||
+        acceptedTypes.has(fileExtension.toLowerCase())
+      ) {
         return acc.concat([curr]);
       }
+
       curr.invalidFileType = true;
       return acc.concat([curr]);
     }, []);
@@ -185,12 +190,12 @@ FileUploaderDropContainer.propTypes = {
   pattern: PropTypes.string,
 
   /**
-   * Provide an accessibility role for the <FileUploaderButton>
+   * Provide an accessibility role for the `<FileUploaderButton>`
    */
   role: PropTypes.string,
 
   /**
-   * Provide a custom tabIndex value for the <FileUploaderButton>
+   * Provide a custom tabIndex value for the `<FileUploaderButton>`
    */
   tabIndex: PropTypes.number,
 };

packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js

@@ -130,6 +130,44 @@ describe('FileUploaderDropContainer', () => {
     );
   });
 
+  it('should be case insensitive when marking files invalid', () => {
+    const onAddFiles = jest.fn();
+    const { container } = render(
+      <FileUploaderDropContainer onAddFiles={onAddFiles} accept={['.jpeg']} />
+    );
+    const input = container.querySelector('input');
+
+    const files = [
+      new File(['foo'], 'foo.JPEG', { type: 'image/jpeg' }),
+      new File(['bar'], 'bar.a_a', { 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: false }),
+          expect.objectContaining({ invalidFileType: true }),
+        ]),
+      }
+    );
+  });
+
   it('should not mark any invalid files using custom pattern', () => {
     const onAddFiles = jest.fn();
     const { container } = render(

packages/react/src/components/FileUploader/next/stories/drop-container.js

@@ -7,11 +7,10 @@
 
 import React, { useState, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
-import {
-  FileUploaderItem,
-  FileUploaderDropContainer,
-  FormItem,
-} from 'carbon-components-react';
+import FileUploaderItem from '../../FileUploaderItem';
+import FileUploaderDropContainer from '../../FileUploaderDropContainer';
+import FormItem from '../../../FormItem';
+
 // import uid from '../../../tools/uniqueId';
 import '../FileUploader-story.scss';