SingleAttachmentField component

packages/client/manifest.json

@@ -4226,7 +4226,7 @@
     ]
   },
   "attachmentfield": {
-    "name": "Attachment",
+    "name": "Attachment list",
     "icon": "Attach",
     "styles": ["size"],
     "requiredAncestors": ["form"],
@@ -4322,6 +4322,103 @@
       }
     ]
   },
+  "singleattachmentfield": {
+    "name": "Single Attachment",
+    "icon": "Attach",
+    "styles": ["size"],
+    "requiredAncestors": ["form"],
+    "editable": true,
+    "size": {
+      "width": 400,
+      "height": 200
+    },
+    "settings": [
+      {
+        "type": "field/attachment_single",
+        "label": "Field",
+        "key": "field",
+        "required": true
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
+      {
+        "type": "text",
+        "label": "Extensions",
+        "key": "extensions"
+      },
+      {
+        "type": "number",
+        "label": "Max attachments",
+        "key": "maximum",
+        "min": 1
+      },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
+      {
+        "type": "boolean",
+        "label": "Compact",
+        "key": "compact",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Read only",
+        "key": "disabled",
+        "defaultValue": false
+      },
+      {
+        "type": "validation/attachment",
+        "label": "Validation",
+        "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "hidden": true,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
+      }
+    ]
+  },
   "relationshipfield": {
     "name": "Relationship Picker",
     "icon": "TaskList",

packages/client/src/components/app/blocks/FormBlockComponent.svelte

@@ -16,7 +16,7 @@
     [FieldType.LONGFORM]: "longformfield",
     [FieldType.DATETIME]: "datetimefield",
     [FieldType.ATTACHMENT]: "attachmentfield",
-    [FieldType.ATTACHMENT_SINGLE]: "attachmentfield",
+    [FieldType.ATTACHMENT_SINGLE]: "singleattachmentfield",
     [FieldType.LINK]: "relationshipfield",
     [FieldType.JSON]: "jsonfield",
     [FieldType.BARCODEQR]: "codescanner",
@@ -66,11 +66,6 @@
           maximum: schema?.constraints?.length?.maximum,
         }
       },
-      [FieldType.ATTACHMENT_SINGLE]: () => {
-        return {
-          type: FieldType.ATTACHMENT_SINGLE,
-        }
-      },
     }
 
     const fieldSchema = getFieldSchema(field)

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

@@ -0,0 +1,6 @@
+<script>
+  import { FieldType } from "@budibase/types"
+  import AttachmentField from "./AttachmentField.svelte"
+</script>
+
+<AttachmentField {...$$restProps} type={FieldType.ATTACHMENT_SINGLE} />

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

@@ -9,6 +9,7 @@ export { default as booleanfield } from "./BooleanField.svelte"
 export { default as longformfield } from "./LongFormField.svelte"
 export { default as datetimefield } from "./DateTimeField.svelte"
 export { default as attachmentfield } from "./AttachmentField.svelte"
+export { default as singleattachmentfield } from "./SingleAttachmentField.svelte"
 export { default as relationshipfield } from "./RelationshipField.svelte"
 export { default as passwordfield } from "./PasswordField.svelte"
 export { default as formstep } from "./FormStep.svelte"