FIX: Clean up upload events properly in composer (#14052)

FIX: Clean up upload events properly in composer (#14052)

I was storing the wrong object as the event listener reference for the paste and mobile upload button click events so they were not being cleaned properly on element destruction.

Also renamed uploadButton to the more descriptive mobileUploadButton.

diff --git a/app/assets/javascripts/discourse/app/mixins/composer-upload-uppy.js b/app/assets/javascripts/discourse/app/mixins/composer-upload-uppy.js
index 961f690..220c942 100644
--- a/app/assets/javascripts/discourse/app/mixins/composer-upload-uppy.js
+++ b/app/assets/javascripts/discourse/app/mixins/composer-upload-uppy.js
@@ -46,9 +46,9 @@ export default Mixin.create({
   _unbindUploadTarget() {
     this.messageBus.unsubscribe("/uploads/composer");
 
-    this.uploadButton?.removeEventListener(
+    this.mobileUploadButton?.removeEventListener(
       "click",
-      this.uploadButtonEventListener
+      this.mobileUploadButtonEventListener
     );
 
     this.fileInputEl?.removeEventListener(
@@ -375,29 +375,28 @@ export default Mixin.create({
   },
 
   _bindPasteListener() {
-    this.pasteEventListener = this.element.addEventListener(
-      "paste",
-      (event) => {
-        if (
-          document.activeElement !== document.querySelector(".d-editor-input")
-        ) {
-          return;
-        }
+    this.pasteEventListener = function pasteListener(event) {
+      if (
+        document.activeElement !== document.querySelector(".d-editor-input")
+      ) {
+        return;
+      }
 
-        const { canUpload } = clipboardHelpers(event, {
-          siteSettings: this.siteSettings,
-          canUpload: true,
-        });
+      const { canUpload } = clipboardHelpers(event, {
+        siteSettings: this.siteSettings,
+        canUpload: true,
+      });
 
-        if (!canUpload) {
-          return;
-        }
+      if (!canUpload) {
+        return;
+      }
 
-        if (event && event.clipboardData && event.clipboardData.files) {
-          this._addFiles([...event.clipboardData.files]);
-        }
+      if (event && event.clipboardData && event.clipboardData.files) {
+        this._addFiles([...event.clipboardData.files]);
       }
-    );
+    }.bind(this);
+
+    this.element.addEventListener("paste", this.pasteEventListener);
   },
 
   _addFiles(files) {
diff --git a/app/assets/javascripts/discourse/app/mixins/composer-upload.js b/app/assets/javascripts/discourse/app/mixins/composer-upload.js
index 5dbbbb9..bec4944 100644
--- a/app/assets/javascripts/discourse/app/mixins/composer-upload.js
+++ b/app/assets/javascripts/discourse/app/mixins/composer-upload.js
@@ -333,10 +333,13 @@ export default Mixin.create({
 
   _bindMobileUploadButton() {
     if (this.site.mobileView) {
-      this.uploadButton = document.getElementById("mobile-file-upload");
-      this.uploadButtonEventListener = this.uploadButton.addEventListener(
+      this.mobileUploadButton = document.getElementById("mobile-file-upload");
+      this.mobileUploadButtonEventListener = function mobileButtonEventListener() {
+        document.getElementById("file-uploader").click();
+      };
+      this.mobileUploadButton.addEventListener(
         "click",
-        () => document.getElementById("file-uploader").click(),
+        this.mobileUploadButtonEventListener,
         false
       );
     }
@@ -344,9 +347,9 @@ export default Mixin.create({
 
   @on("willDestroyElement")
   _unbindUploadTarget() {
-    this.uploadButton?.removeEventListener(
+    this.mobileUploadButton?.removeEventListener(
       "click",
-      this.uploadButtonEventListener
+      this.mobileUploadButtonEventListener
     );
 
     this._validUploads = 0;

GitHub sha: d7390f48c7739a1b82fad4036246c9569bb5e894

This commit appears in #14052 which was approved by tgxworld. It was merged by martin.