import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/FileUpload/file-upload'; import { css } from '@patternfly/react-styles'; import { InputGroup, InputGroupItem } from '../InputGroup'; import { TextInput } from '../TextInput'; import { Button, ButtonVariant } from '../Button'; import { TextArea, TextAreResizeOrientation } from '../TextArea'; import { Spinner, spinnerSize } from '../Spinner'; import { fileReaderType } from '../../helpers/fileUtils'; /** A more customizable file upload component for implementing custom logic. Drag and drop * functionality is not built in by default. */ export interface FileUploadFieldProps extends Omit, 'value'> { /** Flag to allow editing of a text file's contents after it is selected from disk. */ allowEditingUploadedText?: boolean; /** Aria-label for the text area. */ 'aria-label'?: string; /** Text for the browse button. */ browseButtonText?: string; /** ID or ID's of elements that describe the browse button. Typically this should refer * to elements such as helper text when there are file restrictions. */ browseButtonAriaDescribedby?: string; /** Additional children to render after (or instead of) the file preview. */ children?: React.ReactNode; /** Additional classes added to the file upload field container element. */ className?: string; /** Text for the clear button. */ clearButtonText?: string; /** Value to be shown in the read-only filename field. */ filename?: string; /** Aria-label for the read-only filename field. */ filenameAriaLabel?: string; /** Placeholder string to display in the empty filename field. */ filenamePlaceholder?: string; /** Flag to hide the built-in preview of the file (where available). If true, you can use * the children property to render an alternate preview. */ hideDefaultPreview?: boolean; /** Unique id for the text area. Also used to generate ids for accessible labels. */ id: string; /** Name property for the text input. */ name?: string; /** Flag to disable the clear button. */ isClearButtonDisabled?: boolean; /** Flag to show if the field is disabled. */ isDisabled?: boolean; /** Flag to show if a file is being loaded. */ isLoading?: boolean; /** Flag to show if the field is read only. */ isReadOnly?: boolean; /** Flag to show if the field is required. */ isRequired?: boolean; /** Aria-valuetext for the loading spinner. */ spinnerAriaValueText?: string; /** What type of file. Determines what is is expected by the value property (a string for * 'text' and 'dataURL', or a File object otherwise). */ type?: 'text' | 'dataURL'; /** Value to indicate if the field is modified to show that validation state. * If set to success, field will be modified to indicate valid state. * If set to error, field will be modified to indicate error state. */ validated?: 'success' | 'error' | 'default'; /** Value of the file's contents (string if text file, File object otherwise). */ value?: string | File; // Props available in FileUploadField but not FileUpload: /** A reference object to attach to the file upload field container element. */ containerRef?: React.Ref; /** Flag to show if a file is being dragged over the file upload field. */ isDragActive?: boolean; /** A callback for when the browse button is clicked. */ onBrowseButtonClick?: (event: React.MouseEvent) => void; /** A callback for when the clear button is clicked. */ onClearButtonClick?: (event: React.MouseEvent) => void; /** Callback for when focus is lost on the text area field. */ onTextAreaBlur?: (event?: any) => void; /** A callback for when the text area is clicked. Can also be set via the onClick property * of the file upload component. */ onTextAreaClick?: (event: React.MouseEvent) => void; /** Text area text changed. */ onTextChange?: (event: React.ChangeEvent, text: string) => void; /** Placeholder string to display in the empty text area field. */ textAreaPlaceholder?: string; } export const FileUploadField: React.FunctionComponent = ({ id, name, type, value = '', filename = '', onBrowseButtonClick = () => {}, onClearButtonClick = () => {}, onTextAreaClick, onTextChange, onTextAreaBlur, textAreaPlaceholder = '', className = '', isDisabled = false, isReadOnly = false, isLoading = false, spinnerAriaValueText, isRequired = false, isDragActive = false, validated = 'default' as 'success' | 'error' | 'default', 'aria-label': ariaLabel = 'File upload', filenamePlaceholder = 'Drag a file here or browse to upload', filenameAriaLabel = filename ? 'Read only filename' : filenamePlaceholder, browseButtonText = 'Browse...', browseButtonAriaDescribedby, clearButtonText = 'Clear', isClearButtonDisabled = !filename && !value, containerRef = null as React.Ref, allowEditingUploadedText = false, hideDefaultPreview = false, children = null, ...props }: FileUploadFieldProps) => { const onTextAreaChange = (event: React.ChangeEvent, newValue: string) => { onTextChange?.(event, newValue); }; return (
{!hideDefaultPreview && type === fileReaderType.text && ( )} {isLoading && (
)}
{children}
); }; FileUploadField.displayName = 'FileUploadField';