diff --git a/packages/nc-gui/components/cell/attachment/utils.ts b/packages/nc-gui/components/cell/attachment/utils.ts index e2c8e040d8..25e265ed0c 100644 --- a/packages/nc-gui/components/cell/attachment/utils.ts +++ b/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) } diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json index 999c96e0aa..e58ac4dc21 100644 --- a/packages/nc-gui/lang/en.json +++ b/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", diff --git a/packages/nc-gui/utils/fileUtils.ts b/packages/nc-gui/utils/fileUtils.ts index 8e9f5674d9..d0fb9e00d1 100644 --- a/packages/nc-gui/utils/fileUtils.ts +++ b/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