Finish unification of attachment sending

src/components/Chat.vue

@@ -26,13 +26,14 @@
       <VoiceRecorder class="audio-layout" v-if="useVoiceMode" :micButtonRef="$refs.mic_button" :ptt="showRecorderPTT" :show="showRecorder"
           v-on:close="showRecorder = false" v-on:file="onVoiceRecording" :sendTypingIndicators="useVoiceMode" />
 
-    <FileDropLayout class="file-drop-root" v-if="useFileModeNonAdmin" :room="room"
+    <SendAttachmentsLayout 
+      v-if="room && useFileModeNonAdmin" 
+      :room="room"
       v-on:pick-file="showAttachmentPicker(false)"
       v-on:add-files="(files) => addAttachments(files)"
-      v-on:remove-file="currentFileInputs.splice($event, 1)"
-      v-on:reset="v"
-      :attachments="currentFileInputs"
+      :batch="uploadBatch"
       v-on:close="closeFileMode"
+      :showBackButton="false"
     />
 
     <div v-if="!useVoiceMode && !useFileModeNonAdmin" :class="{'chat-content': true, 'flex-grow-1': true, 'flex-shrink-1': true, 'invisible': !initialLoadDone}" ref="chatContainer"
@@ -318,9 +319,7 @@ import BottomSheet from "./BottomSheet.vue";
 import imageResize from "image-resize";
 import CreatePollDialog from "./CreatePollDialog.vue";
 import chatMixin, { ROOM_READ_MARKER_EVENT_PLACEHOLDER } from "./chatMixin";
-import sendAttachmentsMixin from "./sendAttachmentsMixin.ts";
 import AudioLayout from "./AudioLayout.vue";
-import FileDropLayout from "./file_mode/FileDropLayout";
 import SendAttachmentsLayout from "./file_mode/SendAttachmentsLayout.vue";
 import roomTypeMixin from "./roomTypeMixin";
 import roomMembersMixin from "./roomMembersMixin";
@@ -369,7 +368,7 @@ ScrollPosition.prototype.prepareFor = function (direction) {
 
 export default {
   name: "Chat",
-  mixins: [chatMixin, roomTypeMixin, sendAttachmentsMixin, roomMembersMixin],
+  mixins: [chatMixin, roomTypeMixin, roomMembersMixin],
   components: {
     ChatHeader,
     ChatHeaderPrivate,
@@ -384,7 +383,6 @@ export default {
     BottomSheet,
     CreatePollDialog,
     AudioLayout,
-    FileDropLayout,
     SendAttachmentsLayout,
     UserProfileDialog,
     PurgeRoomDialog,
@@ -412,7 +410,6 @@ export default {
       timelineWindowPaginating: false,
 
       scrollPosition: null,
-      currentFileInputs: [],
       uploadBatch: undefined,
       showEmojiPicker: false,
       selectedEvent: null,
@@ -1385,7 +1382,8 @@ export default {
      */
     showAttachmentPicker(reset) {
       if (reset) {
-        this.resetAttachments();
+        this.uploadBatch?.cancel();
+        this.uploadBatch = null;
       }
       this.$refs.attachment.click();
     },
@@ -1414,43 +1412,6 @@ export default {
       this.$refs.stickerPickerSheet.open();
     },
 
-    sendAttachment(withText) {
-      this.$refs.attachment.value = null;
-      if (this.isCurrentFileInputsAnArray) {
-        const text = withText || "";
-        const promise = this.sendAttachments(text, this.currentFileInputs);
-        promise.then(() => {
-          this.sendingAttachments = [];
-          this.currentFileInputs = [];
-          this.sendingStatus = "initial"
-        })
-        .catch((err) => {
-          if (err.name === "AbortError" || err === "Abort") {
-            this.currentSendError = null;
-            this.currentSendErrorExceededFile = null;
-          } else {
-            this.currentSendError = err.LocaleString();
-            this.currentSendErrorExceededFile = err.LocaleString();
-          }
-        });
-      }
-    },
-
-    cancelSendAttachment() {
-      this.$refs.attachment.value = null;
-      if (this.sendingStatus != "initial") {
-        this.cancelSendAttachments();
-      }
-      this.currentFileInputs = [];
-      this.currentSendError = null;
-      this.currentSendErrorExceededFile = null;
-      this.sendingStatus = "initial";
-    },
-
-    resetAttachments() {
-      this.cancelSendAttachment();
-    },
-
     /**
      * Called by message components that need to change their layout. This will avoid "jumping" in the UI, because
      * we remember scroll position, apply the layout change, then restore the scroll.
@@ -1885,19 +1846,22 @@ export default {
     },
 
     onVoiceRecording(event) {
-      this.currentSendShowSendButton = false;
-      // TODO - refactor
-      this.currentFileInputs = Array.isArray(this.currentFileInputs) ? [...this.currentFileInputs, event.file] : [event.file];
+      const batch = this.$matrix.attachmentManager.createUpload(this.room);
+      batch.addAttachment(this.$matrix.attachmentManager.createAttachment(event.file));
       var text = undefined;
       if (this.currentInput && this.currentInput.length > 0) {
         text = this.currentInput;
         this.currentInput = "";
       }
-      this.sendAttachment(text);
-      this.showRecorder = false;
-
-      // Log event
-      this.$analytics.event("Audio", "Voice message sent");
+      batch.send(text)
+        .then(() => {
+          this.showRecorder = false;
+          // Log event
+          this.$analytics.event("Audio", "Voice message sent");
+        })
+        .catch((err) => {
+          console.error("Failed to send voice message", err);
+        })
     },
 
     closeRoomWelcomeHeader() {
@@ -1973,7 +1937,8 @@ export default {
     },
 
     closeFileMode() {
-      this.resetAttachments();
+      this.uploadBatch?.cancel();
+      this.uploadBatch = undefined;
       this.$matrix.leaveRoomAndNavigate(this.room.roomId)
         .catch((err) => {
           console.log("Error leaving", err);