diff --git a/app/javascript/dashboard/components-next/message/bubbles/Image.vue b/app/javascript/dashboard/components-next/message/bubbles/Image.vue index bb5aba572..ce05071ee 100644 --- a/app/javascript/dashboard/components-next/message/bubbles/Image.vue +++ b/app/javascript/dashboard/components-next/message/bubbles/Image.vue @@ -5,6 +5,8 @@ import Button from 'next/button/Button.vue'; import Icon from 'next/icon/Icon.vue'; import { useSnakeCase } from 'dashboard/composables/useTransformKeys'; import { useMessageContext } from '../provider.js'; +import { downloadFile } from '@chatwoot/utils'; + import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue'; const emit = defineEmits(['error']); @@ -23,16 +25,8 @@ const handleError = () => { }; const downloadAttachment = async () => { - const response = await fetch(attachment.value.dataUrl); - const blob = await response.blob(); - const url = window.URL.createObjectURL(blob); - const a = document.createElement('a'); - a.href = url; - a.download = `attachment${attachment.value.extension || ''}`; - document.body.appendChild(a); - a.click(); - window.URL.revokeObjectURL(url); - document.body.removeChild(a); + const { fileType, dataUrl, extension } = attachment.value; + downloadFile({ url: dataUrl, type: fileType, extension }); }; diff --git a/app/javascript/dashboard/components-next/message/chips/Audio.vue b/app/javascript/dashboard/components-next/message/chips/Audio.vue index eb5093d29..95c0ba1aa 100644 --- a/app/javascript/dashboard/components-next/message/chips/Audio.vue +++ b/app/javascript/dashboard/components-next/message/chips/Audio.vue @@ -2,6 +2,7 @@ import { computed, onMounted, useTemplateRef, ref } from 'vue'; import Icon from 'next/icon/Icon.vue'; import { timeStampAppendedURL } from 'dashboard/helper/URLHelper'; +import { downloadFile } from '@chatwoot/utils'; const { attachment } = defineProps({ attachment: { @@ -73,17 +74,8 @@ const onEnd = () => { }; const downloadAudio = async () => { - const response = await fetch(timeStampURL.value); - const blob = await response.blob(); - const url = window.URL.createObjectURL(blob); - const anchor = document.createElement('a'); - anchor.href = url; - const filename = timeStampURL.value.split('/').pop().split('?')[0] || 'audio'; - anchor.download = filename; - document.body.appendChild(anchor); - anchor.click(); - window.URL.revokeObjectURL(url); - document.body.removeChild(anchor); + const { fileType, dataUrl, extension } = attachment; + downloadFile({ url: dataUrl, type: fileType, extension }); }; diff --git a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue index ffdc71cf2..200984f4c 100644 --- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue +++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue @@ -3,6 +3,7 @@ import { ref, computed, onMounted } from 'vue'; import { useStoreGetters } from 'dashboard/composables/store'; import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents'; import { messageTimestamp } from 'shared/helpers/timeHelper'; +import { downloadFile } from '@chatwoot/utils'; import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue'; @@ -117,14 +118,11 @@ const onClickChangeAttachment = (attachment, index) => { }; const onClickDownload = () => { - const { file_type: type, data_url: url } = activeAttachment.value; + const { file_type: type, data_url: url, extension } = activeAttachment.value; if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) { return; } - const link = document.createElement('a'); - link.href = url; - link.download = `attachment.${type}`; - link.click(); + downloadFile({ url, type, extension }); }; const onRotate = type => { diff --git a/package.json b/package.json index 7858b3dcb..83bfb4bf5 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "@breezystack/lamejs": "^1.2.7", "@chatwoot/ninja-keys": "1.2.3", "@chatwoot/prosemirror-schema": "1.1.1-next", - "@chatwoot/utils": "^0.0.30", + "@chatwoot/utils": "^0.0.31", "@formkit/core": "^1.6.7", "@formkit/vue": "^1.6.7", "@hcaptcha/vue3-hcaptcha": "^1.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c0dde98c7..590f16924 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,8 +23,8 @@ importers: specifier: 1.1.1-next version: 1.1.1-next '@chatwoot/utils': - specifier: ^0.0.30 - version: 0.0.30 + specifier: ^0.0.31 + version: 0.0.31 '@formkit/core': specifier: ^1.6.7 version: 1.6.7 @@ -404,8 +404,8 @@ packages: '@chatwoot/prosemirror-schema@1.1.1-next': resolution: {integrity: sha512-/M2qZ+ZF7GlQNt1riwVP499fvp3hxSqd5iy8hxyF9pkj9qQ+OKYn5JK+v3qwwqQY3IxhmNOn1Lp6tm7vstrd9Q==} - '@chatwoot/utils@0.0.30': - resolution: {integrity: sha512-UfKn2GUV/9PF7zoj17dAoyx5RZkJihjjclhWTtG0SHRfRizKS/pg0SpXSt9ToAEDeNeRtqmD7RrVMUaso8TZxw==} + '@chatwoot/utils@0.0.31': + resolution: {integrity: sha512-15ir4Jf6q4/gIFC6KqgWZu/NEWYnaw5j2/JB+CYGzZ5a/e+rXG7nmY/sObvRqCnMW6LCS2++shlVQdTxle3CyQ==} engines: {node: '>=10'} '@codemirror/commands@6.7.0': @@ -5154,7 +5154,7 @@ snapshots: prosemirror-utils: 1.2.2(prosemirror-model@1.22.3)(prosemirror-state@1.4.3) prosemirror-view: 1.34.1 - '@chatwoot/utils@0.0.30': + '@chatwoot/utils@0.0.31': dependencies: date-fns: 2.29.3