butter/keanu-weblite
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

improve large file upload error message

Browse source
This commit is contained in:
10G Meow 2023-08-12 11:54:43 +03:00
parent 5e3aaf291e
commit eba1c84d7a
2 changed files with 71 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/assets/translations/en.json
View file

@ -66,8 +66,9 @@
"file_prefix": "File: ", "file_prefix": "File: ",
"edited": "(edited)", "edited": "(edited)",
"download_progress": "{percentage}% downloaded", "download_progress": "{percentage}% downloaded",
"upload_file_too_large": "Maximum file size of ({configFormattedUploadSize}) exceeded. File is too large to upload!", "preparing_to_upload": "Preparing to upload...",
"upload_exceeded_file_limit": "File: ({exceededFile}) ({formattedUploadSize}) exceeds maximum limit.", "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": "Uploaded {count}",
"upload_progress_with_total": "Uploaded {count} of {total}", "upload_progress_with_total": "Uploaded {count} of {total}",
"user_changed_room_history": "{user} made room history {type}", "user_changed_room_history": "{user} made room history {type}",

20
src/components/Chat.vue
View file

@ -205,7 +205,18 @@
<div v-if="currentFileInputsDialog && !useFileModeNonAdmin"> <div v-if="currentFileInputsDialog && !useFileModeNonAdmin">
<v-dialog v-model="currentFileInputsDialog" 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"> <v-card class="ma-0 pa-0">
<v-card-title>{{ $t('message.send_attachements_dialog_title') }}</v-card-title> <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>
<span v-else> {{ $t('message.send_attachements_dialog_title') }} </span>
</v-card-title>
<v-divider></v-divider> <v-divider></v-divider>
<template v-if="imageFiles && imageFiles.length"> <template v-if="imageFiles && imageFiles.length">
<v-card-title v-if="imageFiles.length > 1"> {{ $t('message.images') }} </v-card-title> <v-card-title v-if="imageFiles.length > 1"> {{ $t('message.images') }} </v-card-title>
@ -252,7 +263,6 @@
<v-card-actions> <v-card-actions>
<v-spacer> <v-spacer>
<div v-if="currentSendError">{{ currentSendError }}</div> <div v-if="currentSendError">{{ currentSendError }}</div>
<div v-if="currentSendErrorExceededFile" class="red--text">{{ currentSendErrorExceededFile }}</div>
</v-spacer> </v-spacer>
<v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel" :disabled="sendingStatus != sendStatuses.SENDING && sendingStatus != sendStatuses.INITIAL"> <v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel" :disabled="sendingStatus != sendStatuses.SENDING && sendingStatus != sendStatuses.INITIAL">
{{ $t("menu.cancel") }} {{ $t("menu.cancel") }}
@ -260,6 +270,7 @@
<v-btn id="btn-attachment-send" color="primary" text @click="sendAttachment(undefined)" <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-if="currentSendShowSendButton" :disabled="sendingStatus != sendStatuses.INITIAL">{{ $t("menu.send") }}</v-btn>
</v-card-actions> </v-card-actions>
</template>
</v-card> </v-card>
</v-dialog> </v-dialog>
</div> </div>
@ -1179,6 +1190,7 @@ export default {
* Handle picked attachment * Handle picked attachment
*/ */
handlePickedAttachment(event) { handlePickedAttachment(event) {
this.currentFileInputs = []
const uploadedFiles = Object.values(event.target.files); const uploadedFiles = Object.values(event.target.files);
this.$matrix.matrixClient.getMediaConfig().then((config) => { this.$matrix.matrixClient.getMediaConfig().then((config) => {
@ -1187,8 +1199,8 @@ export default {
uploadedFiles.every(file => { uploadedFiles.every(file => {
if (configUploadSize && file.size > configUploadSize) { if (configUploadSize && file.size > configUploadSize) {
this.currentSendError = this.$t("message.upload_file_too_large", { configFormattedUploadSize }); this.currentSendError = this.$t("message.upload_file_too_large");
this.currentSendErrorExceededFile = this.$t("message.upload_exceeded_file_limit", { exceededFile: file.name, formattedUploadSize: this.formatBytes(file.size) }); this.currentSendErrorExceededFile = this.$t("message.upload_exceeded_file_limit", { configFormattedUploadSize });
this.currentSendShowSendButton = false; this.currentSendShowSendButton = false;
return false; return false;
} else { } else {