[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 validation errors 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

@@ -11,6 +11,10 @@ interface ButtonsBarProps {
 }
 
 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 DefaultActionsBar(props: ButtonsBarProps): ReactElement {
     );
 }
 
+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/components/Dropzone.tsx

@@ -24,7 +24,7 @@ export const Dropzone = observer(
         acceptFileTypes,
         disabled
     }: DropzoneProps): ReactElement => {
-        const { getRootProps, getInputProps, isDragAccept, isDragReject } = useDropzone({
+        const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone({
             onDrop,
             maxSize: maxSize || undefined,
             maxFiles: maxFilesPerUpload,
@@ -33,7 +33,7 @@ export const Dropzone = observer(
         });
 
         const translations = useTranslationsStore();
-        const [type, msg] = getMessage(translations, isDragAccept, isDragReject);
+        const [type, msg] = getMessage(translations, isDragAccept, isDragActive && isDragReject);
 
         return (
             <Fragment>

packages/pluggableWidgets/file-uploader-web/src/components/__tests__/DismissActionsBar.spec.tsx

@@ -0,0 +1,75 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { FileUploaderContainerProps } from "../../../typings/FileUploaderProps";
+import { FileStore } from "../../stores/FileStore";
+import { TranslationsStoreProvider } from "../../utils/useTranslationsStore";
+import { ActionsBar } from "../ActionsBar";
+
+jest.mock("../../utils/mx-data", () => ({
+    fetchDocumentUrl: jest.fn(),
+    fetchImageThumbnail: jest.fn(),
+    fetchMxObject: jest.fn(),
+    removeObject: jest.fn(),
+    saveFile: jest.fn(),
+    fileHasContents: jest.fn()
+}));
+
+function makeFakeProps(): FileUploaderContainerProps {
+    const dv = (v: string): { value: string; status: string } => ({ value: v, status: "available" });
+    return {
+        name: "fileUploader1",
+        uploadMode: "files",
+        maxFileSize: 10,
+        maxFilesPerUpload: { value: { toNumber: () => 5 } },
+        readOnlyMode: false,
+        objectCreationTimeout: 30,
+        allowedFileFormats: "",
+        removeButtonTextMessage: dv("Remove"),
+        downloadButtonTextMessage: dv("Download"),
+        unavailableCreateActionMessage: dv("Unavailable"),
+        uploadFailureTooManyFilesMessage: dv("Too many"),
+        uploadFailureInvalidFileFormatMessage: dv("Invalid format"),
+        uploadFailureFileIsTooBigMessage: dv("Too big")
+    } as unknown as FileUploaderContainerProps;
+}
+
+function makeValidationErrorStore(): { store: FileStore; dismiss: jest.Mock } {
+    const dismiss = jest.fn();
+    const rootStore = { dismissFile: dismiss, _uploadMode: "files", isReadOnly: false } as any;
+    const store = FileStore.newFileWithError(new File([], "bad.txt"), "bad format", rootStore);
+    return { store, dismiss };
+}
+
+function renderWithTranslations(store: FileStore): void {
+    const props = makeFakeProps();
+    render(
+        <TranslationsStoreProvider props={props}>
+            <ActionsBar store={store} />
+        </TranslationsStoreProvider>
+    );
+}
+
+describe("DismissActionsBar", () => {
+    it("renders dismiss button for validationError file", () => {
+        const { store } = makeValidationErrorStore();
+        renderWithTranslations(store);
+        expect(screen.getByRole("button", { name: "Remove" })).toBeInTheDocument();
+    });
+
+    it("calls store.dismiss() when button clicked", () => {
+        const { store } = makeValidationErrorStore();
+        const dismissSpy = jest.spyOn(store, "dismiss");
+        renderWithTranslations(store);
+        fireEvent.click(screen.getByRole("button"));
+        expect(dismissSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not render DismissActionsBar for non-validationError file", () => {
+        const rootStore = { dismissFile: jest.fn(), _uploadMode: "files", isReadOnly: false } as any;
+        const store = FileStore.newFile(new File([], "ok.txt"), rootStore);
+        (store as any).fileStatus = "done";
+        renderWithTranslations(store);
+        // DefaultActionsBar renders 2 buttons (download + remove)
+        expect(screen.queryAllByRole("button")).toHaveLength(2);
+    });
+});

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.dismissFile(this);
+    }
+
     canExecute(listAction: ListActionValue): boolean {
         if (!this._objectItem) {
             return false;

packages/pluggableWidgets/file-uploader-web/src/stores/FileUploaderStore.ts

@@ -74,6 +74,7 @@ export class FileUploaderStore {
         makeObservable(this, {
             updateProps: action,
             processDrop: action,
+            dismissFile: action,
             setMessage: action,
             processExistingFileItem: action,
             files: observable,
@@ -142,6 +143,18 @@ export class FileUploaderStore {
         this.errorMessage = msg;
     }
 
+    private dismissValidationErrors(): void {
+        this.files = this.files.filter(file => file.fileStatus !== "validationError");
+        this.setMessage();
+    }
+
+    dismissFile(file: FileStore): void {
+        this.files = this.files.filter(f => f !== file);
+        if (!this.files.some(f => f.fileStatus === "validationError")) {
+            this.setMessage();
+        }
+    }
+
     processDrop(acceptedFiles: File[], fileRejections: FileRejection[]): void {
         if (!this.objectCreationHelper.canCreateFiles) {
             console.error(
@@ -158,7 +171,8 @@ export class FileUploaderStore {
             return;
         }
 
-        this.setMessage();
+        this.dismissValidationErrors();
+        this.setMessage(fileRejections.length ? this.translations.get("dropzoneRejectedMessage") : undefined);
 
         for (const file of fileRejections) {
             const newFileStore = FileStore.newFileWithError(

packages/pluggableWidgets/file-uploader-web/src/stores/__tests__/FileStore.spec.ts

@@ -0,0 +1,29 @@
+import { FileStore } from "../FileStore";
+import { FileUploaderStore } from "../FileUploaderStore";
+
+jest.mock("../../utils/mx-data", () => ({
+    fetchDocumentUrl: jest.fn(),
+    fetchImageThumbnail: jest.fn(),
+    fetchMxObject: jest.fn(),
+    removeObject: jest.fn(),
+    saveFile: jest.fn(),
+    fileHasContents: jest.fn()
+}));
+
+function makeRootStore(): { dismissFile: jest.Mock } {
+    return {
+        dismissFile: jest.fn(),
+        _uploadMode: "files",
+        isReadOnly: false
+    } as unknown as FileUploaderStore & { dismissFile: jest.Mock };
+}
+
+describe("FileStore.dismiss()", () => {
+    it("calls dismissFile on root store with itself", () => {
+        const rootStore = makeRootStore();
+        const store = FileStore.newFileWithError(new File([], "test.txt"), "bad format", rootStore as any);
+        store.dismiss();
+        expect(rootStore.dismissFile).toHaveBeenCalledTimes(1);
+        expect(rootStore.dismissFile).toHaveBeenCalledWith(store);
+    });
+});

packages/pluggableWidgets/file-uploader-web/src/stores/__tests__/FileUploaderStore.spec.ts

@@ -0,0 +1,121 @@
+import { FileStore } from "../FileStore";
+import { FileUploaderStore } from "../FileUploaderStore";
+import { TranslationsStore } from "../TranslationsStore";
+
+jest.mock("../../utils/mx-data", () => ({
+    fetchDocumentUrl: jest.fn(),
+    fetchImageThumbnail: jest.fn(),
+    fetchMxObject: jest.fn(),
+    removeObject: jest.fn(),
+    saveFile: jest.fn(),
+    fileHasContents: jest.fn()
+}));
+
+function makeStore(): FileUploaderStore {
+    const translations = { get: jest.fn(() => "msg"), updateProps: jest.fn() } as unknown as TranslationsStore;
+    const store = Object.create(FileUploaderStore.prototype) as FileUploaderStore;
+    store.files = [];
+    return Object.assign(store, {
+        translations,
+        objectCreationHelper: { canCreateFiles: true, enable: jest.fn(), updateProps: jest.fn(), request: jest.fn() },
+        updateProcessor: { processUpdate: jest.fn() },
+        isReadOnly: false,
+        _uploadMode: "files" as const,
+        _maxFileSizeMiB: 10,
+        _maxFileSize: 10 * 1024 * 1024,
+        acceptedFileTypes: [],
+        existingItemsLoaded: false
+    });
+}
+
+function makeValidationErrorFile(store: FileUploaderStore): FileStore {
+    return FileStore.newFileWithError(new File([], "bad.txt"), "bad format", store);
+}
+
+function makeDoneFile(store: FileUploaderStore): FileStore {
+    const f = FileStore.newFile(new File([], "good.txt"), store);
+    (f as any).fileStatus = "done";
+    return f;
+}
+
+describe("FileUploaderStore.dismissFile()", () => {
+    it("removes the specific file from the list", () => {
+        const store = makeStore();
+        const fileA = makeValidationErrorFile(store);
+        const fileB = makeValidationErrorFile(store);
+        store.files = [fileA, fileB];
+
+        store.dismissFile(fileA);
+
+        expect(store.files).toHaveLength(1);
+        expect(store.files[0]).toBe(fileB);
+    });
+
+    it("does not remove other files", () => {
+        const store = makeStore();
+        const fileA = makeValidationErrorFile(store);
+        const fileB = makeDoneFile(store);
+        store.files = [fileA, fileB];
+
+        store.dismissFile(fileA);
+
+        expect(store.files[0]).toBe(fileB);
+    });
+
+    it("is a no-op when file is not in the list", () => {
+        const store = makeStore();
+        store.errorMessage = "Some files may not be uploadable.";
+        const fileA = makeValidationErrorFile(store);
+        const fileB = makeValidationErrorFile(store);
+        store.files = [fileA];
+
+        store.dismissFile(fileB);
+
+        expect(store.files).toHaveLength(1);
+        expect(store.files[0]).toBe(fileA);
+        expect(store.errorMessage).toBe("Some files may not be uploadable.");
+    });
+
+    it("clears errorMessage when last validationError file is dismissed", () => {
+        const store = makeStore();
+        store.errorMessage = "Some files may not be uploadable.";
+        const file = makeValidationErrorFile(store);
+        store.files = [file];
+
+        store.dismissFile(file);
+
+        expect(store.errorMessage).toBeUndefined();
+    });
+
+    it("keeps errorMessage while other validationError files remain", () => {
+        const store = makeStore();
+        store.errorMessage = "Some files may not be uploadable.";
+        const fileA = makeValidationErrorFile(store);
+        const fileB = makeValidationErrorFile(store);
+        store.files = [fileA, fileB];
+
+        store.dismissFile(fileA);
+
+        expect(store.errorMessage).toBe("Some files may not be uploadable.");
+    });
+});
+
+describe("FileUploaderStore.processDrop() errorMessage", () => {
+    it("sets errorMessage when file rejections exist", () => {
+        const store = makeStore();
+        const rejection = { file: new File([], "bad.xlsx"), errors: [{ code: "file-invalid-type", message: "bad" }] };
+
+        store.processDrop([], [rejection]);
+
+        expect(store.errorMessage).toBe("msg");
+    });
+
+    it("clears errorMessage when no rejections", () => {
+        const store = makeStore();
+        store.errorMessage = "Some files may not be uploadable.";
+
+        store.processDrop([], []);
+
+        expect(store.errorMessage).toBeUndefined();
+    });
+});

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