feat(nc-gui): copy paste image in single cell

packages/nc-gui/composables/useMultiSelect/convertCellData.ts

@@ -5,16 +5,16 @@ import type { AppInfo } from '~/composables/useGlobal'
 import { parseProp } from '#imports'
 
 export default function convertCellData(
-  args: { to: UITypes; value: string; column: ColumnType; appInfo: AppInfo },
+  args: { to: UITypes; value: string; files?: FileList | File[]; column: ColumnType; appInfo: AppInfo },
   isMysql = false,
   isMultiple = false,
 ) {
-  const { to, value, column } = args
+  const { to, value, files, column } = args
 
   const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
 
   // return null if value is empty
-  if (value === '') return null
+  if (value === '' && to !== UITypes.Attachment) return null
 
   switch (to) {
     case UITypes.SingleLineText:
@@ -113,20 +113,24 @@ export default function convertCellData(
       }
     }
     case UITypes.Attachment: {
-      let parsedVal
-      try {
-        parsedVal = parseProp(value)
-        parsedVal = Array.isArray(parsedVal) ? parsedVal : [parsedVal]
-      } catch (e) {
-        if (isMultiple) {
-          return null
-        } else {
-          throw new Error('Invalid attachment data')
+      if (!value && !files) return null
+
+      let parsedVal = []
+      if (value) {
+        try {
+          parsedVal = parseProp(value)
+          parsedVal = Array.isArray(parsedVal) ? parsedVal : [parsedVal]
+        } catch (e) {
+          if (isMultiple) {
+            return null
+          } else {
+            throw new Error('Invalid attachment data')
+          }
         }
-      }
 
-      if (parsedVal.some((v: any) => v && !(v.url || v.data || v.path))) {
-        return null
+        if (parsedVal.some((v: any) => v && !(v.url || v.data || v.path))) {
+          return null
+        }
       }
 
       // TODO(refactor): duplicate logic in attachment/utils.ts
@@ -147,7 +151,7 @@ export default function convertCellData(
 
       const attachments = []
 
-      for (const attachment of parsedVal) {
+      for (const attachment of value ? parsedVal : files!) {
         if (args.appInfo.ee) {
           // verify number of files
           if (parsedVal.length > attachmentMeta.maxNumberOfAttachments) {
@@ -164,7 +168,6 @@ export default function convertCellData(
             message.error(`The size of ${attachment.name} exceeds the maximum file size ${attachmentMeta.maxAttachmentSize} MB.`)
             continue
           }
-
           // verify mime type
           if (
             !attachmentMeta.supportedAttachmentMimeTypes.includes('*') &&
@@ -179,7 +182,7 @@ export default function convertCellData(
         attachments.push(attachment)
       }
 
-      return JSON.stringify(attachments)
+      return attachments.length ? (value ? JSON.stringify(attachments) : files ? attachments : null) : null
     }
     case UITypes.SingleSelect:
     case UITypes.MultiSelect: {

packages/nc-gui/composables/useMultiSelect/index.ts

@@ -20,6 +20,7 @@ import {
   reactive,
   ref,
   unref,
+  useApi,
   useBase,
   useCopy,
   useEventListener,
@@ -61,6 +62,10 @@ export function useMultiSelect(
 
   const { isMysql, isPg } = useBase()
 
+  const { base } = storeToRefs(useBase())
+
+  const { api } = useApi()
+
   const editEnabled = ref(_editEnabled)
 
   const isMouseDown = ref(false)
@@ -772,7 +777,6 @@ export function useMultiSelect(
 
     // Replace \" with " in clipboard data
     const clipboardData = e.clipboardData?.getData('text/plain') || ''
-
     try {
       if (clipboardData?.includes('\n') || clipboardData?.includes('\t')) {
         // if the clipboard data contains new line or tab, then it is a matrix or LongText
@@ -878,6 +882,7 @@ export function useMultiSelect(
           const pasteValue = convertCellData(
             {
               value: clipboardData,
+              files: columnObj.uidt === UITypes.Attachment && e.clipboardData?.files?.length ? e.clipboardData?.files : undefined,
               to: columnObj.uidt as UITypes,
               column: columnObj,
               appInfo: unref(appInfo),
@@ -885,7 +890,11 @@ export function useMultiSelect(
             isMysql(meta.value?.source_id),
           )
 
-          if (pasteValue !== undefined) {
+          if (columnObj.uidt === UITypes.Attachment && e.clipboardData?.files?.length && pasteValue?.length) {
+            const uploadedFiles = await handleFileUpload(pasteValue, columnObj.id!)
+            rowObj.row[columnObj.title!] =
+              Array.isArray(uploadedFiles) && uploadedFiles.length ? JSON.stringify(uploadedFiles) : null
+          } else if (pasteValue) {
             rowObj.row[columnObj.title!] = pasteValue
           }
 
@@ -957,6 +966,22 @@ export function useMultiSelect(
     event.preventDefault()
   }
 
+  async function handleFileUpload(files: File[], columnId: string) {
+    try {
+      const data = await api.storage.upload(
+        {
+          path: [NOCO, base.value.id, meta.value?.id, columnId].join('/'),
+        },
+        {
+          files,
+        },
+      )
+      return data
+    } catch (e: any) {
+      message.error(e.message || t('msg.error.internalError'))
+    }
+  }
+
   useEventListener(document, 'keydown', handleKeyDown)
   useEventListener(document, 'mouseup', handleMouseUp)
   useEventListener(document, 'paste', handlePaste)