From ed228a2288bd4f84a561ec6c61aff05c64605059 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 26 Mar 2024 11:45:09 +0100
Subject: [PATCH] Single attachment cell

---
 .../grid/cells/AttachmentCell.svelte          | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
index a1f5c4f2aa..5f26a9d9b1 100644
--- a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount, getContext } from "svelte"
   import { Dropzone } from "@budibase/bbui"
+  import { FieldType } from "@budibase/types"
 
   export let value
   export let focused = false
@@ -16,6 +17,9 @@
 
   let isOpen = false
 
+  $: isSingle = schema?.type === FieldType.ATTACHMENT_SINGLE
+  $: arrayValue = (value && !Array.isArray(value) ? [value] : value) || []
+
   $: editable = focused && !readonly
   $: {
     if (!focused) {
@@ -68,6 +72,15 @@
     }
   }
 
+  const onFileChange = e => {
+    let value = e.detail
+    if (isSingle) {
+      value = value[0] || null
+    }
+
+    onChange(value)
+  }
+
   onMount(() => {
     api = {
       focus: () => open(),
@@ -81,7 +94,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="attachment-cell" class:editable on:click={editable ? open : null}>
-  {#each value || [] as attachment}
+  {#each arrayValue as attachment}
     {#if isImage(attachment.extension)}
       <img src={attachment.url} alt={attachment.extension} />
     {:else}
@@ -95,9 +108,9 @@
 {#if isOpen}
   <div class="dropzone" class:invertX class:invertY>
     <Dropzone
-      {value}
+      value={arrayValue}
       compact
-      on:change={e => onChange(e.detail)}
+      on:change={onFileChange}
       maximum={schema.constraints?.length?.maximum}
       {processFiles}
       {deleteAttachments}