From 2ca13c0a23aaf2d5d05e90897af38080b770cb97 Mon Sep 17 00:00:00 2001
From: Jon Koops <jonkoops@gmail.com>
Date: Fri, 2 Sep 2022 11:23:43 +0200
Subject: [PATCH] Upgrade 'react-dropzone' to latest version

---
 packages/react-code-editor/package.json       |   2 +-
 .../src/components/CodeEditor/CodeEditor.tsx  |   4 +-
 .../__snapshots__/CodeEditor.test.tsx.snap    |   4 +-
 packages/react-core/package.json              |   2 +-
 .../src/components/FileUpload/FileUpload.tsx  | 117 ++++++++----------
 .../__snapshots__/FileUpload.test.tsx.snap    |   2 +-
 .../examples/FileUploadCustomPreview.tsx      |   9 +-
 .../examples/FileUploadSimpleFile.tsx         |   7 +-
 .../examples/FileUploadSimpleText.tsx         |   5 +-
 .../examples/FileUploadTextWithEdits.tsx      |   5 +-
 .../FileUploadTextWithRestrictions.tsx        |   9 +-
 .../MultipleFileUpload/MultipleFileUpload.tsx |  67 +++++-----
 .../MultipleFileUpload.test.tsx.snap          |   6 +-
 .../examples/MultipleFileUploadBasic.tsx      |   7 +-
 .../MultipleFileUploadRejectedFile.tsx        |  19 ++-
 yarn.lock                                     |  54 ++++----
 16 files changed, 148 insertions(+), 171 deletions(-)

diff --git a/packages/react-code-editor/package.json b/packages/react-code-editor/package.json
index 25f1f58e098..6864f1d8610 100644
--- a/packages/react-code-editor/package.json
+++ b/packages/react-code-editor/package.json
@@ -33,7 +33,7 @@
     "@patternfly/react-core": "^4.236.3",
     "@patternfly/react-icons": "^4.87.3",
     "@patternfly/react-styles": "^4.86.3",
-    "react-dropzone": "9.0.0",
+    "react-dropzone": "^14.2.2",
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
index 61e2fae2fcf..b87658a9069 100644
--- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
@@ -23,7 +23,7 @@ import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import Dropzone from 'react-dropzone';
+import Dropzone, { FileRejection } from 'react-dropzone';
 import { CodeEditorContext } from './CodeEditorUtils';
 
 export interface Shortcut {
@@ -426,7 +426,7 @@ export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState
     }
   };
 
-  onDropRejected = (rejectedFiles: File[]) => {
+  onDropRejected = (rejectedFiles: FileRejection[]) => {
     if (rejectedFiles.length > 0) {
       // eslint-disable-next-line no-console
       console.error('There was an error accepting that dropped file'); // TODO
diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
index 37266ab9584..62ff4d89587 100644
--- a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
+++ b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
@@ -6,7 +6,8 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
     class="pf-c-code-editor pf-m-read-only"
   >
     <div
-      class="pf-c-file-upload undefined false"
+      class="pf-c-file-upload false false"
+      role="presentation"
       tabindex="0"
     >
       <div
@@ -119,7 +120,6 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
         class="pf-c-code-editor__main"
       >
         <input
-          autocomplete="off"
           style="display: none;"
           tabindex="-1"
           type="file"
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index be04fbe4363..8900d9231f2 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -48,7 +48,7 @@
     "@patternfly/react-styles": "^4.86.3",
     "@patternfly/react-tokens": "^4.88.3",
     "focus-trap": "6.9.2",
-    "react-dropzone": "9.0.0",
+    "react-dropzone": "^14.2.2",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
diff --git a/packages/react-core/src/components/FileUpload/FileUpload.tsx b/packages/react-core/src/components/FileUpload/FileUpload.tsx
index 38badb8a32b..6e9d2dadc80 100644
--- a/packages/react-core/src/components/FileUpload/FileUpload.tsx
+++ b/packages/react-core/src/components/FileUpload/FileUpload.tsx
@@ -1,13 +1,9 @@
 import * as React from 'react';
-import Dropzone, { DropzoneProps, DropzoneInputProps, DropFileEventHandler } from 'react-dropzone';
+import { DropEvent, DropzoneInputProps, DropzoneOptions, FileRejection, useDropzone } from 'react-dropzone';
 import { FileUploadField, FileUploadFieldProps } from './FileUploadField';
 import { readFile, fileReaderType } from '../../helpers/fileUtils';
 import { fromEvent } from 'file-selector';
 
-interface DropzoneInputPropsWithRef extends DropzoneInputProps {
-  ref: React.RefCallback<HTMLInputElement>; // Working around an issue in react-dropzone 9.0.0's types. Should not be necessary in later versions.
-}
-
 export interface FileUploadProps
   extends Omit<
     FileUploadFieldProps,
@@ -29,11 +25,11 @@ export interface FileUploadProps
     filename: string,
     event:
       | React.MouseEvent<HTMLButtonElement, MouseEvent> // Clear button was clicked
-      | React.DragEvent<HTMLElement> // User dragged/dropped a file
       | React.ChangeEvent<HTMLElement> // User typed in the TextArea
+      | DropEvent
   ) => void;
   /** Change event emitted from the hidden \<input type="file" \> field associated with the component  */
-  onFileInputChange?: (event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>, file: File) => void;
+  onFileInputChange?: (event: DropEvent, file: File) => void;
   /** Callback for clicking on the FileUploadField text area. By default, prevents a click in the text area from opening file dialog. */
   onClick?: (event: React.MouseEvent) => void;
   /** Additional classes added to the FileUpload container element. */
@@ -80,7 +76,7 @@ export interface FileUploadProps
   /** A callback for when the FileReader API fails */
   onReadFailed?: (error: DOMException, fileHandle: File) => void;
   /** Optional extra props to customize react-dropzone. */
-  dropzoneProps?: DropzoneProps;
+  dropzoneProps?: DropzoneOptions;
   /** Clear button was clicked */
   onClearClick?: React.MouseEventHandler<HTMLButtonElement>;
   /** Text area text changed */
@@ -107,7 +103,7 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
   dropzoneProps = {},
   ...props
 }: FileUploadProps) => {
-  const onDropAccepted: DropFileEventHandler = (acceptedFiles, event) => {
+  const onDropAccepted = (acceptedFiles: File[], event: DropEvent) => {
     if (acceptedFiles.length > 0) {
       const fileHandle = acceptedFiles[0];
       if (event.type === 'drop') {
@@ -135,71 +131,68 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
     dropzoneProps.onDropAccepted && dropzoneProps.onDropAccepted(acceptedFiles, event);
   };
 
-  const onDropRejected: DropFileEventHandler = (rejectedFiles, event) => {
+  const onDropRejected = (rejectedFiles: FileRejection[], event: DropEvent) => {
     if (rejectedFiles.length > 0) {
-      onChange('', rejectedFiles[0].name, event);
+      onChange('', rejectedFiles[0].file.name, event);
     }
     dropzoneProps.onDropRejected && dropzoneProps.onDropRejected(rejectedFiles, event);
   };
 
-  const fileInputRef = React.useRef<HTMLInputElement>();
-  const setFileValue = (filename: string) => {
-    fileInputRef.current.value = filename;
-  };
-
   const onClearButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     onChange('', '', event);
     onClearClick?.(event);
     setFileValue(null);
   };
 
-  return (
-    <Dropzone multiple={false} {...dropzoneProps} onDropAccepted={onDropAccepted} onDropRejected={onDropRejected}>
-      {({ getRootProps, getInputProps, isDragActive, open }) => {
-        const oldInputProps = getInputProps();
-        const inputProps: DropzoneInputProps = {
-          ...oldInputProps,
-          onChange: async (e: React.ChangeEvent<HTMLInputElement>) => {
-            oldInputProps.onChange?.(e);
-            const files = await fromEvent(e.nativeEvent);
-            if (files.length === 1) {
-              onFileInputChange?.(e, files[0] as File);
-            }
-          }
-        };
+  const { getRootProps, getInputProps, isDragActive, open, inputRef } = useDropzone({
+    multiple: false,
+    ...dropzoneProps,
+    onDropAccepted,
+    onDropRejected
+  });
+
+  const setFileValue = (filename: string) => {
+    inputRef.current.value = filename;
+  };
 
-        return (
-          <FileUploadField
-            {...getRootProps({
-              ...props,
-              refKey: 'containerRef',
-              onClick: event => event.preventDefault()
-            })}
-            tabIndex={null} // Omit the unwanted tabIndex from react-dropzone's getRootProps
-            id={id}
-            type={type}
-            filename={filename}
-            value={value}
-            onChange={onChange}
-            isDragActive={isDragActive}
-            onBrowseButtonClick={open}
-            onClearButtonClick={onClearButtonClick}
-            onTextAreaClick={onClick}
-            onTextChange={onTextChange}
-          >
-            <input
-              /* hidden, necessary for react-dropzone */
-              {...inputProps}
-              ref={input => {
-                fileInputRef.current = input;
-                (inputProps as DropzoneInputPropsWithRef).ref(input);
-              }}
-            />
-            {children}
-          </FileUploadField>
-        );
-      }}
-    </Dropzone>
+  const oldInputProps = getInputProps();
+  const inputProps: DropzoneInputProps = {
+    ...oldInputProps,
+    onChange: async (e: React.ChangeEvent<HTMLInputElement>) => {
+      oldInputProps.onChange?.(e);
+      const files = await fromEvent(e.nativeEvent);
+      if (files.length === 1) {
+        onFileInputChange?.(e, files[0] as File);
+      }
+    }
+  };
+
+  return (
+    <FileUploadField
+      {...getRootProps({
+        ...props,
+        refKey: 'containerRef',
+        onClick: event => event.preventDefault()
+      })}
+      tabIndex={null} // Omit the unwanted tabIndex from react-dropzone's getRootProps
+      id={id}
+      type={type}
+      filename={filename}
+      value={value}
+      onChange={onChange}
+      isDragActive={isDragActive}
+      onBrowseButtonClick={open}
+      onClearButtonClick={onClearButtonClick}
+      onTextAreaClick={onClick}
+      onTextChange={onTextChange}
+    >
+      <input
+        /* hidden, necessary for react-dropzone */
+        {...inputProps}
+        ref={inputRef}
+      />
+      {children}
+    </FileUploadField>
   );
 };
 FileUpload.displayName = 'FileUpload';
diff --git a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
index cf9a4495356..5574744392b 100644
--- a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
+++ b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`simple fileupload 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-file-upload"
+    role="presentation"
   >
     <div
       class="pf-c-file-upload__file-select"
@@ -63,7 +64,6 @@ exports[`simple fileupload 1`] = `
       />
     </div>
     <input
-      autocomplete="off"
       style="display: none;"
       tabindex="-1"
       type="file"
diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadCustomPreview.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadCustomPreview.tsx
index 773ab29d88b..995ef0895d0 100644
--- a/packages/react-core/src/components/FileUpload/examples/FileUploadCustomPreview.tsx
+++ b/packages/react-core/src/components/FileUpload/examples/FileUploadCustomPreview.tsx
@@ -3,20 +3,17 @@ import { FileUpload } from '@patternfly/react-core';
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(null);
+  const [value, setValue] = React.useState<File>();
   const [filename, setFilename] = React.useState('');
 
-  const handleFileInputChange = (
-    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File
-  ) => {
+  const handleFileInputChange = (_, file: File) => {
     setValue(file);
     setFilename(file.name);
   };
 
   const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     setFilename('');
-    setValue('');
+    setValue(undefined);
   };
 
   return (
diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleFile.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleFile.tsx
index ff67bc0259a..f6388a51034 100644
--- a/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleFile.tsx
+++ b/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleFile.tsx
@@ -2,13 +2,10 @@ import React from 'react';
 import { FileUpload } from '@patternfly/react-core';
 
 export const SimpleFileUpload: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(null);
+  const [value, setValue] = React.useState('');
   const [filename, setFilename] = React.useState('');
 
-  const handleFileInputChange = (
-    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File
-  ) => {
+  const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
   };
 
diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleText.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleText.tsx
index abbe37f44c0..3ad862a827a 100644
--- a/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleText.tsx
+++ b/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleText.tsx
@@ -6,10 +6,7 @@ export const SimpleTextFileUpload: React.FunctionComponent = () => {
   const [filename, setFilename] = React.useState('');
   const [isLoading, setIsLoading] = React.useState(false);
 
-  const handleFileInputChange = (
-    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File
-  ) => {
+  const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
   };
 
diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx
index e0511ef8dad..cc666bcf8fb 100644
--- a/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx
+++ b/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx
@@ -6,10 +6,7 @@ export const TextFileWithEditsAllowed: React.FunctionComponent = () => {
   const [filename, setFilename] = React.useState('');
   const [isLoading, setIsLoading] = React.useState(false);
 
-  const handleFileInputChange = (
-    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File
-  ) => {
+  const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
   };
 
diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx
index c56ae251d94..c84445b95ca 100644
--- a/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx
+++ b/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx
@@ -7,10 +7,7 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
   const [isLoading, setIsLoading] = React.useState(false);
   const [isRejected, setIsRejected] = React.useState(false);
 
-  const handleFileInputChange = (
-    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File
-  ) => {
+  const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
   };
 
@@ -24,7 +21,7 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
     setIsRejected(false);
   };
 
-  const handleFileRejected = (_rejectedFiles: File[], _event: React.DragEvent<HTMLElement>) => {
+  const handleFileRejected = () => {
     setIsRejected(true);
   };
 
@@ -58,7 +55,7 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
           onClearClick={handleClear}
           isLoading={isLoading}
           dropzoneProps={{
-            accept: '.csv',
+            accept: { 'text/csv': ['.csv'] },
             maxSize: 1024,
             onDropRejected: handleFileRejected
           }}
diff --git a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUpload.tsx b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUpload.tsx
index d8386343677..6d895828f7c 100644
--- a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUpload.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUpload.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Dropzone, { DropzoneProps, DropFileEventHandler } from 'react-dropzone';
+import { DropEvent, DropzoneOptions, useDropzone } from 'react-dropzone';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
 
@@ -14,7 +14,7 @@ export interface MultipleFileUploadProps extends Omit<React.HTMLProps<HTMLDivEle
   /** Class to add to outer div */
   className?: string;
   /** Optional extra props to customize react-dropzone. */
-  dropzoneProps?: DropzoneProps;
+  dropzoneProps?: DropzoneOptions;
   /** Flag setting the component to horizontal styling mode */
   isHorizontal?: boolean;
   /** When files are dropped or uploaded this callback will be called with all accepted files */
@@ -33,47 +33,42 @@ export const MultipleFileUpload: React.FunctionComponent<MultipleFileUploadProps
   onFileDrop = () => {},
   ...props
 }: MultipleFileUploadProps) => {
-  const onDropAccepted: DropFileEventHandler = (acceptedFiles: File[], event) => {
+  const onDropAccepted = (acceptedFiles: File[], event: DropEvent) => {
     onFileDrop(acceptedFiles);
     // allow users to set a custom drop accepted handler rather than using on data change
     dropzoneProps.onDropAccepted && dropzoneProps.onDropAccepted(acceptedFiles, event);
   };
 
-  const onDropRejected: DropFileEventHandler = (rejectedFiles, event) => {
-    dropzoneProps.onDropRejected && dropzoneProps?.onDropRejected(rejectedFiles, event);
-  };
+  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+    multiple: true,
+    ...dropzoneProps,
+    onDropAccepted
+  });
 
-  return (
-    <Dropzone multiple={true} {...dropzoneProps} onDropAccepted={onDropAccepted} onDropRejected={onDropRejected}>
-      {({ getRootProps, getInputProps, isDragActive, open }) => {
-        const rootProps = getRootProps({
-          ...props,
-          onClick: event => event.preventDefault() // Prevents clicking TextArea from opening file dialog
-        });
-        const inputProps = getInputProps();
+  const rootProps = getRootProps({
+    ...props,
+    onClick: event => event.preventDefault() // Prevents clicking TextArea from opening file dialog
+  });
 
-        return (
-          <MultipleFileUploadContext.Provider value={{ open }}>
-            <div
-              className={css(
-                styles.multipleFileUpload,
-                isDragActive && styles.modifiers.dragOver,
-                isHorizontal && styles.modifiers.horizontal,
-                className
-              )}
-              {...rootProps}
-              {...props}
-            >
-              <input
-                /* hidden, necessary for react-dropzone */
-                {...inputProps}
-              />
-              {children}
-            </div>
-          </MultipleFileUploadContext.Provider>
-        );
-      }}
-    </Dropzone>
+  return (
+    <MultipleFileUploadContext.Provider value={{ open }}>
+      <div
+        className={css(
+          styles.multipleFileUpload,
+          isDragActive && styles.modifiers.dragOver,
+          isHorizontal && styles.modifiers.horizontal,
+          className
+        )}
+        {...rootProps}
+        {...props}
+      >
+        <input
+          /* hidden, necessary for react-dropzone */
+          {...getInputProps()}
+        />
+        {children}
+      </div>
+    </MultipleFileUploadContext.Provider>
   );
 };
 
diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUpload.test.tsx.snap b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUpload.test.tsx.snap
index 95a2e413ca6..2c72bd45463 100644
--- a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUpload.test.tsx.snap
+++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUpload.test.tsx.snap
@@ -4,10 +4,10 @@ exports[`MultipleFileUpload renders custom class names 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-multiple-file-upload test"
+    role="presentation"
     tabindex="0"
   >
     <input
-      autocomplete="off"
       multiple=""
       style="display: none;"
       tabindex="-1"
@@ -22,10 +22,10 @@ exports[`MultipleFileUpload renders with expected class names when horizontal 1`
 <DocumentFragment>
   <div
     class="pf-c-multiple-file-upload pf-m-horizontal"
+    role="presentation"
     tabindex="0"
   >
     <input
-      autocomplete="off"
       multiple=""
       style="display: none;"
       tabindex="-1"
@@ -40,10 +40,10 @@ exports[`MultipleFileUpload renders with expected class names when not horizonta
 <DocumentFragment>
   <div
     class="pf-c-multiple-file-upload"
+    role="presentation"
     tabindex="0"
   >
     <input
-      autocomplete="off"
       multiple=""
       style="display: none;"
       tabindex="-1"
diff --git a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
index f18a8ace5c9..aea0ad6e291 100644
--- a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
+++ b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx
@@ -86,7 +86,12 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
       <MultipleFileUpload
         onFileDrop={handleFileDrop}
         dropzoneProps={{
-          accept: 'image/jpeg, application/msword, application/pdf, image/png'
+          accept: {
+            'image/jpeg': ['.jpg', '.jpeg'],
+            'application/msword': ['.doc'],
+            'application/pdf': ['.pdf'],
+            'image/png': ['.png']
+          }
         }}
         isHorizontal={isHorizontal}
       >
diff --git a/packages/react-core/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx b/packages/react-core/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx
index d1770c8dcc3..c937027ee56 100644
--- a/packages/react-core/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx
+++ b/packages/react-core/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { FileRejection } from 'react-dropzone';
 import {
   MultipleFileUpload,
   MultipleFileUploadMain,
@@ -82,11 +83,14 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   };
 
   // dropzone prop that communicates to the user that files they've attempted to upload are not an appropriate type
-  const handleDropRejected = (files: File[], _event: React.DragEvent<HTMLElement>) => {
-    if (files.length === 1) {
-      setModalText(`${files[0].name} is not an accepted file type`);
+  const handleDropRejected = (fileRejections: FileRejection[]) => {
+    if (fileRejections.length === 1) {
+      setModalText(`${fileRejections[0].file.name} is not an accepted file type`);
     } else {
-      const rejectedMessages = files.reduce((acc, file) => (acc += `${file.name}, `), '');
+      const rejectedMessages = fileRejections.reduce(
+        (acc, fileRejection) => (acc += `${fileRejection.file.name}, `),
+        ''
+      );
       setModalText(`${rejectedMessages}are not accepted file types`);
     }
   };
@@ -98,7 +102,12 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
       <MultipleFileUpload
         onFileDrop={handleFileDrop}
         dropzoneProps={{
-          accept: 'image/jpeg, application/msword, application/pdf, image/png',
+          accept: {
+            'image/jpeg': ['.jpg', '.jpeg'],
+            'application/msword': ['.doc'],
+            'application/pdf': ['.pdf'],
+            'image/png': ['.png']
+          },
           onDropRejected: handleDropRejected
         }}
         isHorizontal={isHorizontal}
diff --git a/yarn.lock b/yarn.lock
index 40dccfad01e..1bb9756c454 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5002,11 +5002,10 @@ atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz"
 
-attr-accept@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/attr-accept/-/attr-accept-1.1.3.tgz"
-  dependencies:
-    core-js "^2.5.0"
+attr-accept@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
+  integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
 
 autoprefixer@9.8.6:
   version "9.8.6"
@@ -6676,10 +6675,6 @@ core-js-pure@^3.0.0:
   version "3.6.4"
   resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.6.4.tgz"
 
-core-js@^2.5.0:
-  version "2.6.10"
-  resolved "https://registry.npmjs.org/core-js/-/core-js-2.6.10.tgz"
-
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
@@ -8643,11 +8638,12 @@ file-saver@1.3.8, file-saver@^1.3.8:
   version "1.3.8"
   resolved "https://registry.npmjs.org/file-saver/-/file-saver-1.3.8.tgz"
 
-file-selector@^0.1.8:
-  version "0.1.12"
-  resolved "https://registry.npmjs.org/file-selector/-/file-selector-0.1.12.tgz"
+file-selector@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.6.0.tgz#fa0a8d9007b829504db4d07dd4de0310b65287dc"
+  integrity sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==
   dependencies:
-    tslib "^1.9.0"
+    tslib "^2.4.0"
 
 file-uri-to-path@1.0.0:
   version "1.0.0"
@@ -13901,13 +13897,6 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types-extra@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz"
-  dependencies:
-    react-is "^16.3.2"
-    warning "^4.0.0"
-
 prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
@@ -14209,14 +14198,14 @@ react-dom@^17.0.0:
     object-assign "^4.1.1"
     scheduler "^0.20.1"
 
-react-dropzone@9.0.0:
-  version "9.0.0"
-  resolved "https://registry.npmjs.org/react-dropzone/-/react-dropzone-9.0.0.tgz"
+react-dropzone@^14.2.2:
+  version "14.2.2"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.2.tgz#a75a0676055fe9e2cb78578df4dedb4c42b54f98"
+  integrity sha512-5oyGN/B5rNhop2ggUnxztXBQ6q6zii+OMEftPzsxAR2hhpVWz0nAV+3Ktxo2h5bZzdcCKrpd8bfWAVsveIBM+w==
   dependencies:
-    attr-accept "^1.1.3"
-    file-selector "^0.1.8"
-    prop-types "^15.6.2"
-    prop-types-extra "^1.1.0"
+    attr-accept "^2.2.2"
+    file-selector "^0.6.0"
+    prop-types "^15.8.1"
 
 react-fast-compare@^2.0.0:
   version "2.0.4"
@@ -14227,10 +14216,6 @@ react-is@^16.13.1, react-is@^16.6.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^16.3.2:
-  version "16.13.0"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.0.tgz"
-
 react-is@^16.7.0, react-is@^16.8.1:
   version "16.11.0"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.11.0.tgz"
@@ -16581,6 +16566,11 @@ tslib@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz"
 
+tslib@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tsscmp@1.0.6:
   version "1.0.6"
   resolved "https://registry.npmjs.org/tsscmp/-/tsscmp-1.0.6.tgz"
@@ -17427,7 +17417,7 @@ walker@^1.0.7:
   dependencies:
     makeerror "1.0.x"
 
-warning@^4.0.0, warning@^4.0.3:
+warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz"
   dependencies: