Merge branch '400-improve-error-message-for-exceeded-config-file-limit-when-uploaded' into 'dev'
improve large file upload error message See merge request keanuapp/keanuapp-weblite!224
This commit is contained in:
N Pex
commit
426653c51d
2 changed files with 71 additions and 58 deletions
|
|
@ -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}",
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue