Merge pull request #4502 from nocodb/fix/attachment-related-issues

fix(nocodb): attachment-related issues

packages/nc-gui/app.vue

@@ -36,7 +36,7 @@ if (typeof window !== 'undefined') {
 <template>
   <a-config-provider>
     <NuxtLayout :name="disableBaseLayout ? false : 'base'">
-      <NuxtPage :transition="false" :key="key" />
+      <NuxtPage :key="key" :transition="false" />
     </NuxtLayout>
   </a-config-provider>
 </template>

packages/nc-gui/components/smartsheet/header/CellIcon.ts

@@ -19,7 +19,6 @@ import {
   isJSON,
   isPercent,
   isPhoneNumber,
-  isPrimary,
   isRating,
   isSet,
   isSingleSelect,

packages/nc-gui/components/virtual-cell/Lookup.vue

@@ -27,14 +27,6 @@ const meta = inject(MetaInj, ref())
 
 const cellValue = inject(CellValueInj, ref())
 
-const arrValue = computed(() => {
-  if (!cellValue.value) return []
-
-  if (Array.isArray(cellValue.value)) return cellValue.value
-
-  return [cellValue.value]
-})
-
 const relationColumn = computed(
   () =>
     meta.value?.columns?.find((c) => c.id === (column.value?.colOptions as LookupType)?.fk_relation_column_id) as
@@ -66,6 +58,19 @@ const lookupColumn = computed(
       | undefined,
 )
 
+const arrValue = computed(() => {
+  if (!cellValue.value) return []
+
+  // if lookup column is Attachment and relation type is Belongs to wrap the value in an array
+  // since the attachment component expects an array or JSON string array
+  if (lookupColumn.value?.uidt === UITypes.Attachment && relationColumn.value?.colOptions?.type === RelationTypes.BELONGS_TO)
+    return [cellValue.value]
+
+  if (Array.isArray(cellValue.value)) return cellValue.value
+
+  return [cellValue.value]
+})
+
 provide(MetaInj, lookupTableMeta)
 
 provide(CellUrlDisableOverlayInj, ref(true))

packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts

@@ -158,9 +158,10 @@ class BaseModelSqlv2 {
       qb.orderBy(this.model.primaryKey.column_name);
     }
 
-    const data = await qb.first();
+    let data = await qb.first();
 
     if (data) {
+      data = this.convertAttachmentType(data);
       const proto = await this.getProto();
       data.__proto__ = proto;
     }
@@ -365,8 +366,7 @@ class BaseModelSqlv2 {
     qb.groupBy(args.column_name);
     if (sorts) await sortV2(sorts, qb, this.dbDriver);
     applyPaginate(qb, rest);
-    const data = await qb;
+    return this.convertAttachmentType(await qb);
-    return data;
   }
 
   async multipleHmList({ colId, ids }, args: { limit?; offset? } = {}) {
@@ -672,10 +672,10 @@ class BaseModelSqlv2 {
     );
 
     let children = await this.extractRawQueryAndExec(finalQb);
-    children = this.convertAttachmentType(children);
     if (this.isMySQL) {
       children = children[0];
     }
+    children = this.convertAttachmentType(children);
     const proto = await (
       await Model.getBaseModelSQL({
         id: rtnId,
@@ -967,8 +967,8 @@ class BaseModelSqlv2 {
     applyPaginate(qb, rest);
 
     const proto = await childModel.getProto();
-    const data = await qb;
+    let data = await qb;
-
+    data = this.convertAttachmentType(data);
     return data.map((c) => {
       c.__proto__ = proto;
       return c;
@@ -2737,6 +2737,15 @@ class BaseModelSqlv2 {
       : await this.dbDriver.raw(query);
   }
 
+  private _convertAttachmentType(attachmentColumns, d) {
+    attachmentColumns.forEach((col) => {
+      if (d[col.title] && typeof d[col.title] === 'string') {
+        d[col.title] = JSON.parse(d[col.title]);
+      }
+    });
+    return d;
+  }
+
   private convertAttachmentType(data) {
     // attachment is stored in text and parse in UI
     // convertAttachmentType is used to convert the response in string to array of object in API response
@@ -2745,17 +2754,13 @@ class BaseModelSqlv2 {
         (c) => c.uidt === UITypes.Attachment
       );
       if (attachmentColumns.length) {
-        if (!Array.isArray(data)) {
+        if (Array.isArray(data)) {
-          data = [data];
+          data = data.map((d) =>
-        }
+            this._convertAttachmentType(attachmentColumns, d)
-        data = data.map((d) => {
+          );
-          attachmentColumns.forEach((col) => {
+        } else {
-            if (d[col.title] && typeof d[col.title] === 'string') {
+          this._convertAttachmentType(attachmentColumns, data);
-              d[col.title] = JSON.parse(d[col.title]);
         }
-          });
-          return d;
-        });
       }
     }
     return data;

packages/nocodb/src/lib/meta/helpers/populateSamplePayload.ts

@@ -94,7 +94,14 @@ async function getSampleColumnValue(column: Column): Promise<any> {
       break;
     case UITypes.Attachment:
       {
-        return '[{"url":"https://nocodb.com/dummy.png","title":"image.png","mimetype":"image/png","size":0}]';
+        return [
+          {
+            url: 'https://nocodb.com/dummy.png',
+            title: 'image.png',
+            mimetype: 'image/png',
+            size: 0,
+          },
+        ];
       }
       break;
     case UITypes.Checkbox: