[WC-3363] Fileuploader: dismiss action for validation errors

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

packages/pluggableWidgets/file-uploader-web/src/components/ActionsBar.tsx

@@ -1,6 +1,6 @@
 import { ReactElement, useCallback } from "react";
 import { FileUploaderContainerProps } from "../../typings/FileUploaderProps";
 import { ActionButton, FileActionButton } from "./ActionButton";
 import { IconInternal } from "@mendix/widget-plugin-component-kit/IconInternal";
 import { FileStore } from "../stores/FileStore";
 import { useTranslationsStore } from "../utils/useTranslationsStore";
@@ -11,6 +11,10 @@
 }
 
 export const ActionsBar = ({ actions, store }: ButtonsBarProps): ReactElement | null => {
+    if (store.fileStatus === "validationError") {
+        return <DismissActionsBar store={store} />;
+    }
+
     if (!actions) {
         return <DefaultActionsBar store={store} />;
     }
@@ -70,6 +74,25 @@
     );
 }
 
+function DismissActionsBar({ store }: ButtonsBarProps): ReactElement {
+    const translations = useTranslationsStore();
+
+    const onDismiss = useCallback(() => {
+        store.dismiss();
+    }, [store]);
+
+    return (
+        <div className={"entry-details-actions"}>
+            <ActionButton
+                icon={<span className={"remove-icon"} aria-hidden />}
+                title={translations.get("removeButtonTextMessage")}
+                action={onDismiss}
+                isDisabled={false}
+            />
+        </div>
+    );
+}
+
 function onDownloadClick(fileUrl: string | undefined): void {
     if (!fileUrl) {
         return;

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(() => {

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) {

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