@@ -387,6 +387,17 @@ const FileUploadZone: React.FC<FileUploadZoneProps> = ({
387387 }
388388 } , [ fileLimitExceeded ] ) ;
389389
390+ // Auto-hide file rejection errors after 10 seconds
391+ useEffect ( ( ) => {
392+ if ( fileRejectionErrors . length > 0 ) {
393+ const timer = setTimeout ( ( ) => {
394+ setFileRejectionErrors ( [ ] ) ;
395+ } , 5000 ) ;
396+
397+ return ( ) => clearTimeout ( timer ) ;
398+ }
399+ } , [ fileRejectionErrors ] ) ;
400+
390401 return (
391402 < div style = { { width : '100%' , minWidth : '720px' , maxWidth : '800px' , margin : '0 auto' , marginTop : '0' , padding : '16px' , paddingBottom : '60px' } } >
392403 < ConfirmationDialog
@@ -565,9 +576,12 @@ const FileUploadZone: React.FC<FileUploadZoneProps> = ({
565576 < div style = { { display : 'flex' , flexDirection : 'column' , gap : '13px' , width : '837px' , paddingBottom : 10 , borderRadius : '4px' , } } >
566577 { /* Show file rejection errors for invalid type or size */ }
567578 { fileRejectionErrors . length > 0 && (
579+ < div style = { { width : uploadingFiles . some ( f => f . status === 'completed' ) ? '837px' : '880px' } } >
568580 < MessageBar
569581 messageBarType = { MessageBarType . error }
570582 isMultiline = { true }
583+ onDismiss = { ( ) => setFileRejectionErrors ( [ ] ) }
584+ dismissButtonAriaLabel = "Close"
571585 styles = { messageBarErrorStyles }
572586 >
573587 < div style = { { display : "flex" , alignItems : "center" } } >
@@ -578,6 +592,7 @@ const FileUploadZone: React.FC<FileUploadZoneProps> = ({
578592 < div key = { idx } style = { { marginLeft : "24px" , marginTop : "2px" } } > { err } </ div >
579593 ) ) }
580594 </ MessageBar >
595+ </ div >
581596 ) }
582597 { /* Show network error message bar if any file has error */ }
583598 { uploadingFiles . some ( f => f . status === 'error' ) && (
0 commit comments