Remove event listeners when destory ImageCropper

1 files changed, 27 insertions, 13 deletions

diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index 86bd2d67..c15ce9d8 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -65,29 +65,43 @@ const ImageCropper = {
     },
     createCropper () {
       this.cropper = new Cropper(this.$refs.img, this.cropperOptions)
+    },
+    getTriggerDOM () {
+      return typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
+    },
+    readFile () {
+      const fileInput = this.$refs.input
+      if (fileInput.files != null && fileInput.files[0] != null) {
+        let reader = new FileReader()
+        reader.onload = (e) => {
+          this.dataUrl = e.target.result
+        }
+        reader.readAsDataURL(fileInput.files[0])
+        this.filename = fileInput.files[0].name || 'unknown'
+        this.$emit('changed', fileInput.files[0], reader)
+      }
     }
   },
   mounted () {
     // listen for click event on trigger
-    let trigger = typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
+    const trigger = this.getTriggerDOM()
     if (!trigger) {
       this.$emit('error', 'No image make trigger found.', 'user')
     } else {
       trigger.addEventListener('click', this.pickImage)
     }
     // listen for input file changes
-    let fileInput = this.$refs.input
-    fileInput.addEventListener('change', () => {
-      if (fileInput.files != null && fileInput.files[0] != null) {
-        let reader = new FileReader()
-        reader.onload = (e) => {
-          this.dataUrl = e.target.result
-        }
-        reader.readAsDataURL(fileInput.files[0])
-        this.filename = fileInput.files[0].name || 'unknown'
-        this.$emit('changed', fileInput.files[0], reader)
-      }
-    })
+    const fileInput = this.$refs.input
+    fileInput.addEventListener('change', this.readFile)
+  },
+  beforeDestroy: function () {
+    // remove the event listeners
+    const trigger = this.getTriggerDOM()
+    if (trigger) {
+      trigger.removeEventListener('click', this.pickImage)
+    }
+    const fileInput = this.$refs.input
+    fileInput.removeEventListener('change', this.readFile)
   }
 }