updated due to dropzone changes and fixed legacy bug in example

patternfly · Nov 25, 2024 · f5d9764 · f5d9764
1 parent f7cf56f
commit f5d9764
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git 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<FileUploadProps> = ({
     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<HTMLButtonElement, MouseEvent>) => {

diff --git 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<HTMLButtonElement, MouseEvent>) => {
+  const reset = () => {
     setFilename('');
     setValue('');
+  };
+
+  const handleClear = (_event: React.MouseEvent<HTMLButtonElement, 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 = () => {
               <HelperTextItem id="restricted-file-example-helpText" variant={isRejected ? 'error' : 'default'}>
                 {isRejected ? (
                   <>
-                    <Icon status="danger">{/* <ExclamationCircleIcon /> */}</Icon>
+                    <Icon status="danger" />
                     {message}
                   </>
                 ) : (