From ddfdaf3284c6790b1e973ca4ce469b07a2136ebc Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 8 Feb 2019 12:03:04 -0500
Subject: [PATCH] Remove event listeners when destory ImageCropper

---
 src/components/image_cropper/image_cropper.js | 42 ++++++++++++-------
 1 file changed, 28 insertions(+), 14 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,19 +65,12 @@ const ImageCropper = {
     },
     createCropper () {
       this.cropper = new Cropper(this.$refs.img, this.cropperOptions)
-    }
-  },
-  mounted () {
-    // listen for click event on trigger
-    let trigger = typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
-    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', () => {
+    },
+    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) => {
@@ -87,7 +80,28 @@ const ImageCropper = {
         this.filename = fileInput.files[0].name || 'unknown'
         this.$emit('changed', fileInput.files[0], reader)
       }
-    })
+    }
+  },
+  mounted () {
+    // listen for click event on 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
+    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)
   }
 }