[WC-3157] Add event handlers for file uploader (#1964)

Author: r0b1n

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]
 
+### Added
+
+- We added configuration options to execute actions after both successful and unsuccessful file uploads.
+
 ## [2.3.0] - 2025-08-15
 
 ### Fixed

packages/pluggableWidgets/file-uploader-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/file-uploader-web",
     "widgetName": "FileUploader",
-    "version": "2.3.0",
+    "version": "2.4.0",
     "description": "Upload files via drag-and-drop or file dialog. Supports multiple file uploads and image preview thumbnails.",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

packages/pluggableWidgets/file-uploader-web/src/FileUploader.editorConfig.ts

@@ -26,6 +26,12 @@ export function getProperties(
         ]);
     }
 
+    if (values.uploadMode === "files") {
+        hidePropertiesIn(properties, values, ["onUploadSuccessImage", "onUploadFailureImage"]);
+    } else {
+        hidePropertiesIn(properties, values, ["onUploadSuccessFile", "onUploadFailureFile"]);
+    }
+
     if (values.enableCustomButtons) {
         values.customButtons.forEach((_button, index) => {
             hideNestedPropertiesIn(

packages/pluggableWidgets/file-uploader-web/src/FileUploader.xml

@@ -195,6 +195,24 @@
                 <caption>Object creation timeout</caption>
                 <description>Consider uploads unsuccessful if the Action to create new files/images does not create new objects within the configured amount of seconds.</description>
             </property>
+
+            <property key="onUploadSuccessFile" type="action" dataSource="associatedFiles">
+                <caption>On upload success</caption>
+                <description>The action to be called if file content uploaded successfully.</description>
+            </property>
+            <property key="onUploadSuccessImage" type="action" dataSource="associatedImages">
+                <caption>On upload success</caption>
+                <description>The action to be called if image content uploaded successfully.</description>
+            </property>
+            <property key="onUploadFailureFile" type="action" dataSource="associatedFiles" defaultValue="FileUploader.ACT_DeleteUploadedFileDocument" defaultType="CallNanoflow">
+                <caption>On upload failure</caption>
+                <description>The action to be called if file content upload was not successful.</description>
+            </property>
+            <property key="onUploadFailureImage" type="action" dataSource="associatedImages" defaultValue="FileUploader.ACT_DeleteUploadedImageDocument" defaultType="CallNanoflow">
+                <caption>On upload failure</caption>
+                <description>The action to be called if image content upload was not successful.</description>
+            </property>
+
             <property key="enableCustomButtons" type="boolean" defaultValue="false">
                 <caption>Enable custom buttons</caption>
                 <description />

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

@@ -83,7 +83,7 @@ function FileEntry(props: FileEntryProps): ReactElement {
     return (
         <div
             className={classNames("file-entry", {
-                removed: props.fileStatus === "removedFile",
+                removed: props.fileStatus === "removedFile" || props.fileStatus === "removedAfterError",
                 invalid: props.fileStatus === "validationError"
             })}
             title={props.title}

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

@@ -15,6 +15,7 @@ export function UploadInfo({ status, error }: UploadInfoProps): ReactElement {
         case "done":
             return <span className={"upload-status success"}>{translations.get("uploadSuccessMessage")}</span>;
         case "uploadingError":
+        case "removedAfterError":
             return <span className={"upload-status error"}>{translations.get("uploadFailureGenericMessage")}</span>;
         case "validationError":
             return <span className={"upload-status error"}>{error}</span>;

packages/pluggableWidgets/file-uploader-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="FileUploader" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="FileUploader" version="2.4.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="FileUploader.xml" />
         </widgetFiles>

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

@@ -21,6 +21,7 @@ export type FileStatus =
     | "uploading"
     | "done"
     | "uploadingError"
+    | "removedAfterError"
     | "removedFile"
     | "validationError";
 
@@ -64,7 +65,8 @@ export class FileStore {
     }
 
     markMissing(): void {
-        this.fileStatus = "missing";
+        this.fileStatus = this.fileStatus === "uploadingError" ? "removedAfterError" : "missing";
+
         this._mxObject = undefined;
         this._objectItem = undefined;
     }
@@ -102,18 +104,30 @@ export class FileStore {
             this.fileStatus = "uploading";
         });
 
+        // create object
         try {
-            // request object item
             this._objectItem = await this._rootStore.objectCreationHelper.request();
+        } catch (_e: unknown) {
+            runInAction(() => {
+                this.fileStatus = "uploadingError";
+                this._rootStore.objectCreationHelper.reportCreationFailure();
+            });
+            return;
+        }
+
+        // upload content to object
+        try {
             await saveFile(this._objectItem, this._file!);
             await this.fetchMxObject();
 
             runInAction(() => {
                 this.fileStatus = "done";
+                this._rootStore.objectCreationHelper.reportUploadSuccess(this._objectItem!);
             });
         } catch (_e: unknown) {
             runInAction(() => {
                 this.fileStatus = "uploadingError";
+                this._rootStore.objectCreationHelper.reportUploadFailure(this._objectItem!);
             });
         }
     }

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

@@ -1,4 +1,4 @@
-import { DynamicValue, ListValue, ObjectItem } from "mendix";
+import { DynamicValue, ObjectItem } from "mendix";
 import { FileUploaderContainerProps, UploadModeEnum } from "../../typings/FileUploaderProps";
 import { action, computed, makeObservable, observable } from "mobx";
 import { Big } from "big.js";
@@ -26,7 +26,6 @@ export class FileUploaderStore {
     _uploadMode: UploadModeEnum;
     _maxFileSizeMiB = 0;
     _maxFileSize = 0;
-    _ds?: ListValue;
     _maxFilesPerUpload: DynamicValue<Big>;
 
     errorMessage?: string = undefined;
@@ -90,19 +89,15 @@ export class FileUploaderStore {
     }
 
     updateProps(props: FileUploaderContainerProps): void {
-        if (props.uploadMode === "files") {
-            this.objectCreationHelper.updateProps(props.createFileAction);
-            this._ds = props.associatedFiles;
-        } else {
-            this.objectCreationHelper.updateProps(props.createImageAction);
-            this._ds = props.associatedImages;
-        }
+        this.objectCreationHelper.updateProps(props);
 
         // Update max files properties
         this._maxFilesPerUpload = props.maxFilesPerUpload;
 
         this.translations.updateProps(props);
-        this.updateProcessor.processUpdate(this._ds);
+        this.updateProcessor.processUpdate(
+            props.uploadMode === "files" ? props.associatedFiles : props.associatedImages
+        );
     }
 
     processExistingFileItem(item: ObjectItem): void {

packages/pluggableWidgets/file-uploader-web/src/utils/ObjectCreationHelper.ts

@@ -1,7 +1,22 @@
-import { ActionValue, ObjectItem } from "mendix";
+import { ActionValue, ListActionValue, ObjectItem } from "mendix";
+import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
+import { FileUploaderContainerProps } from "../../typings/FileUploaderProps";
+
+type UpdateProps = Pick<
+    FileUploaderContainerProps,
+    | "uploadMode"
+    | "createFileAction"
+    | "createImageAction"
+    | "onUploadFailureFile"
+    | "onUploadSuccessFile"
+    | "onUploadFailureImage"
+    | "onUploadSuccessImage"
+>;
 
 export class ObjectCreationHelper {
     private objectCreationAction?: ActionValue;
+    private onUploadFailure?: ListActionValue;
+    private onUploadSuccess?: ListActionValue;
     private requestingEnabled = false;
     private currentWaiting: Array<[(v: ObjectItem) => void, (e: Error) => void]> = [];
     private itemCreationTimer?: number = undefined;
@@ -25,8 +40,16 @@ export class ObjectCreationHelper {
         }
     }
 
-    updateProps(createAction?: ActionValue): void {
-        this.objectCreationAction = createAction;
+    updateProps(props: UpdateProps): void {
+        if (props.uploadMode === "files") {
+            this.objectCreationAction = props.createFileAction;
+            this.onUploadFailure = props.onUploadFailureFile;
+            this.onUploadSuccess = props.onUploadSuccessFile;
+        } else {
+            this.objectCreationAction = props.createImageAction;
+            this.onUploadFailure = props.onUploadFailureImage;
+            this.onUploadSuccess = props.onUploadSuccessImage;
+        }
     }
 
     request(): Promise<ObjectItem> {
@@ -55,6 +78,19 @@ export class ObjectCreationHelper {
         this.executeCreation();
     }
 
+    reportCreationFailure(): void {
+        console.warn(`File object creation has failed.`);
+    }
+
+    reportUploadFailure(item: ObjectItem): void {
+        console.warn(`Uploading file content to ${item.id} has failed.`);
+        executeAction(this.onUploadFailure?.get(item));
+    }
+
+    reportUploadSuccess(item: ObjectItem): void {
+        executeAction(this.onUploadSuccess?.get(item));
+    }
+
     private executeCreation(): void {
         if (!this.requestingEnabled) {
             // we are not yet able to create objects, wait till next run