Merge pull request #357 from microsoft/psl-bug36192-cm

fix: Error message does not auto-dismiss and close (X) icon is missing when uploading unsupported file

Author: Roopan-Microsoft

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" }}>