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

1. fix resize multiple file upload 2.show file exceeded limit

Browse source
This commit is contained in:
10G Meow 2023-08-06 12:03:50 +03:00
parent a1e80aa29e
commit da704f84d9
2 changed files with 61 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -66,7 +66,8 @@
"file_prefix": "File: ", "file_prefix": "File: ",
"edited": "(edited)", "edited": "(edited)",
"download_progress": "{percentage}% downloaded", "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": "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}",

88
src/components/Chat.vue
View file

@ -217,9 +217,16 @@
<span v-if="currentImageInput && currentImageInput.scaled && currentImageInput.useScaled"> <span v-if="currentImageInput && currentImageInput.scaled && currentImageInput.useScaled">
{{ currentImageInput.scaledDimensions.width }} x {{ currentImageInput.scaledDimensions.height }}</span> {{ currentImageInput.scaledDimensions.width }} x {{ currentImageInput.scaledDimensions.height }}</span>
<span v-else-if="currentImageInput && currentImageInput.dimensions"> <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"> <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-switch v-if="currentImageInput && currentImageInput.scaled" :label="$t('message.scale_image')"
v-model="currentImageInput.useScaled" /> v-model="currentImageInput.useScaled" />
</div> </div>
@ -241,6 +248,7 @@
<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>
<div v-else>{{ currentSendProgress }}</div> <div v-else>{{ currentSendProgress }}</div>
</v-spacer> </v-spacer>
<v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel"> <v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel">
@ -420,6 +428,7 @@ export default {
currentSendProgress: null, currentSendProgress: null,
currentSendShowSendButton: true, currentSendShowSendButton: true,
currentSendError: null, currentSendError: null,
currentSendErrorExceededFile: null,
showEmojiPicker: false, showEmojiPicker: false,
selectedEvent: null, selectedEvent: null,
editedEvent: null, editedEvent: null,
@ -519,10 +528,10 @@ export default {
computed: { computed: {
notificationCount, notificationCount,
nonImageFiles() { nonImageFiles() {
return this.isCurrentFileInputsAnArray && this.currentFileInputs.filter(file => !file.type.includes("image/")) return this.isCurrentFileInputsAnArray && this.currentFileInputs.filter(file => !file?.type.includes("image/"))
}, },
imageFiles() { imageFiles() {
return this.isCurrentFileInputsAnArray && this.currentFileInputs.filter(file => file.type.includes("image/")) return this.isCurrentFileInputsAnArray && this.currentFileInputs.filter(file => file?.type.includes("image/"))
}, },
isCurrentFileInputsAnArray() { isCurrentFileInputsAnArray() {
return Array.isArray(this.currentFileInputs) return Array.isArray(this.currentFileInputs)
@ -1098,15 +1107,18 @@ export default {
this.$refs.attachment.click(); this.$refs.attachment.click();
}, },
optimizeImage(e,event,file) { optimizeImage(evt,file) {
file.image = e.target.result; let fileObj = {}
file.dimensions = null; fileObj.image = evt.target.result;
fileObj.dimensions = null;
fileObj.type = file.type;
fileObj.actualSize = file.size;
try { try {
file.dimensions = sizeOf(dataUriToBuffer(e.target.result)); fileObj.dimensions = sizeOf(dataUriToBuffer(evt.target.result));
// Need to resize? // Need to resize?
const w = file.dimensions.width; const w = fileObj.dimensions.width;
const h = file.dimensions.height; const h = fileObj.dimensions.height;
if (w > 640 || h > 640) { if (w > 640 || h > 640) {
var aspect = w / h; var aspect = w / h;
var newWidth = parseInt((w > h ? 640 : 640 * aspect).toFixed()); var newWidth = parseInt((w > h ? 640 : 640 * aspect).toFixed());
@ -1118,19 +1130,19 @@ export default {
outputType: "blob", outputType: "blob",
}); });
imageResize imageResize
.play(event.target) .play(evt.target.result)
.then((img) => { .then((img) => {
Vue.set( Vue.set(
file, fileObj,
"scaled", "scaled",
new File([img], file.name, { new File([img], file.name, {
type: img.type, type: img.type,
lastModified: Date.now(), lastModified: Date.now(),
}) })
); );
Vue.set(file, "useScaled", true); Vue.set(fileObj, "useScaled", true);
Vue.set(file, "scaledSize", img.size); Vue.set(fileObj, "scaledSize", img.size);
Vue.set(file, "scaledDimensions", { Vue.set(fileObj, "scaledDimensions", {
width: newWidth, width: newWidth,
height: newHeight, height: newHeight,
}); });
@ -1142,24 +1154,19 @@ export default {
} catch (error) { } catch (error) {
console.error("Failed to get image dimensions: " + error); console.error("Failed to get image dimensions: " + error);
} }
return file return fileObj
}, },
handleFileReader(event, file) { handleFileReader(file) {
if (file) { if (file) {
let optimizedFileObj;
var reader = new FileReader(); var reader = new FileReader();
reader.onload = (e) => { reader.onload = (evt) => {
if (file.type.startsWith("image/")) { 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, optimizedFileObj] : [optimizedFileObj];
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;
}
});
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
@ -1168,7 +1175,27 @@ export default {
* Handle picked attachment * Handle picked attachment
*/ */
handlePickedAttachment(event) { 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() { showStickerPicker() {
@ -1210,8 +1237,10 @@ export default {
.catch((err) => { .catch((err) => {
if (err.name === "AbortError" || err === "Abort") { if (err.name === "AbortError" || err === "Abort") {
this.currentSendError = null; this.currentSendError = null;
this.currentSendErrorExceededFile = null;
} else { } else {
this.currentSendError = err.LocaleString(); this.currentSendError = err.LocaleString();
this.currentSendErrorExceededFile = err.LocaleString();
} }
this.currentSendOperation = null; this.currentSendOperation = null;
this.currentSendProgress = null; this.currentSendProgress = null;
@ -1228,6 +1257,7 @@ export default {
this.currentFileInputs = null; this.currentFileInputs = null;
this.currentSendProgress = null; this.currentSendProgress = null;
this.currentSendError = null; this.currentSendError = null;
this.currentSendErrorExceededFile = null;
}, },
addAttachment(file) { addAttachment(file) {