fix(nc-gui): cater new attachments in gallery view

packages/nc-gui/composables/useViewData.ts

@@ -1,5 +1,15 @@
 import { UITypes, ViewTypes } from 'nocodb-sdk'
-import type { Api, ColumnType, FormColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
+import type {
+  Api,
+  AttachmentType,
+  ColumnType,
+  FormColumnType,
+  FormType,
+  GalleryType,
+  PaginatedType,
+  TableType,
+  ViewType,
+} from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import {
   IsPublicInj,
@@ -81,6 +91,10 @@ export function useViewData(
 
   const { isUIAllowed } = useUIPermission()
 
+  const attachmentColumns = computed(() =>
+    (meta.value?.columns as ColumnType[])?.filter((c) => c.uidt === UITypes.Attachment).map((c) => c.title),
+  )
+
   const routeQuery = $computed(() => route.query as Record<string, string>)
 
   const paginationData = computed({
@@ -187,6 +201,28 @@ export function useViewData(
     }
   }
 
+  // TODO: refactor
+  async function getAttachmentUrl(item: AttachmentType) {
+    const path = item?.path
+    // if path doesn't exist, use `item.url`
+    if (path) {
+      // try ${appInfo.value.ncSiteUrl}/${item.path} first
+      const url = `${appInfo.ncSiteUrl}/${item.path}`
+      try {
+        const res = await fetch(url)
+        if (res.ok) {
+          // use `url` if it is accessible
+          return Promise.resolve(url)
+        }
+      } catch {
+        // for some cases, `url` is not accessible as expected
+        // do nothing here
+      }
+    }
+    // if it fails, use the original url
+    return Promise.resolve(item.url)
+  }
+
   async function loadData(params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) {
     if ((!project?.value?.id || !meta.value?.id || !viewMeta.value?.id) && !isPublic.value) return
     const response = !isPublic.value
@@ -198,7 +234,25 @@ export function useViewData(
           where: where?.value,
         })
       : await fetchSharedViewData({ sortsArr: sorts.value, filtersArr: nestedFilters.value })
-    formattedData.value = formatData(response.list)
+    // reconstruct the url
+    // See /packages/nocodb/src/lib/version-upgrader/ncAttachmentUpgrader.ts for the details
+    const records = []
+    for (const record of response.list) {
+      for (const attachmentColumn of attachmentColumns.value) {
+        const oldAttachment =
+          typeof record[attachmentColumn!] === 'string' ? JSON.parse(record[attachmentColumn!]) : record[attachmentColumn!]
+        const newAttachment = []
+        for (const attachmentObj of oldAttachment) {
+          newAttachment.push({
+            ...attachmentObj,
+            url: await getAttachmentUrl(attachmentObj),
+          })
+        }
+        record[attachmentColumn!] = newAttachment
+      }
+      records.push(record)
+    }
+    formattedData.value = formatData(records)
     paginationData.value = response.pageInfo
 
     // to cater the case like when querying with a non-zero offset