diff --git a/packages/nc-gui/components/cell/attachment/utils.ts b/packages/nc-gui/components/cell/attachment/utils.ts index 74bd18a1d6..bd2a5e1748 100644 --- a/packages/nc-gui/components/cell/attachment/utils.ts +++ b/packages/nc-gui/components/cell/attachment/utils.ts @@ -159,10 +159,11 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState( if (selectedFiles.length) { files.push(file as File) } else { - const fileName = populateUniqueFileName((file as AttachmentReqType).fileName ?? '', [ - ...attachments.value, - ...imageUrls, - ]) + const fileName = populateUniqueFileName( + (file as AttachmentReqType).fileName ?? '', + [...attachments.value, ...imageUrls], + (file as File)?.type || (file as AttachmentReqType)?.mimetype || '', + ) imageUrls.push({ ...(file as AttachmentReqType), fileName, title: fileName }) } @@ -222,7 +223,11 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState( for (const uploadedFile of data) { newAttachments.push({ ...uploadedFile, - title: populateUniqueFileName(uploadedFile?.title, [...attachments.value, ...newAttachments]), + title: populateUniqueFileName( + uploadedFile?.title, + [...attachments.value, ...newAttachments], + uploadedFile?.mimetype, + ), }) } } catch (e: any) { @@ -277,16 +282,16 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState( const imageUrl = extractImageSrcFromRawHtml(sanitizedHtml) ?? '' - const imageData = imageUrl ? await getImageDataFromUrl(imageUrl) : '' - if (imageData) { + const imageData = imageUrl ? ((await getImageDataFromUrl(imageUrl)) as AttachmentReqType) : {} + if (imageData?.mimetype) { await onFileSelect( [], [ { ...imageData, - url: imageUrl, - fileName: `image.${imageData.mimetype?.split('/')[1]}`, - title: `image.${imageData.mimetype?.split('/')[1]}`, + ...(isPublic.value && isForm.value ? {} : { url: imageUrl }), + fileName: `image.${imageData?.mimetype?.split('/')[1]}`, + title: `image.${imageData?.mimetype?.split('/')[1]}`, }, ], ) @@ -314,10 +319,26 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState( try { const response = await fetch(imageUrl) if (response.ok && response.headers.get('content-type')?.startsWith('image/')) { - return { + const res = { mimetype: response.headers.get('content-type') || undefined, size: +(response.headers.get('content-length') || 0) || undefined, + data: undefined, + } as { minetype?: string; size?: number; data?: any } + + if (isPublic.value && isForm.value) { + const blob = await response.blob() + + res.data = await new Promise((resolve, reject) => { + const reader = new FileReader() + reader.onloadend = () => { + resolve(reader.result) + } + reader.onerror = reject + reader.readAsDataURL(blob) + }) } + + return res } throw new Error('Field to parse image url') } catch (err) { diff --git a/packages/nc-gui/composables/useMultiSelect/convertCellData.ts b/packages/nc-gui/composables/useMultiSelect/convertCellData.ts index 79f5d2a590..5ca19962a0 100644 --- a/packages/nc-gui/composables/useMultiSelect/convertCellData.ts +++ b/packages/nc-gui/composables/useMultiSelect/convertCellData.ts @@ -201,7 +201,10 @@ export default function convertCellData( const newAttachments: AttachmentType[] = [] for (const att of attachments) { - newAttachments.push({ ...att, title: populateUniqueFileName(att?.title, [...oldAttachments, ...newAttachments]) }) + newAttachments.push({ + ...att, + title: populateUniqueFileName(att?.title, [...oldAttachments, ...newAttachments], att?.mimetype), + }) } return JSON.stringify([...oldAttachments, ...newAttachments]) } else if (files.length && attachments.length) { diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts index 266887d2c1..1e0fc6c423 100644 --- a/packages/nc-gui/composables/useMultiSelect/index.ts +++ b/packages/nc-gui/composables/useMultiSelect/index.ts @@ -1243,7 +1243,11 @@ export function useMultiSelect( for (const uploadedFile of data) { newAttachments.push({ ...uploadedFile, - title: populateUniqueFileName(uploadedFile?.title, [...handleParseAttachmentCellData(oldValue), ...newAttachments]), + title: populateUniqueFileName( + uploadedFile?.title, + [...handleParseAttachmentCellData(oldValue), ...newAttachments], + uploadedFile?.mimetype, + ), }) } return newAttachments diff --git a/packages/nc-gui/utils/fileUtils.ts b/packages/nc-gui/utils/fileUtils.ts index d5d137ea2f..8e9f5674d9 100644 --- a/packages/nc-gui/utils/fileUtils.ts +++ b/packages/nc-gui/utils/fileUtils.ts @@ -63,7 +63,12 @@ export function extractImageSrcFromRawHtml(rawText: string) { } } -export function populateUniqueFileName(fn: string, attachments: any[]) { +export function populateUniqueFileName(fn: string, attachments: any[], mimeType: string) { + // If the image extension is not present, the while loop will go into an infinite loop. So, add the extension first if not present. + if (!isImage(fn)) { + fn = `${fn}.${mimeType.split('/')[1]}` + } + let c = 1 while (attachments.some((att) => att?.title === fn || att?.fileName === fn)) { fn = fn.replace(/(.+?)(\.[^.]+)$/, `$1(${c++})$2`)