Merge pull request #13356 from Budibase/BUDI-8122/single-attachment-column-type

Single attachment column type

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 (

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,
 ]

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,

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",

packages/builder/src/constants/backend/index.js

@@ -107,10 +107,18 @@ export const FIELDS = {
       },
     },
   },
-  ATTACHMENT: {
+  ATTACHMENT_SINGLE: {
     name: "Attachment",
-    type: FieldType.ATTACHMENT,
+    type: FieldType.ATTACHMENT_SINGLE,
-    icon: "Folder",
+    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",

packages/builder/tsconfig.json

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

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",

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,
         }

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}

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}
+/>

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"

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
     }

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}

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}
+/>

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,

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",

packages/server/src/api/controllers/table/utils.ts

@@ -30,8 +30,6 @@ import {
   View,
   RelationshipFieldMetadata,
   FieldType,
-  FieldTypeSubtypes,
-  AttachmentFieldMetadata,
 } from "@budibase/types"
 
 export async function clearColumns(table: Table, columnNames: string[]) {
@@ -91,26 +89,6 @@ export async function checkForColumnUpdates(
     await checkForViewUpdates(updatedTable, deletedColumns, columnRename)
   }
 
-  const changedAttachmentSubtypeColumns = Object.values(
-    updatedTable.schema
-  ).filter(
-    (column): column is AttachmentFieldMetadata =>
-      column.type === FieldType.ATTACHMENT &&
-      column.subtype !== oldTable?.schema[column.name]?.subtype
-  )
-  for (const attachmentColumn of changedAttachmentSubtypeColumns) {
-    if (attachmentColumn.subtype === FieldTypeSubtypes.ATTACHMENT.SINGLE) {
-      attachmentColumn.constraints ??= { length: {} }
-      attachmentColumn.constraints.length ??= {}
-      attachmentColumn.constraints.length.maximum = 1
-      attachmentColumn.constraints.length.message =
-        "cannot contain multiple files"
-    } else {
-      delete attachmentColumn.constraints?.length?.maximum
-      delete attachmentColumn.constraints?.length?.message
-    }
-  }
-
   return { rows: updatedRows, table: updatedTable }
 }
 

packages/server/src/api/routes/tests/row.spec.ts

@@ -234,7 +234,7 @@ describe.each([
           constraints: { type: "string", presence: false },
         }
         const attachment: FieldSchema = {
-          type: FieldType.ATTACHMENT,
+          type: FieldType.ATTACHMENTS,
           name: "attachment",
           constraints: { type: "array", presence: false },
         }
@@ -790,7 +790,7 @@ describe.each([
           defaultTable({
             schema: {
               attachment: {
-                type: FieldType.ATTACHMENT,
+                type: FieldType.ATTACHMENTS,
                 name: "attachment",
                 constraints: { type: "array", presence: false },
               },

packages/server/src/db/defaultData/datasource_bb_default.ts

@@ -299,7 +299,7 @@ export const DEFAULT_EMPLOYEE_TABLE_SCHEMA: Table = {
       sortable: false,
     },
     "Badge Photo": {
-      type: FieldType.ATTACHMENT,
+      type: FieldType.ATTACHMENTS,
       constraints: {
         type: FieldType.ARRAY,
         presence: false,
@@ -607,7 +607,7 @@ export const DEFAULT_EXPENSES_TABLE_SCHEMA: Table = {
       ignoreTimezones: true,
     },
     Attachment: {
-      type: FieldType.ATTACHMENT,
+      type: FieldType.ATTACHMENTS,
       constraints: {
         type: FieldType.ARRAY,
         presence: false,

packages/server/src/sdk/app/rows/attachments.ts

@@ -30,7 +30,7 @@ export async function getRowsWithAttachments(appId: string, table: Table) {
   const db = dbCore.getDB(appId)
   const attachmentCols: string[] = []
   for (let [key, column] of Object.entries(table.schema)) {
-    if (column.type === FieldType.ATTACHMENT) {
+    if (column.type === FieldType.ATTACHMENTS) {
       attachmentCols.push(key)
     }
   }

packages/server/src/sdk/app/rows/utils.ts

@@ -175,13 +175,13 @@ export async function validate({
         errors[fieldName] = [`${fieldName} is required`]
       }
     } else if (
-      (type === FieldType.ATTACHMENT || type === FieldType.JSON) &&
+      (type === FieldType.ATTACHMENTS || type === FieldType.JSON) &&
       typeof row[fieldName] === "string"
     ) {
       // this should only happen if there is an error
       try {
         const json = JSON.parse(row[fieldName])
-        if (type === FieldType.ATTACHMENT) {
+        if (type === FieldType.ATTACHMENTS) {
           if (Array.isArray(json)) {
             row[fieldName] = json
           } else {

packages/server/src/utilities/rowProcessor/attachments.ts

@@ -34,7 +34,7 @@ export class AttachmentCleanup {
       let files: string[] = []
       const tableSchema = opts.oldTable?.schema || table.schema
       for (let [key, schema] of Object.entries(tableSchema)) {
-        if (schema.type !== FieldType.ATTACHMENT) {
+        if (schema.type !== FieldType.ATTACHMENTS) {
           continue
         }
         const columnRemoved = opts.oldTable && !table.schema[key]
@@ -68,7 +68,7 @@ export class AttachmentCleanup {
     return AttachmentCleanup.coreCleanup(() => {
       let files: string[] = []
       for (let [key, schema] of Object.entries(table.schema)) {
-        if (schema.type !== FieldType.ATTACHMENT) {
+        if (schema.type !== FieldType.ATTACHMENTS) {
           continue
         }
         rows.forEach(row => {
@@ -88,7 +88,7 @@ export class AttachmentCleanup {
     return AttachmentCleanup.coreCleanup(() => {
       let files: string[] = []
       for (let [key, schema] of Object.entries(table.schema)) {
-        if (schema.type !== FieldType.ATTACHMENT) {
+        if (schema.type !== FieldType.ATTACHMENTS) {
           continue
         }
         const oldKeys =

packages/server/src/utilities/rowProcessor/index.ts

@@ -148,7 +148,7 @@ export async function inputProcessing(
     }
 
     // remove any attachment urls, they are generated on read
-    if (field.type === FieldType.ATTACHMENT) {
+    if (field.type === FieldType.ATTACHMENTS) {
       const attachments = clonedRow[key]
       if (attachments?.length) {
         attachments.forEach((attachment: RowAttachment) => {
@@ -216,7 +216,7 @@ export async function outputProcessing<T extends Row[] | Row>(
 
   // process complex types: attachements, bb references...
   for (let [property, column] of Object.entries(table.schema)) {
-    if (column.type === FieldType.ATTACHMENT) {
+    if (column.type === FieldType.ATTACHMENTS) {
       for (let row of enriched) {
         if (row[property] == null || !Array.isArray(row[property])) {
           continue

packages/server/src/utilities/rowProcessor/map.ts

@@ -106,7 +106,7 @@ export const TYPE_TRANSFORM_MAP: any = {
       return date
     },
   },
-  [FieldType.ATTACHMENT]: {
+  [FieldType.ATTACHMENTS]: {
     //@ts-ignore
     [null]: [],
     //@ts-ignore

packages/server/src/utilities/rowProcessor/tests/attachments.spec.ts

@@ -34,7 +34,7 @@ function table(): Table {
     schema: {
       attach: {
         name: "attach",
-        type: FieldType.ATTACHMENT,
+        type: FieldType.ATTACHMENTS,
         constraints: {},
       },
     },

packages/server/src/utilities/rowProcessor/tests/outputProcessing.spec.ts

@@ -82,7 +82,7 @@ describe("rowProcessor - outputProcessing", () => {
       sourceType: TableSourceType.INTERNAL,
       schema: {
         attach: {
-          type: FieldType.ATTACHMENT,
+          type: FieldType.ATTACHMENTS,
           name: "attach",
           constraints: {},
         },

packages/shared-core/src/table.ts

@@ -11,10 +11,10 @@ const allowDisplayColumnByType: Record<FieldType, boolean> = {
   [FieldType.INTERNAL]: true,
   [FieldType.BARCODEQR]: true,
   [FieldType.BIGINT]: true,
-
   [FieldType.BOOLEAN]: false,
   [FieldType.ARRAY]: false,
-  [FieldType.ATTACHMENT]: false,
+  [FieldType.ATTACHMENTS]: false,
+  [FieldType.ATTACHMENT_SINGLE]: false,
   [FieldType.LINK]: false,
   [FieldType.JSON]: false,
   [FieldType.BB_REFERENCE]: false,
@@ -34,7 +34,8 @@ const allowSortColumnByType: Record<FieldType, boolean> = {
   [FieldType.JSON]: true,
 
   [FieldType.FORMULA]: false,
-  [FieldType.ATTACHMENT]: false,
+  [FieldType.ATTACHMENTS]: false,
+  [FieldType.ATTACHMENT_SINGLE]: false,
   [FieldType.ARRAY]: false,
   [FieldType.LINK]: false,
   [FieldType.BB_REFERENCE]: false,

packages/types/src/documents/app/row.ts

@@ -8,7 +8,8 @@ export enum FieldType {
   BOOLEAN = "boolean",
   ARRAY = "array",
   DATETIME = "datetime",
-  ATTACHMENT = "attachment",
+  ATTACHMENTS = "attachment",
+  ATTACHMENT_SINGLE = "attachment_single",
   LINK = "link",
   FORMULA = "formula",
   AUTO = "auto",
@@ -38,7 +39,6 @@ export interface Row extends Document {
 export enum FieldSubtype {
   USER = "user",
   USERS = "users",
-  SINGLE = "single",
 }
 
 // The 'as' are required for typescript not to type the outputs as generic FieldSubtype
@@ -47,7 +47,4 @@ export const FieldTypeSubtypes = {
     USER: FieldSubtype.USER as FieldSubtype.USER,
     USERS: FieldSubtype.USERS as FieldSubtype.USERS,
   },
-  ATTACHMENT: {
-    SINGLE: FieldSubtype.SINGLE as FieldSubtype.SINGLE,
-  },
 }

packages/types/src/documents/app/table/schema.ts

@@ -112,10 +112,8 @@ export interface BBReferenceFieldMetadata
   relationshipType?: RelationshipType
 }
 
-export interface AttachmentFieldMetadata
+export interface AttachmentFieldMetadata extends BaseFieldSchema {
-  extends Omit<BaseFieldSchema, "subtype"> {
+  type: FieldType.ATTACHMENTS
-  type: FieldType.ATTACHMENT
-  subtype?: FieldSubtype.SINGLE
 }
 
 export interface FieldConstraints {
@@ -164,7 +162,7 @@ interface OtherFieldMetadata extends BaseFieldSchema {
     | FieldType.NUMBER
     | FieldType.LONGFORM
     | FieldType.BB_REFERENCE
-    | FieldType.ATTACHMENT
+    | FieldType.ATTACHMENTS
   >
 }
 
@@ -217,5 +215,5 @@ export function isBBReferenceField(
 export function isAttachmentField(
   field: FieldSchema
 ): field is AttachmentFieldMetadata {
-  return field.type === FieldType.ATTACHMENT
+  return field.type === FieldType.ATTACHMENTS
 }