feat(UploadFile): save to File API right after file is selected

src/components/AChat/AChatFile.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="classes.container">
     <AChatFileLoader :partner-id="partnerId" :file="img" :transaction="transaction">
-      <template #default="{ isLoading, fileUrl, width, height }">
+      <template #default="{ fileUrl, width, height }">
         <v-img :src="fileUrl" :width="400" :aspect-ratio="width / height">
           <template #placeholder>
             <div class="d-flex align-center justify-center fill-height">
@@ -16,28 +16,10 @@
 
 <script lang="ts">
 import { AChatFileLoader } from './AChatFileLoader.tsx'
-import { defineComponent, ref, PropType, onMounted } from 'vue'
+import { defineComponent, PropType } from 'vue'
 import { LocalFile, NormalizedChatMessageTransaction } from '@/lib/chat/helpers'
-import { useStore } from 'vuex'
 import { FileAsset } from '@/lib/adamant-api/asset'
 
-function imgToDataURL(file: File): Promise<string> {
-  return new Promise((resolve) => {
-    const reader = new FileReader()
-
-    reader.onload = (event) => {
-      const dataURL = event.target?.result as string
-      resolve(dataURL)
-    }
-
-    reader.readAsDataURL(file)
-  })
-}
-
-function isLocalFile(file: FileAsset | LocalFile): file is LocalFile {
-  return 'file' in file && file.file instanceof File
-}
-
 const className = 'a-chat-file'
 const classes = {
   root: className,
@@ -62,46 +44,9 @@ export default defineComponent({
     }
   },
   components: { AChatFileLoader },
-  setup(props) {
-    const store = useStore()
-    const imageUrl = ref('')
-
-    const getFileFromStorage = async () => {
-      if (isLocalFile(props.img)) {
-        imageUrl.value = await imgToDataURL(props.img.file.file)
-        return
-      }
-
-      const myAddress = store.state.address
-
-      const cid = props.img?.id
-      const fileName = props.img?.name
-      const fileType = props.img?.extension
-      const nonce = props.img?.nonce
-
-      const publicKey =
-        props.transaction.senderId === myAddress
-          ? props.transaction.recipientPublicKey
-          : props.transaction.senderPublicKey
-      imageUrl.value = await store.dispatch('attachment/getAttachmentUrl', {
-        cid,
-        publicKey,
-        nonce
-      })
-      if (!!fileName && !!fileType) {
-        // TODO: resolve MIME-type
-        // downloadFile(data, fileName, '')
-      }
-    }
-
-    onMounted(() => {
-      getFileFromStorage()
-    })
-
+  setup() {
     return {
-      classes,
-      getFileFromStorage,
-      imageUrl
+      classes
     }
   }
 })

src/components/AChat/AChatFileLoader.tsx

@@ -54,7 +54,7 @@ export const AChatFileLoader = defineComponent(
 
     const fileUrl = computed(() => {
       if (isLocalFile(props.file)) {
-        return props.file.file.content
+        return store.getters['attachment/getImageUrl'](props.file.file.cid)
       }
 
       return data.value

src/components/UploadFile.vue

@@ -11,9 +11,10 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
-import { readFileAsDataURL } from '@/lib/file'
+import { computeCID, readFileAsBuffer, readFileAsDataURL } from '@/lib/file'
 
 export type FileData = {
+  cid: string
   name: string
   type: string
   content: string
@@ -64,9 +65,19 @@ export default defineComponent({
 
       for (const file of selectedFiles) {
         const { raw, dataURL } = await readFileAsDataURL(file)
+        const arrayBuffer = await readFileAsBuffer(file)
         const { width, height } = await getImageResolution(file)
+        const cid = await computeCID(raw)
+
+        // Cache the attachment
+        const blob = new Blob([arrayBuffer], { type: file.type })
+        const url = URL.createObjectURL(blob)
+
+        // Cache image URL
+        this.$store.commit('attachment/setAttachment', { cid, url })
 
         const fileData: FileData = {
+          cid,
           name: file.name,
           type: file.type,
           content: dataURL,

src/lib/chat/helpers/normalizeMessage.d.ts

@@ -1,4 +1,4 @@
-import { FileData } from "@/components/UploadFile.vue";
+import { FileData } from '@/components/UploadFile.vue'
 import { DecodedChatMessageTransaction } from '@/lib/adamant-api'
 import { TransactionStatusType } from '@/lib/constants'
 import { ChatMessageTransaction } from '@/lib/schema/client'

src/store/modules/attachment/index.ts

@@ -23,6 +23,9 @@ const mutations: MutationTree<AttachmentsState> = {
 }
 
 const getters: GetterTree<AttachmentsState, RootState> = {
+  getImageUrl: (state) => (cid: string) => {
+    return state.attachments[cid]
+  },
   getFileMessage: (state) => (id: string) => {
     const objMessage = state.attachments[id]
     if (objMessage?.files) {