From eba1c84d7a8d8e4d66e4ca5474cfa2508b2319b4 Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sat, 12 Aug 2023 11:54:43 +0300
Subject: [PATCH] improve large file upload error message

---
 src/assets/translations/en.json |   5 +-
 src/components/Chat.vue         | 124 +++++++++++++++++---------------
 2 files changed, 71 insertions(+), 58 deletions(-)

diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index fea61ac..40f5aee 100644
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@@ -66,8 +66,9 @@
     "file_prefix": "File: ",
     "edited": "(edited)",
     "download_progress": "{percentage}% downloaded",
-    "upload_file_too_large": "Maximum file size of ({configFormattedUploadSize}) exceeded. File is too large to upload!",
-    "upload_exceeded_file_limit": "File: ({exceededFile}) ({formattedUploadSize}) exceeds maximum limit.",
+    "preparing_to_upload": "Preparing to upload...",
+    "upload_file_too_large": "File is too large to upload!",
+    "upload_exceeded_file_limit": "Maximum file size of ({configFormattedUploadSize}) exceeded. ",
     "upload_progress": "Uploaded {count}",
     "upload_progress_with_total": "Uploaded {count} of {total}",
     "user_changed_room_history": "{user} made room history {type}",
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index c6bd3dd..e67d54e 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -205,61 +205,72 @@
     <div v-if="currentFileInputsDialog && !useFileModeNonAdmin">
       <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">
-          <v-card-title>{{ $t('message.send_attachements_dialog_title') }}</v-card-title>
-          <v-divider></v-divider>
-          <template v-if="imageFiles && imageFiles.length">
-            <v-card-title v-if="imageFiles.length > 1"> {{ $t('message.images') }} </v-card-title>
-            <v-card-text :class="{'ma-0 pa-2' : true, 'd-flex flex-wrap justify-center': imageFiles.length > 1}">
-              <div :class="{'col-4': imageFiles.length > 1}" v-for="(currentImageInput, id) in imageFiles" :key="id">
-                <div style="position: relative">
-                  <v-img v-if="currentImageInput && currentImageInput.image" :aspect-ratio="1" :src="currentImageInput.image"
-                    contain class="current-image-input-path" />
-                  <v-progress-linear :style="{ position: 'absolute', left: '0', right: '0', bottom: '0', opacity: currentImageInput.sendInfo ? '1' : '0' }" :value="currentImageInput.sendInfo ? currentImageInput.sendInfo.progress : 0"></v-progress-linear>
-                </div>
-                <div>
-                  <span v-if="currentImageInput && currentImageInput.scaled && currentImageInput.useScaled">
-                    {{ currentImageInput.scaledDimensions.width }} x {{ currentImageInput.scaledDimensions.height }}</span>
-                  <span v-else-if="currentImageInput && currentImageInput.dimensions">
-                    {{ currentImageInput.dimensions.width }} x {{ currentImageInput.dimensions.height }}
-                  </span>
-
-                  <span v-if="currentImageInput && currentImageInput.scaled && currentImageInput.useScaled">
-                    ({{ formatBytes(currentImageInput.scaledSize) }})
-                  </span>
-                  <span v-else>
-                    ({{ formatBytes(currentImageInput.actualSize) }})
-                  </span>
-
-                  <v-switch v-if="currentImageInput && currentImageInput.scaled" :label="$t('message.scale_image')"
-                    v-model="currentImageInput.useScaled" :disabled="currentImageInput.sendInfo" />
-                </div>
-              </div>
-            </v-card-text>
-          </template>
-          <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 currentFileInputs" :key="id">
-                <div v-if="!currentImageInputPath.type.includes('image/')">
-                  <span> {{ $t('message.file') }}: {{ currentImageInputPath.name }}</span>
-                  <span> ({{ formatBytes(currentImageInputPath.size) }})</span>
-                  <v-progress-linear :style="{ opacity: currentImageInputPath.sendInfo ? '1' : '0' }" :value="currentImageInputPath.sendInfo ? currentImageInputPath.sendInfo.progress : 0"></v-progress-linear>
-                </div>
-              </div>
-            </v-card-text>
-          </template>
-          <v-divider></v-divider>
-          <v-card-actions>
-            <v-spacer>
-              <div v-if="currentSendError">{{ currentSendError }}</div>
+          <v-card-text v-if="!currentFileInputs.length">
+            {{ this.$t("message.preparing_to_upload")}}
+            <v-progress-linear
+              indeterminate
+              class="mb-0"
+            ></v-progress-linear>
+          </v-card-text>
+          <template v-else>
+            <v-card-title>
               <div v-if="currentSendErrorExceededFile" class="red--text">{{ currentSendErrorExceededFile }}</div>
-            </v-spacer>
-            <v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel" :disabled="sendingStatus != sendStatuses.SENDING && sendingStatus != sendStatuses.INITIAL">
-              {{ $t("menu.cancel") }}
-            </v-btn>
-            <v-btn id="btn-attachment-send" color="primary" text @click="sendAttachment(undefined)"
-              v-if="currentSendShowSendButton" :disabled="sendingStatus != sendStatuses.INITIAL">{{ $t("menu.send") }}</v-btn>
-          </v-card-actions>
+              <span v-else> {{ $t('message.send_attachements_dialog_title') }} </span>
+            </v-card-title>
+            <v-divider></v-divider>
+            <template v-if="imageFiles && imageFiles.length">
+              <v-card-title v-if="imageFiles.length > 1"> {{ $t('message.images') }} </v-card-title>
+              <v-card-text :class="{'ma-0 pa-2' : true, 'd-flex flex-wrap justify-center': imageFiles.length > 1}">
+                <div :class="{'col-4': imageFiles.length > 1}" v-for="(currentImageInput, id) in imageFiles" :key="id">
+                  <div style="position: relative">
+                    <v-img v-if="currentImageInput && currentImageInput.image" :aspect-ratio="1" :src="currentImageInput.image"
+                      contain class="current-image-input-path" />
+                    <v-progress-linear :style="{ position: 'absolute', left: '0', right: '0', bottom: '0', opacity: currentImageInput.sendInfo ? '1' : '0' }" :value="currentImageInput.sendInfo ? currentImageInput.sendInfo.progress : 0"></v-progress-linear>
+                  </div>
+                  <div>
+                    <span v-if="currentImageInput && currentImageInput.scaled && currentImageInput.useScaled">
+                      {{ currentImageInput.scaledDimensions.width }} x {{ currentImageInput.scaledDimensions.height }}</span>
+                    <span v-else-if="currentImageInput && currentImageInput.dimensions">
+                      {{ currentImageInput.dimensions.width }} x {{ currentImageInput.dimensions.height }}
+                    </span>
+
+                    <span v-if="currentImageInput && currentImageInput.scaled && currentImageInput.useScaled">
+                      ({{ formatBytes(currentImageInput.scaledSize) }})
+                    </span>
+                    <span v-else>
+                      ({{ formatBytes(currentImageInput.actualSize) }})
+                    </span>
+
+                    <v-switch v-if="currentImageInput && currentImageInput.scaled" :label="$t('message.scale_image')"
+                      v-model="currentImageInput.useScaled" :disabled="currentImageInput.sendInfo" />
+                  </div>
+                </div>
+              </v-card-text>
+            </template>
+            <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 currentFileInputs" :key="id">
+                  <div v-if="!currentImageInputPath.type.includes('image/')">
+                    <span> {{ $t('message.file') }}: {{ currentImageInputPath.name }}</span>
+                    <span> ({{ formatBytes(currentImageInputPath.size) }})</span>
+                    <v-progress-linear :style="{ opacity: currentImageInputPath.sendInfo ? '1' : '0' }" :value="currentImageInputPath.sendInfo ? currentImageInputPath.sendInfo.progress : 0"></v-progress-linear>
+                  </div>
+                </div>
+              </v-card-text>
+            </template>
+            <v-divider></v-divider>
+            <v-card-actions>
+              <v-spacer>
+                <div v-if="currentSendError">{{ currentSendError }}</div>
+              </v-spacer>
+              <v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel" :disabled="sendingStatus != sendStatuses.SENDING && sendingStatus != sendStatuses.INITIAL">
+                {{ $t("menu.cancel") }}
+              </v-btn>
+              <v-btn id="btn-attachment-send" color="primary" text @click="sendAttachment(undefined)"
+                v-if="currentSendShowSendButton" :disabled="sendingStatus != sendStatuses.INITIAL">{{ $t("menu.send") }}</v-btn>
+            </v-card-actions>
+           </template>
         </v-card>
       </v-dialog>
     </div>
@@ -1179,6 +1190,7 @@ export default {
      * Handle picked attachment
      */
     handlePickedAttachment(event) {
+       this.currentFileInputs = []
         const uploadedFiles = Object.values(event.target.files);
 
         this.$matrix.matrixClient.getMediaConfig().then((config) => {
@@ -1187,8 +1199,8 @@ export default {
 
           uploadedFiles.every(file => {
             if (configUploadSize && file.size > configUploadSize) {
-              this.currentSendError = this.$t("message.upload_file_too_large", { configFormattedUploadSize });
-              this.currentSendErrorExceededFile = this.$t("message.upload_exceeded_file_limit", { exceededFile: file.name, formattedUploadSize: this.formatBytes(file.size) });
+              this.currentSendError = this.$t("message.upload_file_too_large");
+              this.currentSendErrorExceededFile = this.$t("message.upload_exceeded_file_limit", { configFormattedUploadSize });
               this.currentSendShowSendButton = false;
               return false;
             } else {