Merge pull request #751 from Adamant-im/hotfix/cannot-upload-mp4-to-ipfs

File attachments issues

Author: bludnic

android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "im.adamant.adamantmessengerpwa"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 490
-        versionName "4.9.0"
+        versionCode 491
+        versionName "4.9.1"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

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

@@ -1,6 +1,6 @@
 {
   "name": "adamant-im",
-  "version": "4.9.0",
+  "version": "4.9.1",
   "author": "ADAMANT Foundation <[email protected]>",
   "license": "GPLv3",
   "description": "Decentralized Messenger",
@@ -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')

src/components/AChat/AChatAttachment/AChatImageModal.vue

@@ -200,29 +200,35 @@ export interface AttachmentAsset {
 /**
  * AIP-18: https://github.com/Adamant-im/AIPs/pull/54/files
  * @param {Array<FileData>} files
- * @param {Array<[string, string]>} [nonces] First element is the nonce of original file, second is nonce of preview
- * @param {Array<[string, string]>} [ids] List of files IDs after uploading to IPFS. First element is the ID of original file, second is ID of preview.
- * @param {string} [comment]
+ * @param {string} [comment] Optional comment associated with the transaction
+ * @param {Array<[string, string]>} [cids] List of files IDs after uploading to IPFS. First element is the ID of original file, second is ID of preview.
  */
-export function attachmentAsset(files: FileData[], comment?: string): AttachmentAsset {
+export function attachmentAsset(
+  files: FileData[],
+  comment?: string,
+  cids?: [string, string]
+): AttachmentAsset {
   return {
     files: files.map(({ file, width, height, cid, preview, encoded }) => {
       const name = extractFileName(file.name)
       const extension = extractFileExtension(file.name)!
       const resolution: FileAsset['resolution'] = width && height ? [width, height] : undefined
 
+      const fileCid = cids?.[0] || cid
+      const previewCid = cids?.[1] || preview?.cid
+
       return {
         mimeType: file.type,
         name,
         extension,
         resolution,
         duration: undefined, // @todo check if is a video or audio file
         size: file.size,
-        id: cid,
+        id: fileCid,
         nonce: encoded.nonce,
         preview: preview
           ? {
-              id: preview.cid,
+              id: previewCid!,
               nonce: preview.encoded.nonce,
               extension
             }

src/lib/adamant-api/asset.ts

@@ -8,6 +8,8 @@ import { attachmentAsset } from '@/lib/adamant-api/asset'
 type Params = {
   recipientId: string
   senderId: string
+  recipientPublicKey: string
+  senderPublicKey: string
   files: FileData[]
   nonces?: [string, string]
   ids?: [string, string]
@@ -25,6 +27,8 @@ export function createAttachment({
   files,
   message,
   replyToId,
+  recipientPublicKey,
+  senderPublicKey,
   status = TS.PENDING
 }: Params) {
   const timestamp = Date.now()
@@ -35,6 +39,8 @@ export function createAttachment({
     hash: id,
     recipientId,
     senderId,
+    recipientPublicKey,
+    senderPublicKey,
     message: message || '',
     status,
     timestamp: Date.now(),

src/lib/chat/helpers/createAttachment.ts

@@ -1,3 +1,4 @@
+import { getPublicKey } from '@/lib/adamant-api'
 import validateAddress from '@/lib/validateAddress'
 import * as admApi from '@/lib/adamant-api'
 import {
@@ -613,7 +614,6 @@ const actions = {
     const normalizedMessages = messages.map(normalizeMessage)
     dispatch('botCommands/reInitCommands', normalizedMessages, { root: true })
     normalizedMessages.forEach((message) => {
-
       const { recipientId, senderId } = message
 
       if (recipientId === rootState.address || senderId === rootState.address) {
@@ -774,10 +774,15 @@ const actions = {
    * @returns {Promise}
    */
   async sendAttachment({ commit, rootState }, { files, message, recipientId, replyToId }) {
+    const recipientPublicKey = await getPublicKey(recipientId)
+    const senderPublicKey = await getPublicKey(rootState.address)
+
     let messageObject = createAttachment({
       message,
       recipientId,
       senderId: rootState.address,
+      recipientPublicKey,
+      senderPublicKey,
       files,
       replyToId
     })
@@ -789,7 +794,7 @@ const actions = {
     })
 
     const cids = files.map((file) => [file.cid, file.preview?.cid]).filter((cid) => !!cid)
-    const newAsset = replyToId
+    let newAsset = replyToId
       ? { replyto_id: replyToId, reply_message: attachmentAsset(files, message) }
       : attachmentAsset(files, message)
     commit('updateMessage', {
@@ -806,6 +811,18 @@ const actions = {
         }
       })
       console.debug('Files uploaded', uploadData)
+
+      // Heisenbug: After uploading an MP4 file, the CID returned by the IPFS node differs from the locally computed one.
+      // So we update the CIDs one more time, just to be sure.
+      newAsset = replyToId
+        ? { replyto_id: replyToId, reply_message: attachmentAsset(files, message, uploadData.cids) }
+        : attachmentAsset(files, message, uploadData.cids)
+      commit('updateMessage', {
+        id: messageObject.id,
+        partnerId: recipientId,
+        asset: newAsset
+      })
+      console.debug('Updated CIDs after upload', newAsset)
     } catch (err) {
       commit('updateMessage', {
         id: messageObject.id,