1. review changes 2. improve different file type handling 3. File upload dialogue improvements which now shows all file type

src/assets/translations/en.json

@@ -90,7 +90,11 @@
     "incoming_message_deleted_text": "This message was deleted.",
     "not_allowed_to_send": "Only admins and moderators are allowed to send to the room",
     "reaction_count_more": "{reactionCount} more",
-    "seen_by": "Seen by no members | Seen by 1 member | Seen by {count} members"
+    "seen_by": "Seen by no members | Seen by 1 member | Seen by {count} members",
+    "file": "File",
+    "files": "Files",
+    "images": "Images",
+    "send_attachements_dialog_title": "Do you want to send following attachments ?"
   },
   "room": {
     "invitations": "You have no invitations | You have 1 invitation | You have {count} invitations",

src/components/Chat.vue

@@ -190,10 +190,13 @@
     <input ref="attachment" type="file" name="attachment" @change="handlePickedAttachment($event)"
                 accept="image/*, audio/*, video/*, .pdf" class="d-none" multiple/>
 
-    <div v-if="isCurrentImageInputsPathDialog">
+    <div v-if="currentFileInputsDialog">
-      <v-dialog v-model="isCurrentImageInputsPathDialog" class="ma-0 pa-0" :width="$vuetify.breakpoint.smAndUp ? '50%' : '85%'" persistent scrollable>
+      <v-dialog v-model="currentFileInputsDialog" class="ma-0 pa-0" :width="$vuetify.breakpoint.smAndUp ? '50%' : '85%'" persistent scrollable>
         <v-card class="ma-0 pa-0">
-          <template v-if="Array.isArray(currentImageInputs)">
+          <v-card-title>{{ $t('message.send_attachements_dialog_title') }}</v-card-title>
+          <v-divider></v-divider>
+          <template v-if="Array.isArray(currentImageInputs) && currentImageInputs.length">
+            <v-card-title v-if="currentImageInputs.length > 1"> {{ $t('message.images') }} </v-card-title>
             <v-card-text :class="{'ma-0 pa-2' : true, 'd-flex flex-wrap justify-center': currentImageInputs.length > 1}">
               <div :class="{'col-4': currentImageInputs.length > 1}" v-for="(currentImageInput, id) in currentImageInputs" :key="id">
                 <v-img v-if="currentImageInput && currentImageInput.image" :aspect-ratio="1" :src="currentImageInput.image"
@@ -211,24 +214,26 @@
               </div>
             </v-card-text>
           </template>
-          <template v-else>
+          <template v-if="Array.isArray(currentFileInputs) && currentFileInputs.length">
+            <v-card-title v-if="nonImageFiles.length > 1">{{ $t('message.files') }}</v-card-title>
             <v-card-text>
-              <div v-for="(currentImageInputPath, id) in currentImageInputsPath" :key="id">
+              <div v-for="(currentImageInputPath, id) in currentFileInputs" :key="id">
-                <span>file: {{ currentImageInputPath.name }}</span>
+                <div v-if="!currentImageInputPath.type.includes('image/')">
-                <span> ({{ formatBytes(currentImageInputPath.size) }})</span>
+                  <span> {{ $t('message.file') }}: {{ currentImageInputPath.name }}</span>
+                  <span> ({{ formatBytes(currentImageInputPath.size) }})</span>
+                </div>
               </div>
             </v-card-text>
           </template>
-          <v-card-text>
-            <div v-if="currentSendError">{{ currentSendError }}</div>
-            <div v-else>{{ currentSendProgress }}</div>
-          </v-card-text>
           <v-divider></v-divider>
           <v-card-actions>
-            <v-spacer></v-spacer>
+            <v-spacer>
-            <v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel">{{
+              <div v-if="currentSendError">{{ currentSendError }}</div>
-            $t("menu.cancel")
+              <div v-else>{{ currentSendProgress }}</div>
-            }}</v-btn>
+            </v-spacer>
+            <v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel">
+              {{ $t("menu.cancel") }}
+            </v-btn>
             <v-btn id="btn-attachment-send" color="primary" text @click="sendAttachment"
               v-if="currentSendShowSendButton" :disabled="currentSendOperation != null">{{ $t("menu.send") }}</v-btn>
           </v-card-actions>
@@ -355,7 +360,7 @@ export default {
 
       scrollPosition: null,
       currentImageInputs: null,
-      currentImageInputsPath: null,
+      currentFileInputs: null,
       currentSendOperation: null,
       currentSendProgress: null,
       currentSendShowSendButton: true,
@@ -439,15 +444,18 @@ export default {
   },
 
   computed: {
-    isCurrentImageInputsPath() {
+    nonImageFiles() {
-      return Array.isArray(this.currentImageInputsPath)
+      return this.isCurrentFileInputsAnArray && this.currentFileInputs.filter(file => !file.type.includes("image/"))
     },
-    isCurrentImageInputsPathDialog: {
+    isCurrentFileInputsAnArray() {
+      return Array.isArray(this.currentFileInputs)
+    },
+    currentFileInputsDialog: {
       get() {
-        return this.isCurrentImageInputsPath
+        return this.isCurrentFileInputsAnArray
       },
       set() {
-        this.currentImageInputsPath = null
+        this.currentFileInputs = null
       }
     },
     chatContainer() {
@@ -1003,15 +1011,12 @@ export default {
       if (file) {
         var reader = new FileReader();
         reader.onload = (e) => {
-          const file = event.target.files[0];
           if (file.type.startsWith("image/")) {
             const currentImageInput = this.optimizeImage(e, event, file)
             this.currentImageInputs = Array.isArray(this.currentImageInputs) ? [...this.currentImageInputs, currentImageInput] : [currentImageInput]
           }
-          this.currentImageInputsPath = Array.isArray(this.currentImageInputsPath) ? [...this.currentImageInputsPath, file] : [file];
-          console.log(this.currentImageInput);
           this.$matrix.matrixClient.getMediaConfig().then((config) => {
-            this.currentImageInputPath = file;
+            this.currentFileInputs = Array.isArray(this.currentFileInputs) ? [...this.currentFileInputs, file] : [file];
             if (config["m.upload.size"] && file.size > config["m.upload.size"]) {
               this.currentSendError = this.$t("message.upload_file_too_large");
               this.currentSendShowSendButton = false;
@@ -1046,43 +1051,35 @@ export default {
         });
       }
     },
-    sendImage(withText, inputFile) {
-      this.currentSendProgress = null;
-      this.currentSendOperation = util.sendImage(
-        this.$matrix.matrixClient,
-        this.roomId,
-        inputFile,
-        this.onUploadProgress
-      );
-      this.currentSendOperation
-        .then(() => {
-          this.currentSendOperation = null;
-          this.currentImageInputs = null;
-          this.currentImageInputsPath = null;
-          this.currentSendProgress = null;
-          if (withText) {
-            this.sendMessage(withText);
-          }
-        })
-        .catch((err) => {
-          if (err.name === "AbortError" || err === "Abort") {
-            this.currentSendError = null;
-          } else {
-            this.currentSendError = err.LocaleString();
-          }
-          this.currentSendOperation = null;
-          this.currentSendProgress = null;
-        });
-    },
     sendAttachment(withText) {
       this.$refs.attachment.value = null;
-      if (this.isCurrentImageInputsPath) {
+      if (this.isCurrentFileInputsAnArray) {
-        let inputFiles = this.currentImageInputsPath;
+        let inputFiles = this.currentFileInputs;
         if (Array.isArray(this.currentImageInputs) && this.currentImageInputs.scaled && this.currentImageInputs.useScaled) {
           // Send scaled version of image instead!
           inputFiles = this.currentImageInputs.map(({scaled}) => scaled)
         }
-        inputFiles.forEach((inputFile) => this.sendImage(withText, inputFile))
+
+      const promises = inputFiles.map(inputFile => util.sendImage(this.$matrix.matrixClient, this.roomId, inputFile, this.onUploadProgress));
+
+      Promise.all(promises).then(() => {
+        this.currentSendOperation = null;
+        this.currentImageInputs = null;
+        this.currentFileInputs = null;
+        this.currentSendProgress = null;
+        if (withText) {
+          this.sendMessage(withText);
+        }
+      })
+      .catch((err) => {
+        if (err.name === "AbortError" || err === "Abort") {
+          this.currentSendError = null;
+        } else {
+          this.currentSendError = err.LocaleString();
+        }
+        this.currentSendOperation = null;
+        this.currentSendProgress = null;
+      });
       }
     },
 
@@ -1093,7 +1090,7 @@ export default {
       }
       this.currentSendOperation = null;
       this.currentImageInputs = null;
-      this.currentImageInputsPath = null;
+      this.currentFileInputs = null;
       this.currentSendProgress = null;
       this.currentSendError = null;
     },
@@ -1473,7 +1470,7 @@ export default {
 
     onVoiceRecording(event) {
       this.currentSendShowSendButton = false;
-      this.currentImageInputsPath = Array.isArray(this.currentImageInputsPath) ? [...this.currentImageInputsPath, event.file] : [event.file];
+      this.currentFileInputs = Array.isArray(this.currentFileInputs) ? [...this.currentFileInputs, event.file] : [event.file];
       var text = undefined;
       if (this.currentInput && this.currentInput.length > 0) {
         text = this.currentInput;