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