diff --git a/components/views/files/upload/Upload.vue b/components/views/files/upload/Upload.vue
index 191fbc90cc..73df187ba8 100644
--- a/components/views/files/upload/Upload.vue
+++ b/components/views/files/upload/Upload.vue
@@ -71,6 +71,7 @@ export default Vue.extend({
   watch: {
     recipient() {
       this.files = cloneDeep(this.chat.files?.[this.recipient.address]) ?? []
+      this.$parent.$data.showFilePreview = this.files.length > 0
     },
   },
   mounted() {
@@ -101,6 +102,7 @@ export default Vue.extend({
           this.$data.count_error = true
           return
         }
+        const address = this.recipient.address
         this.$data.count_error = false
         for (let i = 0; i < files.length; i++) {
           /* checking .heic file needs file array buffer because sometimes its file type return empty string */
@@ -145,6 +147,10 @@ export default Vue.extend({
             }
             uploadFile.nsfw.checking = false
           }
+          this.$store.commit('chat/addFile', {
+            file: uploadFile,
+            address,
+          })
           this.loadPicture(uploadFile)
         })
         this.files.push(...newFiles)
@@ -168,10 +174,6 @@ export default Vue.extend({
         if (e.target) item.url = e.target.result
       }
       reader.readAsDataURL(item.file)
-      this.$store.commit('chat/addFile', {
-        file: item,
-        address: this.recipient.address,
-      })
     },
     /**
      * @method cancelUpload