1. fix resize multiple file upload 2.show file exceeded limit
This commit is contained in:
10G Meow
parent
a1e80aa29e
commit
da704f84d9
2 changed files with 61 additions and 30 deletions
|
|
@ -66,7 +66,8 @@
|
|||
"file_prefix": "File: ",
|
||||
"edited": "(edited)",
|
||||
"download_progress": "{percentage}% downloaded",
|
||||
"upload_file_too_large": "File is too large to upload!",
|
||||
"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.",
|
||||
"upload_progress": "Uploaded {count}",
|
||||
"upload_progress_with_total": "Uploaded {count} of {total}",
|
||||
"user_changed_room_history": "{user} made room history {type}",
|
||||
|
|
|
|||
|
|
@ -217,9 +217,16 @@
|
|||
<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>
|
||||
{{ currentImageInput.dimensions.width }} x {{ currentImageInput.dimensions.height }}
|
||||
</span>
|
||||
|
||||
<span v-if="currentImageInput && currentImageInput.scaled && currentImageInput.useScaled">
|
||||
({{ formatBytes(currentImageInput.scaledSize) }})</span>
|
||||
({{ 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" />
|
||||
</div>
|
||||
|
|
@ -241,6 +248,7 @@
|
|||
<v-card-actions>
|
||||
<v-spacer>
|
||||
<div v-if="currentSendError">{{ currentSendError }}</div>
|
||||
<div v-if="currentSendErrorExceededFile" class="red--text">{{ currentSendErrorExceededFile }}</div>
|
||||
<div v-else>{{ currentSendProgress }}</div>
|
||||
</v-spacer>
|
||||
<v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel">
|
||||
|
|
@ -420,6 +428,7 @@ export default {
|
|||
currentSendProgress: null,
|
||||
currentSendShowSendButton: true,
|
||||
currentSendError: null,
|
||||
currentSendErrorExceededFile: null,
|
||||
showEmojiPicker: false,
|
||||
selectedEvent: null,
|
||||
editedEvent: null,
|
||||
|
|
@ -519,10 +528,10 @@ export default {
|
|||
computed: {
|
||||
notificationCount,
|
||||
nonImageFiles() {
|
||||
return this.isCurrentFileInputsAnArray && this.currentFileInputs.filter(file => !file.type.includes("image/"))
|
||||
return this.isCurrentFileInputsAnArray && this.currentFileInputs.filter(file => !file?.type.includes("image/"))
|
||||
},
|
||||
imageFiles() {
|
||||
return this.isCurrentFileInputsAnArray && this.currentFileInputs.filter(file => file.type.includes("image/"))
|
||||
return this.isCurrentFileInputsAnArray && this.currentFileInputs.filter(file => file?.type.includes("image/"))
|
||||
},
|
||||
isCurrentFileInputsAnArray() {
|
||||
return Array.isArray(this.currentFileInputs)
|
||||
|
|
@ -1098,15 +1107,18 @@ export default {
|
|||
this.$refs.attachment.click();
|
||||
},
|
||||
|
||||
optimizeImage(e,event,file) {
|
||||
file.image = e.target.result;
|
||||
file.dimensions = null;
|
||||
optimizeImage(evt,file) {
|
||||
let fileObj = {}
|
||||
fileObj.image = evt.target.result;
|
||||
fileObj.dimensions = null;
|
||||
fileObj.type = file.type;
|
||||
fileObj.actualSize = file.size;
|
||||
try {
|
||||
file.dimensions = sizeOf(dataUriToBuffer(e.target.result));
|
||||
fileObj.dimensions = sizeOf(dataUriToBuffer(evt.target.result));
|
||||
|
||||
// Need to resize?
|
||||
const w = file.dimensions.width;
|
||||
const h = file.dimensions.height;
|
||||
const w = fileObj.dimensions.width;
|
||||
const h = fileObj.dimensions.height;
|
||||
if (w > 640 || h > 640) {
|
||||
var aspect = w / h;
|
||||
var newWidth = parseInt((w > h ? 640 : 640 * aspect).toFixed());
|
||||
|
|
@ -1118,19 +1130,19 @@ export default {
|
|||
outputType: "blob",
|
||||
});
|
||||
imageResize
|
||||
.play(event.target)
|
||||
.play(evt.target.result)
|
||||
.then((img) => {
|
||||
Vue.set(
|
||||
file,
|
||||
fileObj,
|
||||
"scaled",
|
||||
new File([img], file.name, {
|
||||
type: img.type,
|
||||
lastModified: Date.now(),
|
||||
})
|
||||
);
|
||||
Vue.set(file, "useScaled", true);
|
||||
Vue.set(file, "scaledSize", img.size);
|
||||
Vue.set(file, "scaledDimensions", {
|
||||
Vue.set(fileObj, "useScaled", true);
|
||||
Vue.set(fileObj, "scaledSize", img.size);
|
||||
Vue.set(fileObj, "scaledDimensions", {
|
||||
width: newWidth,
|
||||
height: newHeight,
|
||||
});
|
||||
|
|
@ -1142,24 +1154,19 @@ export default {
|
|||
} catch (error) {
|
||||
console.error("Failed to get image dimensions: " + error);
|
||||
}
|
||||
return file
|
||||
return fileObj
|
||||
},
|
||||
handleFileReader(event, file) {
|
||||
handleFileReader(file) {
|
||||
if (file) {
|
||||
let optimizedFileObj;
|
||||
var reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
reader.onload = (evt) => {
|
||||
if (file.type.startsWith("image/")) {
|
||||
this.optimizeImage(e, event, file)
|
||||
optimizedFileObj = this.optimizeImage(evt, file)
|
||||
} else {
|
||||
optimizedFileObj = file
|
||||
}
|
||||
this.$matrix.matrixClient.getMediaConfig().then((config) => {
|
||||
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;
|
||||
} else {
|
||||
this.currentSendShowSendButton = true;
|
||||
}
|
||||
});
|
||||
this.currentFileInputs = Array.isArray(this.currentFileInputs) ? [...this.currentFileInputs, optimizedFileObj] : [optimizedFileObj];
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
|
@ -1168,7 +1175,27 @@ export default {
|
|||
* Handle picked attachment
|
||||
*/
|
||||
handlePickedAttachment(event) {
|
||||
Object.values(event.target.files).forEach(file => this.handleFileReader(event, file));
|
||||
const uploadedFiles = Object.values(event.target.files);
|
||||
|
||||
this.$matrix.matrixClient.getMediaConfig().then((config) => {
|
||||
const configUploadSize = config["m.upload.size"];
|
||||
const configFormattedUploadSize = this.formatBytes(configUploadSize);
|
||||
|
||||
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.currentSendShowSendButton = false;
|
||||
return false;
|
||||
} else {
|
||||
this.currentSendShowSendButton = true;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
uploadedFiles.forEach(file => this.handleFileReader(file));
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
showStickerPicker() {
|
||||
|
|
@ -1210,8 +1237,10 @@ export default {
|
|||
.catch((err) => {
|
||||
if (err.name === "AbortError" || err === "Abort") {
|
||||
this.currentSendError = null;
|
||||
this.currentSendErrorExceededFile = null;
|
||||
} else {
|
||||
this.currentSendError = err.LocaleString();
|
||||
this.currentSendErrorExceededFile = err.LocaleString();
|
||||
}
|
||||
this.currentSendOperation = null;
|
||||
this.currentSendProgress = null;
|
||||
|
|
@ -1228,6 +1257,7 @@ export default {
|
|||
this.currentFileInputs = null;
|
||||
this.currentSendProgress = null;
|
||||
this.currentSendError = null;
|
||||
this.currentSendErrorExceededFile = null;
|
||||
},
|
||||
|
||||
addAttachment(file) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue