Budibase · adrinr · Apr 10, 2024 · Apr 3, 2024 · Apr 3, 2024 · Apr 3, 2024
diff --git a/packages/account-portal b/packages/account-portal
diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte
@@ -67,7 +67,7 @@
   }
 
   $: showDropzone =
-    (!maximum || (maximum && value?.length < maximum)) && !disabled
+    (!maximum || (maximum && (value?.length || 0) < maximum)) && !disabled
 
   async function processFileList(fileList) {
     if (

diff --git a/packages/builder/src/components/backend/DataTable/formula.js b/packages/builder/src/components/backend/DataTable/formula.js
@@ -9,7 +9,7 @@ const MAX_DEPTH = 1
 const TYPES_TO_SKIP = [
   FieldType.FORMULA,
   FieldType.LONGFORM,
-  FieldType.ATTACHMENT,
+  FieldType.ATTACHMENTS,
   //https://github.com/Budibase/budibase/issues/3030
   FieldType.INTERNAL,
 ]

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -394,7 +394,8 @@
         FIELDS.BIGINT,
         FIELDS.BOOLEAN,
         FIELDS.DATETIME,
-        FIELDS.ATTACHMENT,
+        FIELDS.ATTACHMENT_SINGLE,
+        FIELDS.ATTACHMENTS,
         FIELDS.LINK,
         FIELDS.FORMULA,
         FIELDS.JSON,

diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js b/packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js
@@ -41,7 +41,8 @@ export const FieldTypeToComponentMap = {
   [FieldType.BOOLEAN]: "booleanfield",
   [FieldType.LONGFORM]: "longformfield",
   [FieldType.DATETIME]: "datetimefield",
-  [FieldType.ATTACHMENT]: "attachmentfield",
+  [FieldType.ATTACHMENTS]: "attachmentfield",
+  [FieldType.ATTACHMENT_SINGLE]: "attachmentsinglefield",
   [FieldType.LINK]: "relationshipfield",
   [FieldType.JSON]: "jsonfield",
   [FieldType.BARCODEQR]: "codescanner",

diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js
@@ -107,10 +107,18 @@ export const FIELDS = {
       },
     },
   },
-  ATTACHMENT: {
+  ATTACHMENT_SINGLE: {
     name: "Attachment",
-    type: FieldType.ATTACHMENT,
-    icon: "Folder",
+    type: FieldType.ATTACHMENT_SINGLE,
+    icon: "Document",
+    constraints: {
+      presence: false,
+    },
+  },
+  ATTACHMENTS: {
+    name: "Attachment List",
+    type: FieldType.ATTACHMENTS,
+    icon: "AppleFiles",
     constraints: {
       type: "array",
       presence: false,
@@ -299,7 +307,7 @@ export const PaginationLocations = [
 
 export const BannedSearchTypes = [
   FieldType.LINK,
-  FieldType.ATTACHMENT,
+  FieldType.ATTACHMENTS,
   FieldType.FORMULA,
   FieldType.JSON,
   "jsonarray",

diff --git a/packages/builder/tsconfig.json b/packages/builder/tsconfig.json
@@ -1,9 +1,6 @@
 {
   "extends": "./tsconfig.build.json",
   "compilerOptions": {
-    "composite": true,
-    "declaration": true,
-    "sourceMap": true,
     "baseUrl": ".",
     "paths": {
       "assets/*": ["./assets/*"],

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
@@ -4226,7 +4226,7 @@
     ]
   },
   "attachmentfield": {
-    "name": "Attachment",
+    "name": "Attachment list",
     "icon": "Attach",
     "styles": ["size"],
     "requiredAncestors": ["form"],
@@ -4322,6 +4322,103 @@
       }
     ]
   },
+  "attachmentsinglefield": {
+    "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",

diff --git a/packages/client/src/components/app/blocks/FormBlockComponent.svelte b/packages/client/src/components/app/blocks/FormBlockComponent.svelte
@@ -15,7 +15,8 @@
     [FieldType.BOOLEAN]: "booleanfield",
     [FieldType.LONGFORM]: "longformfield",
     [FieldType.DATETIME]: "datetimefield",
-    [FieldType.ATTACHMENT]: "attachmentfield",
+    [FieldType.ATTACHMENTS]: "attachmentfield",
+    [FieldType.ATTACHMENT_SINGLE]: "attachmentsinglefield",
     [FieldType.LINK]: "relationshipfield",
     [FieldType.JSON]: "jsonfield",
     [FieldType.BARCODEQR]: "codescanner",
@@ -60,7 +61,7 @@
 
   function getPropsByType(field) {
     const propsMapByType = {
-      [FieldType.ATTACHMENT]: (_field, schema) => {
+      [FieldType.ATTACHMENTS]: (_field, schema) => {
         return {
           maximum: schema?.constraints?.length?.maximum,
         }

diff --git a/packages/client/src/components/app/forms/AttachmentField.svelte b/packages/client/src/components/app/forms/AttachmentField.svelte
@@ -1,6 +1,7 @@
 <script>
   import Field from "./Field.svelte"
   import { CoreDropzone } from "@budibase/bbui"
+  import { FieldType } from "@budibase/types"
   import { getContext } from "svelte"
 
   export let field
@@ -14,6 +15,11 @@
   export let maximum = undefined
   export let span
   export let helpText = null
+  export let type = FieldType.ATTACHMENTS
+  export let fieldApiMapper = {
+    get: value => value,
+    set: value => value,
+  }
 
   let fieldState
   let fieldApi
@@ -63,9 +69,10 @@
   }
 
   const handleChange = e => {
-    const changed = fieldApi.setValue(e.detail)
+    const value = fieldApiMapper.set(e.detail)
+    const changed = fieldApi.setValue(value)
     if (onChange && changed) {
-      onChange({ value: e.detail })
+      onChange({ value })
     }
   }
 </script>
@@ -78,14 +85,14 @@
   {validation}
   {span}
   {helpText}
-  type="attachment"
+  {type}
   bind:fieldState
   bind:fieldApi
   defaultValue={[]}
 >
   {#if fieldState}
     <CoreDropzone
-      value={fieldState.value}
+      value={fieldApiMapper.get(fieldState.value)}
       disabled={fieldState.disabled || fieldState.readonly}
       error={fieldState.error}
       on:change={handleChange}

diff --git a/packages/client/src/components/app/forms/AttachmentSingleField.svelte b/packages/client/src/components/app/forms/AttachmentSingleField.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { FieldType } from "@budibase/types"
+  import AttachmentField from "./AttachmentField.svelte"
+
+  const fieldApiMapper = {
+    get: value => (!Array.isArray(value) && value ? [value] : value) || [],
+    set: value => value[0] || null,
+  }
+</script>
+
+<AttachmentField
+  {...$$restProps}
+  type={FieldType.ATTACHMENT_SINGLE}
+  maximum={1}
+  {fieldApiMapper}
+/>
diff --git a/packages/client/src/components/app/forms/index.js b/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 attachmentsinglefield } from "./AttachmentSingleField.svelte"
 export { default as relationshipfield } from "./RelationshipField.svelte"
 export { default as passwordfield } from "./PasswordField.svelte"
 export { default as formstep } from "./FormStep.svelte"

diff --git a/packages/client/src/components/app/forms/validation.js b/packages/client/src/components/app/forms/validation.js
@@ -192,7 +192,7 @@ const parseType = (value, type) => {
   }
 
   // Parse attachments, treating no elements as null
-  if (type === FieldTypes.ATTACHMENT) {
+  if (type === FieldTypes.ATTACHMENTS) {
     if (!Array.isArray(value) || !value.length) {
       return null
     }

diff --git a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
@@ -10,6 +10,7 @@
   export let invertX = false
   export let invertY = false
   export let schema
+  export let maximum
 
   const { API, notifications } = getContext("grid")
   const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
@@ -98,7 +99,7 @@
       {value}
       compact
       on:change={e => onChange(e.detail)}
-      maximum={schema.constraints?.length?.maximum}
+      maximum={maximum || schema.constraints?.length?.maximum}
       {processFiles}
       {deleteAttachments}
       {handleFileTooLarge}

diff --git a/packages/frontend-core/src/components/grid/cells/AttachmentSingleCell.svelte b/packages/frontend-core/src/components/grid/cells/AttachmentSingleCell.svelte
@@ -0,0 +1,20 @@
+<script>
+  import AttachmentCell from "./AttachmentCell.svelte"
+
+  export let value
+  export let onChange
+
+  $: arrayValue = (!Array.isArray(value) && value ? [value] : value) || []
+
+  $: onFileChange = value => {
+    value = value[0] || null
+    onChange(value)
+  }
+</script>
+
+<AttachmentCell
+  {...$$restProps}
+  maximum={1}
+  value={arrayValue}
+  onChange={onFileChange}
+/>
diff --git a/packages/frontend-core/src/components/grid/lib/renderers.js b/packages/frontend-core/src/components/grid/lib/renderers.js
@@ -11,6 +11,7 @@ import BooleanCell from "../cells/BooleanCell.svelte"
 import FormulaCell from "../cells/FormulaCell.svelte"
 import JSONCell from "../cells/JSONCell.svelte"
 import AttachmentCell from "../cells/AttachmentCell.svelte"
+import AttachmentSingleCell from "../cells/AttachmentSingleCell.svelte"
 import BBReferenceCell from "../cells/BBReferenceCell.svelte"
 
 const TypeComponentMap = {
@@ -22,7 +23,8 @@ const TypeComponentMap = {
   [FieldType.ARRAY]: MultiSelectCell,
   [FieldType.NUMBER]: NumberCell,
   [FieldType.BOOLEAN]: BooleanCell,
-  [FieldType.ATTACHMENT]: AttachmentCell,
+  [FieldType.ATTACHMENTS]: AttachmentCell,
+  [FieldType.ATTACHMENT_SINGLE]: AttachmentSingleCell,
   [FieldType.LINK]: RelationshipCell,
   [FieldType.FORMULA]: FormulaCell,
   [FieldType.JSON]: JSONCell,

diff --git a/packages/frontend-core/src/components/grid/lib/utils.js b/packages/frontend-core/src/components/grid/lib/utils.js
@@ -16,7 +16,8 @@ const TypeIconMap = {
   [FieldType.ARRAY]: "Dropdown",
   [FieldType.NUMBER]: "123",
   [FieldType.BOOLEAN]: "Boolean",
-  [FieldType.ATTACHMENT]: "AppleFiles",
+  [FieldType.ATTACHMENTS]: "AppleFiles",
+  [FieldType.ATTACHMENT_SINGLE]: "Document",
   [FieldType.LINK]: "DataCorrelated",
   [FieldType.FORMULA]: "Calculator",
   [FieldType.JSON]: "Brackets",

diff --git a/packages/pro b/packages/pro