FileUpload - include file dismiss hook (#589)

Author: pjhampton

src/components/FileUpload/FileUpload.stories.tsx

@@ -34,17 +34,22 @@ export default {
     },
     onFileSelect: { action: "file selected" },
     onRetry: { action: "retry requested" },
+    onFileFailure: { action: "operation failed" },
+    onFileClose: { action: "operation dismissed" },
   },
 };
 
 export const SmallSize = {
   args: {
     title: "Upload file",
-    supportedFileTypes: [".txt", ".csv", ".json", ".sql"],
+    supportedFileTypes: [".txt", ".csv"],
     size: "sm",
     progress: 75,
     showProgress: false,
     showSuccess: false,
+    onRetry: () => console.log("File retried"),
+    onFileFailure: () => console.log("File failed"),
+    onFileClose: () => console.log("File dismissed"),
   },
   parameters: {
     docs: {
@@ -61,6 +66,9 @@ export const MediumSize = {
     supportedFileTypes: [".txt", ".csv", ".json", ".sql"],
     progress: 65,
     size: "md",
+    onRetry: () => console.log("File retried"),
+    onFileFailure: () => console.log("File failed"),
+    onFileClose: () => console.log("File dismissed"),
   },
   parameters: {
     docs: {

src/components/FileUpload/FileUpload.tsx

@@ -21,7 +21,8 @@ interface FileUploadProps {
   failureMessage?: string;
   onRetry?: () => void;
   onFileSelect?: (file: File) => void;
-  onFileSelectFailure?: () => void;
+  onFileFailure?: () => void;
+  onFileClose?: () => void;
 }
 
 const UploadArea = styled.div<{
@@ -198,7 +199,8 @@ export const FileUpload = ({
   failureMessage = "Upload failed",
   showProgress = false,
   showSuccess = false,
-  onFileSelectFailure,
+  onFileFailure,
+  onFileClose,
 }: FileUploadProps) => {
   const [isDragging, setIsDragging] = useState(false);
   const [isNotSupported, setIsNotSupported] = useState(false);
@@ -266,8 +268,8 @@ export const FileUpload = ({
   const processFile = useCallback(
     (file: File) => {
       if (!isFiletypeSupported(file.name, supportedFileTypes)) {
-        if (onFileSelectFailure) {
-          onFileSelectFailure();
+        if (onFileFailure) {
+          onFileFailure();
           console.log("File type not supported");
           setIsNotSupported(true);
         } else {
@@ -288,7 +290,7 @@ export const FileUpload = ({
         setIsNotSupported(false);
       }
     },
-    [onFileSelect, supportedFileTypes, onFileSelectFailure]
+    [onFileSelect, supportedFileTypes, onFileFailure]
   );
 
   const handleDrop = useCallback(
@@ -327,7 +329,11 @@ export const FileUpload = ({
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
-  }, []);
+
+    if (onFileClose) {
+      onFileClose();
+    }
+  }, [onFileClose]);
 
   const handleRetryUpload = useCallback(() => {
     if (onRetry) {