From 87ce2d0e899d2c117938a112c43267e081c34b9b Mon Sep 17 00:00:00 2001
From: VishalS-Microsoft <v-vishshinde@microsoft.com>
Date: Thu, 5 Mar 2026 12:26:17 +0530
Subject: [PATCH] fix: Error message does not auto-dismiss and close (X) icon
 is missing when uploading unsupported file

---
 src/frontend/src/components/uploadButton.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/uploadButton.tsx b/src/frontend/src/components/uploadButton.tsx
index b6d90a1e..81454168 100644
--- a/src/frontend/src/components/uploadButton.tsx
+++ b/src/frontend/src/components/uploadButton.tsx
@@ -387,6 +387,17 @@ const FileUploadZone: React.FC<FileUploadZoneProps> = ({
     }
   }, [fileLimitExceeded]);
 
+  // Auto-hide file rejection errors after 10 seconds
+  useEffect(() => {
+    if (fileRejectionErrors.length > 0) {
+      const timer = setTimeout(() => {
+        setFileRejectionErrors([]);
+      }, 5000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [fileRejectionErrors]);
+
   return (
     <div style={{ width: '100%', minWidth: '720px', maxWidth: '800px', margin: '0 auto', marginTop: '0', padding: '16px', paddingBottom: '60px' }}>
       <ConfirmationDialog
@@ -562,12 +573,14 @@ const FileUploadZone: React.FC<FileUploadZoneProps> = ({
         )}
       </div>
 
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '13px', width: '837px', paddingBottom: 10, borderRadius: '4px', }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '13px', width: '880px', paddingBottom: 10, borderRadius: '4px', }}>
         {/* Show file rejection errors for invalid type or size */}
          {fileRejectionErrors.length > 0 && (
             <MessageBar
               messageBarType={MessageBarType.error}
               isMultiline={true}
+              onDismiss={() => setFileRejectionErrors([])}
+              dismissButtonAriaLabel="Close"
               styles={messageBarErrorStyles}
             >
               <div style={{ display: "flex", alignItems: "center" }}>