diff --git a/packages/pluggableWidgets/file-uploader-web/CHANGELOG.md b/packages/pluggableWidgets/file-uploader-web/CHANGELOG.md
index bb04444d0f..ccd5f8d648 100644
--- a/packages/pluggableWidgets/file-uploader-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/file-uploader-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Fixed
+
+- We fixed an issue where the "Invalid file format" validation error could not be dismissed and persisted after uploading a valid file.
+
## [2.4.2] - 2026-04-23
### Fixed
diff --git a/packages/pluggableWidgets/file-uploader-web/src/components/ActionsBar.tsx b/packages/pluggableWidgets/file-uploader-web/src/components/ActionsBar.tsx
index 0d74d7ad0d..6557d83587 100644
--- a/packages/pluggableWidgets/file-uploader-web/src/components/ActionsBar.tsx
+++ b/packages/pluggableWidgets/file-uploader-web/src/components/ActionsBar.tsx
@@ -11,6 +11,10 @@ interface ButtonsBarProps {
}
export const ActionsBar = ({ actions, store }: ButtonsBarProps): ReactElement | null => {
+ if (store.fileStatus === "validationError") {
+ return ;
+ }
+
if (!actions) {
return ;
}
@@ -70,6 +74,25 @@ function DefaultActionsBar(props: ButtonsBarProps): ReactElement {
);
}
+function DismissActionsBar({ store }: ButtonsBarProps): ReactElement {
+ const translations = useTranslationsStore();
+
+ const onDismiss = useCallback(() => {
+ store.dismiss();
+ }, [store]);
+
+ return (
+
+
}
+ title={translations.get("removeButtonTextMessage")}
+ action={onDismiss}
+ isDisabled={false}
+ />
+
+ );
+}
+
function onDownloadClick(fileUrl: string | undefined): void {
if (!fileUrl) {
return;
diff --git a/packages/pluggableWidgets/file-uploader-web/src/stores/FileStore.ts b/packages/pluggableWidgets/file-uploader-web/src/stores/FileStore.ts
index dc1b1e3a7f..b19b4408d9 100644
--- a/packages/pluggableWidgets/file-uploader-web/src/stores/FileStore.ts
+++ b/packages/pluggableWidgets/file-uploader-web/src/stores/FileStore.ts
@@ -60,7 +60,8 @@ export class FileStore {
imagePreviewUrl: computed,
upload: action,
fetchMxObject: action,
- markMissing: action
+ markMissing: action,
+ dismiss: action
});
}
@@ -76,6 +77,10 @@ export class FileStore {
this.errorDescription = errorMessage;
}
+ dismiss(): void {
+ this._rootStore.files = this._rootStore.files.filter(f => f !== this);
+ }
+
canExecute(listAction: ListActionValue): boolean {
if (!this._objectItem) {
return false;
@@ -123,6 +128,7 @@ export class FileStore {
runInAction(() => {
this.fileStatus = "done";
this._rootStore.objectCreationHelper.reportUploadSuccess(this._objectItem!);
+ this._rootStore.dismissValidationErrors();
});
} catch (_e: unknown) {
runInAction(() => {
diff --git a/packages/pluggableWidgets/file-uploader-web/src/stores/FileUploaderStore.ts b/packages/pluggableWidgets/file-uploader-web/src/stores/FileUploaderStore.ts
index eb44dfb68f..72f64a0ccb 100644
--- a/packages/pluggableWidgets/file-uploader-web/src/stores/FileUploaderStore.ts
+++ b/packages/pluggableWidgets/file-uploader-web/src/stores/FileUploaderStore.ts
@@ -74,6 +74,7 @@ export class FileUploaderStore {
makeObservable(this, {
updateProps: action,
processDrop: action,
+ dismissValidationErrors: action,
setMessage: action,
processExistingFileItem: action,
files: observable,
@@ -142,6 +143,10 @@ export class FileUploaderStore {
this.errorMessage = msg;
}
+ dismissValidationErrors(): void {
+ this.files = this.files.filter(file => file.fileStatus !== "validationError");
+ }
+
processDrop(acceptedFiles: File[], fileRejections: FileRejection[]): void {
if (!this.objectCreationHelper.canCreateFiles) {
console.error(
@@ -158,6 +163,7 @@ export class FileUploaderStore {
return;
}
+ this.dismissValidationErrors();
this.setMessage();
for (const file of fileRejections) {
diff --git a/packages/pluggableWidgets/file-uploader-web/src/ui/FileUploader.scss b/packages/pluggableWidgets/file-uploader-web/src/ui/FileUploader.scss
index 4f9bf3c3cf..d3a0905fe8 100644
--- a/packages/pluggableWidgets/file-uploader-web/src/ui/FileUploader.scss
+++ b/packages/pluggableWidgets/file-uploader-web/src/ui/FileUploader.scss
@@ -328,13 +328,13 @@ Place your custom CSS here
}
&.invalid {
- opacity: 0.7;
+ .entry-details-preview,
+ .entry-details-main {
+ opacity: 0.5;
+ }
.download-icon {
visibility: hidden;
}
- .entry-details-actions {
- display: none;
- }
}
}
}