Add on change action to S3 upload field

packages/client/manifest.json

@@ -2876,6 +2876,62 @@
       }
     ]
   },
+  "s3upload": {
+    "name": "S3 File Upload",
+    "info": "This component can't be used with S3 datasources that use custom endpoints.",
+    "icon": "UploadToCloud",
+    "styles": ["size"],
+    "editable": true,
+    "settings": [
+      {
+        "type": "field/attachment",
+        "label": "Field",
+        "key": "field"
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "dataSource/s3",
+        "label": "S3 Datasource",
+        "key": "datasourceId"
+      },
+      {
+        "type": "text",
+        "label": "Bucket",
+        "key": "bucket"
+      },
+      {
+        "type": "text",
+        "label": "File Name",
+        "key": "key"
+      },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
+      },
+      {
+        "type": "validation/attachment",
+        "label": "Validation",
+        "key": "validation"
+      }
+    ]
+  },
   "dataprovider": {
     "name": "Data Provider",
     "info": "Pagination is only available for data stored in tables.",
@@ -3707,51 +3763,6 @@
       }
     ]
   },
-  "s3upload": {
-    "name": "S3 File Upload",
-    "info": "This component can't be used with S3 datasources that use custom endpoints.",
-    "icon": "UploadToCloud",
-    "styles": ["size"],
-    "editable": true,
-    "settings": [
-      {
-        "type": "field/attachment",
-        "label": "Field",
-        "key": "field"
-      },
-      {
-        "type": "text",
-        "label": "Label",
-        "key": "label"
-      },
-      {
-        "type": "dataSource/s3",
-        "label": "S3 Datasource",
-        "key": "datasourceId"
-      },
-      {
-        "type": "text",
-        "label": "Bucket",
-        "key": "bucket"
-      },
-      {
-        "type": "text",
-        "label": "File Name",
-        "key": "key"
-      },
-      {
-        "type": "boolean",
-        "label": "Disabled",
-        "key": "disabled",
-        "defaultValue": false
-      },
-      {
-        "type": "validation/attachment",
-        "label": "Validation",
-        "key": "validation"
-      }
-    ]
-  },
   "markdownviewer": {
     "name": "Markdown Viewer",
     "icon": "TaskList",

packages/client/src/components/app/forms/S3Upload.svelte

@@ -10,6 +10,7 @@
   export let label
   export let disabled = false
   export let validation
+  export let onChange
 
   let fieldState
   let fieldApi
@@ -88,6 +89,13 @@
     }
   }
 
+  const handleChange = e => {
+    fieldApi.setValue(e.detail)
+    if (onChange) {
+      onChange({ value: e.detail })
+    }
+  }
+
   onMount(() => {
     uploadStore.actions.registerFileUpload($component.id, upload)
   })
@@ -113,9 +121,7 @@
         value={fieldState.value}
         disabled={loading || fieldState.disabled}
         error={fieldState.error}
-        on:change={e => {
+        on:change={handleChange}
-          fieldApi.setValue(e.detail)
-        }}
         {processFiles}
         {handleFileTooLarge}
         maximum={1}