fix(nc-gui): attachments not emitted properly in form mode

packages/nc-gui/components/cell/attachment/index.vue

@@ -3,7 +3,6 @@ import { onKeyDown } from '@vueuse/core'
 import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
 import {
-  IsFormInj,
   IsGalleryInj,
   inject,
   isImage,
@@ -22,24 +21,26 @@ interface Props {
 }
 
 interface Emits {
-  (event: 'update:modelValue', value: string | Record<string, any>): void
+  (event: 'update:modelValue', value: string | Record<string, any>[]): void
 }
 
 const { modelValue, rowIndex } = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const isForm = inject(IsFormInj, ref(false))
-
 const isGallery = inject(IsGalleryInj, ref(false))
 
 const attachmentCellRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const { cellRefs } = useSmartsheetStoreOrThrow()!
+const currentCellRef = ref()
+
+const { cellRefs, isSharedForm } = useSmartsheetStoreOrThrow()!
 
 const {
+  isPublic,
+  isForm,
   column,
   modalVisible,
   attachments,
@@ -53,8 +54,6 @@ const {
   storedFiles,
 } = useProvideAttachmentCell(updateModelValue)
 
-const currentCellRef = ref()
-
 watch(
   [() => rowIndex, isForm, attachmentCellRef],
   () => {
@@ -91,10 +90,20 @@ watch(
   (nextModel) => {
     if (nextModel) {
       try {
-        attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
+        const nextAttachments = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
+
+        if (isPublic.value && isForm.value) {
+          storedFiles.value = nextAttachments
+        } else {
+          attachments.value = nextAttachments
+        }
       } catch (e) {
         console.error(e)
-        attachments.value = []
+        if (isPublic.value && isForm.value) {
+          storedFiles.value = []
+        } else {
+          attachments.value = []
+        }
       }
     }
   },
@@ -102,8 +111,8 @@ watch(
 )
 
 /** updates attachments array for autosave */
-function updateModelValue(data: string | Record<string, any>) {
-  emits('update:modelValue', typeof data !== 'string' ? JSON.stringify(data) : data)
+function updateModelValue(data: string | Record<string, any>[]) {
+  emits('update:modelValue', data)
 }
 
 /** Close modal on escape press, disable dropzone as well */
@@ -119,8 +128,6 @@ watch(
     rowState.value[column.value!.title!] = storedFiles.value
   },
 )
-
-const { isSharedForm } = useSmartsheetStoreOrThrow()
 </script>
 
 <template>
@@ -159,6 +166,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
         </div>
       </a-tooltip>
     </div>
+
     <div v-else class="flex" />
 
     <template v-if="visibleItems.length">

packages/nc-gui/components/cell/attachment/utils.ts

@@ -79,37 +79,37 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     async function onFileSelect(selectedFiles: FileList | File[]) {
       if (!selectedFiles.length) return
 
-      if (isPublic.value) {
-        storedFiles.value.push(
-          ...(await Promise.all<AttachmentProps>(
-            Array.from(selectedFiles).map(
-              (file) =>
-                new Promise<AttachmentProps>((resolve) => {
-                  const res: AttachmentProps = { ...file, file, title: file.name, mimetype: file.type }
-
-                  if (isImage(file.name, (<any>file).mimetype ?? file.type)) {
-                    const reader = new FileReader()
+      if (isPublic.value && isForm.value) {
+        const newFiles = await Promise.all<AttachmentProps>(
+          Array.from(selectedFiles).map(
+            (file) =>
+              new Promise<AttachmentProps>((resolve) => {
+                const res: AttachmentProps = { ...file, file, title: file.name, mimetype: file.type }
 
-                    reader.onload = (e) => {
-                      res.data = e.target?.result
+                if (isImage(file.name, (<any>file).mimetype ?? file.type)) {
+                  const reader = new FileReader()
 
-                      resolve(res)
-                    }
+                  reader.onload = (e) => {
+                    res.data = e.target?.result
 
-                    reader.onerror = () => {
-                      resolve(res)
-                    }
+                    resolve(res)
+                  }
 
-                    reader.readAsDataURL(file)
-                  } else {
+                  reader.onerror = () => {
                     resolve(res)
                   }
-                }),
-            ),
-          )),
+
+                  reader.readAsDataURL(file)
+                } else {
+                  resolve(res)
+                }
+              }),
+          ),
         )
 
-        return updateModelValue(storedFiles.value.map((stored) => stored.file))
+        attachments.value = [...attachments.value, ...newFiles]
+
+        return updateModelValue(attachments.value)
       }
 
       const newAttachments = []
@@ -132,7 +132,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
         }
       }
 
-      updateModelValue([...attachments.value, ...newAttachments])
+      updateModelValue(JSON.stringify([...attachments.value, ...newAttachments]))
     }
 
     /** save files on drop */
@@ -163,7 +163,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       }
     }
 
-    /** our currently visible items, either the locally stored or the ones from db, depending on isPublicForm status */
+    /** our currently visible items, either the locally stored or the ones from db, depending on isPublic & isForm status */
     const visibleItems = computed<any[]>(() => (isPublic.value && isForm.value ? storedFiles.value : attachments.value))
 
     watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles))
@@ -172,6 +172,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       attachments,
       visibleItems,
       isPublic,
+      isForm,
       isReadonly,
       meta,
       column,