diff --git a/packages/react-core/src/components/FileUpload/FileUpload.tsx b/packages/react-core/src/components/FileUpload/FileUpload.tsx index df2b34a5816..032bea86611 100644 --- a/packages/react-core/src/components/FileUpload/FileUpload.tsx +++ b/packages/react-core/src/components/FileUpload/FileUpload.tsx @@ -47,17 +47,6 @@ export interface FileUploadProps isReadOnly?: boolean; /** Flag to show if the field is required. */ isRequired?: boolean; - /** @deprecated A callback for when the file contents changes. Please instead use - * onFileInputChange, onTextChange, onDataChange, and onClearClick individually. - */ - onChange?: ( - value: string | File, - filename: string, - event: - | React.MouseEvent // Clear button was clicked - | React.DragEvent // User dragged/dropped a file - | React.ChangeEvent // User typed in the TextArea - ) => void; /** Callback for clicking on the file upload field text area. By default, prevents a click * in the text area from opening file dialog. */ @@ -66,7 +55,7 @@ export interface FileUploadProps onFileInputChange?: (event: React.ChangeEvent | React.DragEvent, file: File) => void; /** Aria-valuetext for the loading spinner. */ spinnerAriaValueText?: string; - /** What type of file. Determines what is passed to the onChange property and what is + /** What type of file. Determines whether 'onDataChange` is called and what is * expected by the value property (a string for 'text' and 'dataURL', or a File object otherwise. */ type?: 'text' | 'dataURL'; @@ -102,7 +91,6 @@ export const FileUpload: React.FunctionComponent = ({ value = type === fileReaderType.text || type === fileReaderType.dataURL ? '' : null, filename = '', children = null, - onChange = () => {}, onFileInputChange = null, onReadStarted = () => {}, onReadFinished = () => {}, @@ -121,31 +109,23 @@ export const FileUpload: React.FunctionComponent = ({ onFileInputChange?.(event, fileHandle); } if (type === fileReaderType.text || type === fileReaderType.dataURL) { - onChange('', fileHandle.name, event); // Show the filename while reading onReadStarted(fileHandle); readFile(fileHandle, type as fileReaderType) .then(data => { onReadFinished(fileHandle); - onChange(data as string, fileHandle.name, event); onDataChange?.(data as string); }) .catch((error: DOMException) => { onReadFailed(error, fileHandle); onReadFinished(fileHandle); - onChange('', '', event); // Clear the filename field on a failure onDataChange?.(''); }); - } else { - onChange(fileHandle, fileHandle.name, event); } } dropzoneProps.onDropAccepted && dropzoneProps.onDropAccepted(acceptedFiles, event); }; const onDropRejected: DropFileEventHandler = (rejectedFiles, event) => { - if (rejectedFiles.length > 0) { - onChange('', rejectedFiles[0].name, event); - } dropzoneProps.onDropRejected && dropzoneProps.onDropRejected(rejectedFiles, event); }; @@ -155,7 +135,6 @@ export const FileUpload: React.FunctionComponent = ({ }; const onClearButtonClick = (event: React.MouseEvent) => { - onChange('', '', event); onClearClick?.(event); setFileValue(null); }; @@ -187,7 +166,6 @@ export const FileUpload: React.FunctionComponent = ({ type={type} filename={filename} value={value} - onChange={onChange} isDragActive={isDragActive} onBrowseButtonClick={open} onClearButtonClick={onClearButtonClick} diff --git a/packages/react-core/src/components/FileUpload/FileUploadField.tsx b/packages/react-core/src/components/FileUpload/FileUploadField.tsx index 808dde920a6..fa5897e37db 100644 --- a/packages/react-core/src/components/FileUpload/FileUploadField.tsx +++ b/packages/react-core/src/components/FileUpload/FileUploadField.tsx @@ -12,7 +12,7 @@ import { fileReaderType } from '../../helpers/fileUtils'; * functionality is not built in by default. */ -export interface FileUploadFieldProps extends Omit, 'value' | 'onChange'> { +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. */ @@ -47,14 +47,6 @@ export interface FileUploadFieldProps extends Omit // User typed in the TextArea - | React.MouseEvent // User clicked Clear button - ) => void; /** Aria-valuetext for the loading spinner. */ spinnerAriaValueText?: string; /** What type of file. Determines what is is expected by the value property (a string for @@ -95,7 +87,6 @@ export const FileUploadField: React.FunctionComponent = ({ type, value = '', filename = '', - onChange = () => {}, onBrowseButtonClick = () => {}, onClearButtonClick = () => {}, onTextAreaClick, @@ -123,8 +114,7 @@ export const FileUploadField: React.FunctionComponent = ({ ...props }: FileUploadFieldProps) => { - const onTextAreaChange = (newValue: string, event: React.ChangeEvent) => { - onChange(newValue, filename, event); + const onTextAreaChange = (newValue: string) => { onTextChange?.(newValue); }; return ( diff --git a/packages/react-core/src/components/FileUpload/__tests__/FileUpload.test.tsx b/packages/react-core/src/components/FileUpload/__tests__/FileUpload.test.tsx index 077e001ef15..369ab6c089b 100644 --- a/packages/react-core/src/components/FileUpload/__tests__/FileUpload.test.tsx +++ b/packages/react-core/src/components/FileUpload/__tests__/FileUpload.test.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; import { render } from '@testing-library/react'; test('simple fileupload', () => { - const changeHandler = jest.fn(); const readStartedHandler = jest.fn(); const readFinishedHandler = jest.fn(); @@ -13,7 +12,6 @@ test('simple fileupload', () => { type="text" value={''} filename={''} - onChange={changeHandler} onReadStarted={readStartedHandler} onReadFinished={readFinishedHandler} isLoading={false} diff --git a/packages/react-core/src/components/FileUpload/__tests__/FileUploadField.test.tsx b/packages/react-core/src/components/FileUpload/__tests__/FileUploadField.test.tsx index 650da01bd8e..925394a559e 100644 --- a/packages/react-core/src/components/FileUpload/__tests__/FileUploadField.test.tsx +++ b/packages/react-core/src/components/FileUpload/__tests__/FileUploadField.test.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; import { render } from '@testing-library/react'; test('simple fileuploadfield', () => { - const changeHandler = jest.fn(); const browserBtnClickHandler = jest.fn(); const clearBtnClickHandler = jest.fn(); @@ -13,7 +12,6 @@ test('simple fileuploadfield', () => { type="text" value={''} filename={''} - onChange={changeHandler} filenamePlaceholder="Do something custom with this!" onBrowseButtonClick={browserBtnClickHandler} onClearButtonClick={clearBtnClickHandler}