fix: handle shared form drag & drop attachments

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

@@ -13,6 +13,7 @@ import {
   extractImageSrcFromRawHtml,
   inject,
   isImage,
+  isImageUrl,
   message,
   parseProp,
   ref,
@@ -282,7 +283,12 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
         const imageUrl = extractImageSrcFromRawHtml(sanitizedHtml) ?? ''
 
-        const imageData = imageUrl ? ((await getImageDataFromUrl(imageUrl)) as AttachmentReqType) : {}
+        if (!imageUrl) {
+          message.error(t('msg.error.draggedContentIsNotTypeOfImage'))
+          return
+        }
+
+        const imageData = (await getImageDataFromUrl(imageUrl)) as AttachmentReqType
         if (imageData?.mimetype) {
           await onFileSelect(
             [],
@@ -295,6 +301,8 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
               },
             ],
           )
+        } else {
+          message.error(t('msg.error.fieldToParseImageData'))
         }
       }
     }
@@ -318,13 +326,19 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     async function getImageDataFromUrl(imageUrl: string) {
       try {
         const response = await fetch(imageUrl)
-        if (response.ok && response.headers.get('content-type')?.startsWith('image/')) {
-          return {
-            mimetype: response.headers.get('content-type') || undefined,
-            size: +(response.headers.get('content-length') || 0) || undefined,
-          } as { minetype?: string; size?: number }
+        if (response.ok) {
+          if (response.headers.get('content-type')?.startsWith('image/')) {
+            return {
+              mimetype: response.headers.get('content-type') || undefined,
+              size: +(response.headers.get('content-length') || 0) || undefined,
+            } as { minetype?: string; size?: number }
+          } else if (isImageUrl(imageUrl)) {
+            return {
+              mimetype: `image/${imageUrl.slice(imageUrl.lastIndexOf('.') + 1).toLowerCase()}`,
+              size: +(response.headers.get('content-length') || 0) || undefined,
+            } as { minetype?: string; size?: number }
+          }
         }
-        throw new Error('Field to parse image url')
       } catch (err) {
         console.log(err)
       }

packages/nc-gui/lang/en.json

@@ -1348,7 +1348,9 @@
       "copyToClipboardError": "Failed to copy to clipboard",
       "pasteFromClipboardError": "Failed to paste from clipboard",
       "multiFieldSaveValidation": "Please complete the configuration of all fields before saving",
-      "somethingWentWrong": "Something went wrong"
+      "somethingWentWrong": "Something went wrong",
+      "draggedContentIsNotTypeOfImage":"Dragged content is not type of image",
+      "fieldToParseImageData": "Field to parse image data"
     },
     "toast": {
       "exportMetadata": "Base metadata exported successfully",

packages/nc-gui/utils/fileUtils.ts

@@ -1,10 +1,29 @@
-const imageExt = ['jpeg', 'gif', 'png', 'png', 'svg', 'bmp', 'ico', 'jpg', 'webp']
+const imageExt = [
+  'jpeg',
+  'gif',
+  'png',
+  'png',
+  'svg',
+  'bmp',
+  'ico',
+  'jpg',
+  'webp',
+  'avif',
+  'heif',
+  'heifs',
+  'heic',
+  'heic-sequence',
+]
 
 const isImage = (name: string, mimetype?: string) => {
   return imageExt.some((e) => name?.toLowerCase().endsWith(`.${e}`)) || mimetype?.startsWith('image/')
 }
 
-export { isImage, imageExt }
+const isImageUrl = (url: string) => {
+  return imageExt.some((e) => url?.toLowerCase().endsWith(`.${e}`))
+}
+
+export { isImage, imageExt, isImageUrl }
 // Ref : https://stackoverflow.com/a/12002275
 
 // Tested in Mozilla Firefox browser, Chrome