fix: Download button opens URL instead of downloading (#10710)

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 { fileType, dataUrl, extension } = attachment.value;
-  const blob = await response.blob();
+  downloadFile({ url: dataUrl, type: fileType, extension });
-  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);
 };
 </script>
 

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 { fileType, dataUrl, extension } = attachment;
-  const blob = await response.blob();
+  downloadFile({ url: dataUrl, type: fileType, extension });
-  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);
 };
 </script>
 

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');
+  downloadFile({ url, type, extension });
-  link.href = url;
-  link.download = `attachment.${type}`;
-  link.click();
 };
 
 const onRotate = type => {

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",

pnpm-lock.yaml

@@ -23,8 +23,8 @@ importers:
         specifier: 1.1.1-next
         version: 1.1.1-next
       '@chatwoot/utils':
-        specifier: ^0.0.30
+        specifier: ^0.0.31
-        version: 0.0.30
+        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':
+  '@chatwoot/utils@0.0.31':
-    resolution: {integrity: sha512-UfKn2GUV/9PF7zoj17dAoyx5RZkJihjjclhWTtG0SHRfRizKS/pg0SpXSt9ToAEDeNeRtqmD7RrVMUaso8TZxw==}
+    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