Add file/upload size validation option (#10262)

* Add file/upload size validation option

* Max upload size handler

* Update max total upload label

packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte

@@ -65,6 +65,14 @@
       label: "Must not contain",
       value: "notContains",
     },
+    MaxFileSize: {
+      label: "Max file size (MB)",
+      value: "maxFileSize",
+    },
+    MaxUploadSize: {
+      label: "Max total upload size (MB)",
+      value: "maxUploadSize",
+    },
   }
   const ConstraintMap = {
     ["string"]: [
@@ -94,7 +102,11 @@
       Constraints.Equal,
       Constraints.NotEqual,
     ],
-    ["attachment"]: [Constraints.Required],
+    ["attachment"]: [
+      Constraints.Required,
+      Constraints.MaxFileSize,
+      Constraints.MaxUploadSize,
+    ],
     ["link"]: [
       Constraints.Required,
       Constraints.Contains,
@@ -283,7 +295,7 @@
                     disabled={rule.constraint === "required"}
                     on:change={e => (rule.value = e.detail)}
                   />
-                {:else if rule.type !== "array" && ["maxLength", "minLength", "regex", "notRegex", "contains", "notContains"].includes(rule.constraint)}
+                {:else if rule.type !== "array" && ["maxUploadSize", "maxFileSize", "maxLength", "minLength", "regex", "notRegex", "contains", "notContains"].includes(rule.constraint)}
                   <!-- Certain constraints always need string values-->
                   <Input
                     bind:value={rule.value}
@@ -376,7 +388,7 @@
     gap: var(--spacing-l);
     display: grid;
     align-items: center;
-    grid-template-columns: 190px 120px 1fr 1fr auto auto;
+    grid-template-columns: 200px 120px 1fr 1fr auto auto;
     border-radius: var(--border-radius-s);
     transition: background-color ease-in-out 130ms;
   }

packages/client/src/components/app/forms/validation.js

@@ -241,6 +241,25 @@ const maxLengthHandler = (value, rule) => {
   return value == null || value.length <= limit
 }
 
+// Evaluates a max file size (MB) constraint
+const maxFileSizeHandler = (value, rule) => {
+  const limit = parseType(rule.value, "number")
+  return (
+    value == null ||
+    !value.some(attachment => attachment.size / 1000000 > limit)
+  )
+}
+
+// Evaluates a max total upload size (MB) constraint
+const maxUploadSizeHandler = (value, rule) => {
+  const limit = parseType(rule.value, "number")
+  return (
+    value == null ||
+    value.reduce((acc, currentItem) => acc + currentItem.size, 0) / 1000000 <=
+      limit
+  )
+}
+
 // Evaluates a min value constraint
 const minValueHandler = (value, rule) => {
   // Use same type as the value so that things can be compared
@@ -330,6 +349,8 @@ const handlerMap = {
   contains: containsHandler,
   notContains: notContainsHandler,
   json: jsonHandler,
+  maxFileSize: maxFileSizeHandler,
+  maxUploadSize: maxUploadSizeHandler,
 }
 
 /**