From 1f1f9bbb868f1f06613c719be41f20a38fa46eb5 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Thu, 11 May 2023 10:11:34 +0200
Subject: [PATCH] Fix cancel of file uploads again (after upstream changes)

Also, check server max upload size and fail early for large files!
---
 src/assets/translations/en.json |  1 +
 src/components/Chat.vue         | 15 +++++++++++----
 src/plugins/utils.js            | 11 +++++++----
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index 03e9ec3..cc8c121 100644
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@@ -58,6 +58,7 @@
     "file_prefix": "File: ",
     "edited": "(edited)",
     "download_progress": "{percentage}% downloaded",
+    "upload_file_too_large": "File is too large to upload!",
     "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 2cd265a..1fbb9b9 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -262,7 +262,7 @@
 
 <script>
 import Vue from "vue";
-import { TimelineWindow, EventTimeline, AbortError } from "matrix-js-sdk";
+import { TimelineWindow, EventTimeline } from "matrix-js-sdk";
 import util from "../plugins/utils";
 import MessageOperations from "./messages/MessageOperations.vue";
 import AvatarOperations from "./messages/AvatarOperations.vue";
@@ -936,7 +936,6 @@ export default {
         var reader = new FileReader();
         reader.onload = (e) => {
           const file = event.target.files[0];
-          this.currentSendShowSendButton = true;
           if (file.type.startsWith("image/")) {
             this.currentImageInput = {
               image: e.target.result,
@@ -985,7 +984,15 @@ export default {
             }
           }
           console.log(this.currentImageInput);
-          this.currentImageInputPath = file;
+          this.$matrix.matrixClient.getMediaConfig().then((config) => {
+            this.currentImageInputPath = 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(event.target.files[0]);
       }
@@ -1034,7 +1041,7 @@ export default {
             }
           })
           .catch((err) => {
-            if (err instanceof AbortError || err === "Abort") {
+            if (err.name === "AbortError" || err === "Abort") {
               this.currentSendError = null;
             } else {
               this.currentSendError = err.LocaleString();
diff --git a/src/plugins/utils.js b/src/plugins/utils.js
index 8d0eca5..873b126 100644
--- a/src/plugins/utils.js
+++ b/src/plugins/utils.js
@@ -28,11 +28,12 @@ var _browserCanRecordAudioF = function () {
 }
 var _browserCanRecordAudio = _browserCanRecordAudioF();
 
-class AbortablePromise extends Promise {
+class UploadPromise extends Promise {
     constructor(executor) {
         const aborter = {
             aborted: false,
             abortablePromise: undefined,
+            matrixClient: undefined,
         }
 
         const normalExecutor = function (resolve, reject) {
@@ -42,8 +43,9 @@ class AbortablePromise extends Promise {
         super(normalExecutor);
         this.abort = () => {
             aborter.aborted = true;
-            if (aborter.abortablePromise) {
-                aborter.abortablePromise.abort();
+            if (aborter.abortablePromise && aborter.matrixClient) {
+                aborter.matrixClient.cancelUpload(aborter.abortablePromise);
+                aborter.matrixClient = undefined;
                 aborter.abortablePromise = undefined;
             }
         };
@@ -320,7 +322,7 @@ class Util {
     }
 
     sendImage(matrixClient, roomId, file, onUploadProgress) {
-        return new AbortablePromise((resolve, reject, aborter) => {
+        return new UploadPromise((resolve, reject, aborter) => {
             const abortionController = aborter;
             var reader = new FileReader();
             reader.onload = (e) => {
@@ -366,6 +368,7 @@ class Util {
 
                 if (!matrixClient.isRoomEncrypted(roomId)) {
                     // Not encrypted.
+                    abortionController.matrixClient = matrixClient;
                     abortionController.abortablePromise = matrixClient.uploadContent(data, opts);
                     abortionController.abortablePromise
                         .then((response) => {