fix(gui-v2): attachment cell not accepting files in shared form view

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

@@ -5,7 +5,9 @@ import { useSortable } from './sort'
 import Modal from './Modal.vue'
 import Carousel from './Carousel.vue'
 import {
+  IsFormInj,
   computed,
+  inject,
   isImage,
   openLink,
   ref,
@@ -28,6 +30,10 @@ const { modelValue, rowIndex } = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
+const isForm = inject(IsFormInj, ref(false))
+
+const attachmentCellRef = ref<HTMLDivElement>()
+
 const sortableRef = ref<HTMLDivElement>()
 
 const { cellRefs } = useSmartsheetStoreOrThrow()!
@@ -46,7 +52,9 @@ const {
   storedFiles,
 } = useProvideAttachmentCell(updateModelValue)
 
-const currentCellRef = computed(() => cellRefs.value.find((cell) => cell.dataset.key === `${rowIndex}${column.value.id}`))
+const currentCellRef = computed(() =>
+  isForm.value ? attachmentCellRef.value : cellRefs.value.find((cell) => cell.dataset.key === `${rowIndex}${column.value.id}`),
+)
 
 const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
 
@@ -93,7 +101,10 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
 </script>
 
 <template>
-  <div class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1">
+  <div
+    ref="attachmentCellRef"
+    class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1"
+  >
     <Carousel />
 
     <template v-if="isSharedForm || (!isReadonly && !dragging && !!currentCellRef)">
@@ -135,9 +146,8 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
       >
         <div
           v-for="(item, i) of visibleItems"
-          :id="item.url"
           :key="item.url || item.title"
-          :class="isImage(item.title, item.mimetype) ? '' : 'border-1 rounded'"
+          :class="isImage(item.title, item.mimetype ?? item.type) ? '' : 'border-1 rounded'"
           class="nc-attachment flex items-center justify-center min-h-[50px]"
         >
           <a-tooltip placement="bottom">
@@ -146,7 +156,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
             </template>
 
             <nuxt-img
-              v-if="isImage(item.title, item.mimetype)"
+              v-if="isImage(item.title, item.mimetype ?? item.type) && (item.url || item.data)"
               quality="75"
               placeholder
               :alt="item.title || `#${i}`"

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

@@ -48,7 +48,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     const storedFilesData = ref<{ title: string; file: File }[]>([])
 
     /** keep user selected File object */
-    const storedFiles = ref<File[]>([])
+    const storedFiles = ref<{ title: string; file: File }[]>([])
 
     const attachments = ref<File[]>([])
 
@@ -60,7 +60,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
     const { api, isLoading } = useApi()
 
-    const { files, open } = useFileDialog()
+    const { files, open, reset } = useFileDialog()
 
     /** remove a file from our stored attachments (either locally stored or saved ones) */
     function removeFile(i: number) {
@@ -81,22 +81,27 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       if (!selectedFiles.length || isPublicGrid) return
 
       if (isPublic.value) {
-        storedFiles.value.push(...selectedFiles)
-        storedFilesData.value.push(
+        storedFiles.value.push(
           ...(await Promise.all<AttachmentProps>(
             Array.from(selectedFiles).map(
               (file) =>
                 new Promise<AttachmentProps>((resolve) => {
-                  const res: AttachmentProps = { file, title: file.name }
-                  if (isImage(file.name, (file as any).mimetype)) {
+                  const res: any = { ...file, file, title: file.name }
+
+                  console.log(res)
+                  if (isImage(file.name, (<any>file).mimetype ?? file.type)) {
                     const reader = new FileReader()
-                    reader.onload = (e: any) => {
+
+                    reader.onload = (e) => {
                       res.data = e.target?.result
+
                       resolve(res)
                     }
+
                     reader.onerror = () => {
                       resolve(res)
                     }
+
                     reader.readAsDataURL(file)
                   } else {
                     resolve(res)
@@ -106,7 +111,9 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
           )),
         )
 
-        return updateModelValue(storedFilesData.value.map((storedFile) => storedFile.file))
+        reset()
+
+        return updateModelValue(storedFiles.value.map((next) => next.file))
       }
 
       const newAttachments = []
@@ -129,6 +136,8 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
         }
       }
 
+      reset()
+
       updateModelValue([...attachments.value, ...newAttachments])
     }
 
@@ -161,7 +170,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     }
 
     /** our currently visible items, either the locally stored or the ones from db, depending on isPublicForm status */
-    const visibleItems = computed<any[]>(() => [...attachments.value, ...storedFiles.value])
+    const visibleItems = computed<any[]>(() => (isPublic.value ? storedFiles.value : attachments.value))
 
     watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles))
 

packages/nc-gui-v2/components/shared-view/Form.vue

@@ -29,33 +29,32 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
     >
   }
 
-  return required || (columnObj && columnObj.rqd && !columnObj.cdf)
+  return !!(required || (columnObj && columnObj.rqd && !columnObj.cdf))
 }
 </script>
 
 <template>
-  <div class="bg-primary !h-[100vh] overflow-auto w-full flex flex-col">
-    <div>
-      <img src="~/assets/img/icons/512x512-trans.png" width="30" class="mx-4 mt-2" />
-    </div>
+  <div class="!h-[100vh] overflow-auto w-full flex flex-col">
     <div class="m-4 mt-2 bg-white rounded p-2 flex-1">
       <a-alert v-if="notFound" type="warning" class="mx-auto mt-10 max-w-[300px]" message="Not found"> </a-alert>
 
       <template v-else-if="submitted">
         <div class="flex justify-center">
           <div v-if="sharedFormView" style="min-width: 350px" class="mt-3">
-            <a-alert type="success" outlined :message="sharedFormView.success_msg || 'Successfully submitted form data'">
-            </a-alert>
+            <a-alert type="success" outlined :message="sharedFormView.success_msg || 'Successfully submitted form data'" />
+
             <p v-if="sharedFormView.show_blank_form" class="text-xs text-gray-500 text-center my-4">
               New form will be loaded after {{ secondsRemain }} seconds
             </p>
+
             <div v-if="sharedFormView.submit_another_form" class="text-center">
               <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
             </div>
           </div>
         </div>
       </template>
-      <div v-else-if="sharedFormView" class="">
+
+      <div v-else-if="sharedFormView">
         <a-row class="justify-center">
           <a-col :md="20">
             <div>
@@ -81,6 +80,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                     <div class="text-lg text-left mx-4 py-2 px-1 text-gray-500">
                       {{ sharedFormView.subheading }}
                     </div>
+
                     <div class="h-full">
                       <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col mt-4 px-4 space-y-2">
                         <div class="flex">
@@ -90,6 +90,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                             :required="isRequired(field, field.required)"
                             :hide-menu="true"
                           />
+
                           <SmartsheetHeaderCell
                             v-else
                             :column="{ ...field, title: field.label || field.title }"

packages/nc-gui-v2/components/smartsheet/Form.vue

@@ -152,9 +152,8 @@ function onMoveCallback(event: any) {
 
 function onMove(event: any) {
   const { newIndex, element, oldIndex } = event.added || event.moved || event.removed
-  console.log(event)
+
   if (shouldSkipColumn(element)) {
-    console.log('SKIPPED')
     return
   }
 
@@ -408,7 +407,14 @@ onMounted(async () => {
           </div>
         </div>
       </div>
-      <Draggable :list="hiddenColumns" draggable=".item" group="form-inputs" @start="drag = true" @end="drag = false">
+      <Draggable
+        :list="hiddenColumns"
+        item-key="id"
+        draggable=".item"
+        group="form-inputs"
+        @start="drag = true"
+        @end="drag = false"
+      >
         <template #item="{ element }">
           <a-card
             size="small"

packages/nc-gui-v2/composables/useViewColumns.ts

@@ -51,6 +51,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
           [curr.fk_column_id]: curr,
         }
       }, {})
+
       fields.value = meta.value?.columns
         ?.map((column: ColumnType) => {
           const currentColumnField = fieldById[column.id!] || {}