Fix file rejection behavior and add example of custom dropzoneProps

Author: mturley

packages/react-core/src/components/FileUpload/FileUpload.tsx

@@ -67,7 +67,9 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
   };
 
   const onDropRejected = (rejectedFiles: File[], event: React.DragEvent<HTMLElement>) => {
-    onChange('', '', event);
+    if (rejectedFiles.length > 0) {
+      onChange('', rejectedFiles[0].name, event);
+    }
     dropzoneProps.onDropRejected && dropzoneProps.onDropRejected(rejectedFiles, event);
   };
 

packages/react-core/src/components/FileUpload/FileUploadField.tsx

@@ -45,6 +45,8 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLFormEleme
   browseButtonText?: string;
   /** Text for the Clear button */
   clearButtonText?: string;
+  /** Flag to disable the Clear button */
+  clearButtonDisabled?: boolean;
   /** Flag to hide the TextArea. Use with children to add custom support for non-text files. */
   hideTextArea?: boolean;
   /** Additional children to render after (or instead of) the TextArea. */
@@ -74,6 +76,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
   filenameAriaLabel = filename ? 'Read only filename' : filenamePlaceholder,
   browseButtonText = 'Browse...',
   clearButtonText = 'Clear',
+  clearButtonDisabled = !filename && !value,
   containerRef = null as React.Ref<any>,
   children = null,
   hideTextArea = false,
@@ -105,10 +108,19 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
             aria-describedby={`${id}-browse-button`}
             value={filename}
           />
-          <Button id={`${id}-browse-button`} variant={ButtonVariant.control} onClick={onBrowseButtonClick}>
+          <Button
+            id={`${id}-browse-button`}
+            variant={ButtonVariant.control}
+            onClick={onBrowseButtonClick}
+            isDisabled={isDisabled}
+          >
             {browseButtonText}
           </Button>
-          <Button variant={ButtonVariant.control} isDisabled={!value} onClick={onClearButtonClick}>
+          <Button
+            variant={ButtonVariant.control}
+            isDisabled={isDisabled || clearButtonDisabled}
+            onClick={onClearButtonClick}
+          >
             {clearButtonText}
           </Button>
         </InputGroup>

packages/react-core/src/components/FileUpload/examples/FileUpload.md

@@ -7,11 +7,11 @@ section: 'components'
 beta: true
 ---
 
-import { FileUpload } from '@patternfly/react-core';
+import { FileUpload, Form, FormGroup } from '@patternfly/react-core';
 
 ## Examples
 
-The basic `FileUpload` component can handle simple text files, loading them into memory and passing their contents as a string to an `onChange` prop. It uses the `react-dropzone` library to provide the file browse dialog and drag/drop behavior. Any props accepted by `react-dropzone` can be passed as a `dropzoneProps` object in order to customize the behavior of the Dropzone.
+The basic `FileUpload` component can handle simple text files via browse or drag-and-drop, loading them into memory and passing their contents as a string to an `onChange` prop.
 
 ```js title=Simple-text-file isBeta
 import React from 'react';
@@ -33,7 +33,55 @@ class SimpleTextFileUpload extends React.Component {
 }
 ```
 
-`FileUpload` is a thin wrapper around the `FileUploadField` presentational component. If you need to implement your own logic for reading or displaying a file, you can instead render a `FileUploadField` directly, which requires additional props (you must implement your own `onBrowseButtonClick` handler, etc).
+Any [props accepted by `react-dropzone`'s `Dropzone` component](https://react-dropzone.js.org/#!/Dropzone) can be passed as a `dropzoneProps` object in order to customize the behavior of the Dropzone, such as restricting the size and type of files allowed. This example will only accept CSV files smaller than 1 KB.
+
+```js title=Simple-text-file-with-restrictions isBeta
+import React from 'react';
+import { FileUpload, Form, FormGroup } from '@patternfly/react-core';
+
+class SimpleTextFileUploadWithRestrictions extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { value: '', filename: '', rejected: false };
+    this.handleFileChange = (value, filename, event) => {
+      this.setState({ value, filename, rejected: false });
+    };
+    this.handleFileRejected = (rejectedFiles, event) => {
+      this.setState({ rejected: true });
+    };
+  }
+
+  render() {
+    const { value, filename, rejected } = this.state;
+    return (
+      <Form>
+        <FormGroup
+          fieldId="simple-text-file-with-restrictions"
+          helperText="Upload a CSV file"
+          helperTextInvalid="Must be a CSV file no larger than 1 KB"
+          validated={rejected ? 'error' : 'default'}
+        >
+          <FileUpload
+            id="simple-text-file-with-restrictions"
+            value={value}
+            filename={filename}
+            onChange={this.handleFileChange}
+            dropzoneProps={{
+              accept: '.csv',
+              maxSize: 1024,
+              onDropAccepted: this.handleFileAccepted,
+              onDropRejected: this.handleFileRejected
+            }}
+            validated={rejected ? 'error' : 'default'}
+          />
+        </FormGroup>
+      </Form>
+    );
+  }
+}
+```
+
+`FileUpload` is a thin wrapper around the `FileUploadField` presentational component. If you need to implement your own logic for accepting, reading or displaying files, you can instead render a `FileUploadField` directly, which requires additional props (e.g. `onBrowseButtonClick`, `isDragActive`).
 
 ```js title=Custom-file-upload isBeta
 import React from 'react';

packages/react-core/src/helpers/fileUtils.ts

@@ -4,6 +4,7 @@
  *
  * @param {File} fileHandle - File object to read
  */
+// TODO handle the loading spinner case?
 export function readTextFile(fileHandle: File) {
   return new Promise((resolve, reject) => {
     if (fileHandle) {