diff --git a/packages/react-core/src/components/FileUpload/FileUpload.tsx b/packages/react-core/src/components/FileUpload/FileUpload.tsx index ed9b1c10288..4aa06c62332 100644 --- a/packages/react-core/src/components/FileUpload/FileUpload.tsx +++ b/packages/react-core/src/components/FileUpload/FileUpload.tsx @@ -125,8 +125,8 @@ export const FileUpload: React.FunctionComponent = ({ dropzoneProps.onDropAccepted && dropzoneProps.onDropAccepted(acceptedFiles, event); }; - const onDropRejected = (rejectedFiles: FileRejection[], event: DropEvent, error: ErrorCode) => { - dropzoneProps.onDropRejected && dropzoneProps.onDropRejected(rejectedFiles, event, error); + const onDropRejected = (rejectedFiles: FileRejection[], event: DropEvent) => { + dropzoneProps.onDropRejected && dropzoneProps.onDropRejected(rejectedFiles, event); }; const onClearButtonClick = (event: React.MouseEvent) => { diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx index 9250f705442..a942654f600 100644 --- a/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx +++ b/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx @@ -30,16 +30,25 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => { setValue(value); }; - const handleClear = (_event: React.MouseEvent) => { + const reset = () => { setFilename(''); setValue(''); + }; + + const handleClear = (_event: React.MouseEvent) => { + reset(); setIsRejected(false); }; const handleFileRejected = () => { + reset(); setIsRejected(true); }; + const handleFileAccepted = () => { + setIsRejected(false); + }; + const handleFileReadStarted = (_event: DropEvent, _fileHandle: File) => { setIsLoading(true); }; @@ -69,11 +78,14 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => { maxSize: 1024, onDropRejected: (rejections) => { const error = rejections[0].errors[0]; - if (error.code === DropzoneErrorCode.FileInvalidType) { - setMessage('File must be a valid CSV file'); + if (error.code === DropzoneErrorCode.FileTooLarge) { + setMessage('File is too big'); + } else if (error.code === DropzoneErrorCode.FileInvalidType) { + setMessage('File is not a CSV file'); } handleFileRejected(); - } + }, + onDropAccepted: handleFileAccepted }} validated={isRejected ? 'error' : 'default'} browseButtonText="Upload" @@ -84,7 +96,7 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => { {isRejected ? ( <> - {/* */} + {message} ) : (