fix(attachments): native file download doesn't work on Android

Author: bludnic

android/app/capacitor.build.gradle

@@ -9,7 +9,8 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
-
+    implementation project(':capacitor-community-file-opener')
+    implementation project(':capacitor-filesystem')
 
 }
 

android/capacitor.settings.gradle

@@ -1,3 +1,9 @@
 // DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
+
+include ':capacitor-community-file-opener'
+project(':capacitor-community-file-opener').projectDir = new File('../node_modules/@capacitor-community/file-opener/android')
+
+include ':capacitor-filesystem'
+project(':capacitor-filesystem').projectDir = new File('../node_modules/@capacitor/filesystem/android')

package-lock.json

@@ -35,8 +35,10 @@
     "postinstall": "electron-builder install-app-deps && npm run schema:generate"
   },
   "dependencies": {
+    "@capacitor-community/file-opener": "^6.0.1",
     "@capacitor/android": "^6.1.2",
     "@capacitor/core": "^6.1.2",
+    "@capacitor/filesystem": "^6.0.3",
     "@emoji-mart/data": "^1.2.1",
     "@klayr/codec": "^0.5.1",
     "@klayr/cryptography": "^4.1.1",

package.json

@@ -58,6 +58,9 @@ import { ref, computed, onMounted, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import { Capacitor } from '@capacitor/core'
+import { Directory, Filesystem, WriteFileResult } from '@capacitor/filesystem'
+import { FileOpener } from '@capacitor-community/file-opener'
 
 import AChatImageModalItem from './AChatImageModalItem.vue'
 import AChatModalFile from './AChatModalFile.vue'
@@ -69,7 +72,36 @@ function delay(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms))
 }
 
-function downloadFileByUrl(url: string, filename = 'unnamed') {
+async function downloadFileNatively(blobUrl: string, filename: string): Promise<WriteFileResult> {
+  const response = await fetch(blobUrl)
+  const blob = await response.blob()
+
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.readAsDataURL(blob)
+
+    reader.onloadend = async () => {
+      const base64Data = reader.result?.toString().split(',')[1]
+
+      Filesystem.writeFile({
+        path: filename,
+        data: base64Data!,
+        directory: Directory.Documents
+      })
+        .then(resolve)
+        .catch(reject)
+    }
+  })
+}
+
+async function downloadFileByUrl(url: string, filename = 'unnamed') {
+  if (Capacitor.isNativePlatform()) {
+    const fileResult = await downloadFileNatively(url, filename)
+    await FileOpener.open({ filePath: fileResult.uri })
+
+    return
+  }
+
   const anchor = document.createElement('a')
   anchor.href = url
   anchor.download = filename
@@ -202,7 +234,7 @@ export default {
         const fileName = file.name
           ? `${file.name}${file.extension ? '.' + file.extension : ''}`
           : undefined
-        downloadFileByUrl(imageUrl, fileName)
+        await downloadFileByUrl(imageUrl, fileName)
       } catch {
         void store.dispatch('snackbar/show', {
           message: t('chats.file_not_found')