fix: cleanup event listener

packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue

@@ -95,7 +95,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   uppyService.unsubscribe('uploadStarted', uploadStartedSub)
   uppyService.unsubscribe('uploadCompleted', uploadCompletedSub)
-  uppyService.removeUploadInput(unref(input))
+  uppyService.unregisterUploadInputElement(unref(input))
 })
 
 const inputId = computed(() => {

packages/web-app-preview/src/components/Sources/MediaImage.vue

@@ -69,12 +69,14 @@ const setTransform = ({ scale, x, y }: { scale: number; x: number; y: number })
   )
 }
 
+const destroyPanzoom = () => {
+  unref(img)?.removeEventListener('wheel', onWheelEvent)
+  unref(panzoom)?.destroy()
+  panzoom.value = undefined
+}
+
 const initPanzoom = async () => {
-  if (unref(panzoom)) {
-    await nextTick()
-    ;(unref(img) as unknown as HTMLElement).removeEventListener('wheel', onWheelEvent)
-    unref(panzoom)?.destroy()
-  }
+  destroyPanzoom()
 
   // wait for next tick until image is rendered
   await nextTick()
@@ -87,7 +89,7 @@ const initPanzoom = async () => {
     maxScale: 10,
     setTransform: (_, { scale, x, y }) => setTransform({ scale, x, y })
   } as PanzoomOptions)
-  unref(img).addEventListener('wheel', onWheelEvent)
+  unref(img).addEventListener('wheel', onWheelEvent, { passive: false })
 }
 
 watch(() => file, initPanzoom, { immediate: true, deep: true })
@@ -122,6 +124,8 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
+  destroyPanzoom()
+
   eventBus.unsubscribe('app.preview.media.image.reset', resetEventToken)
   eventBus.unsubscribe('app.preview.media.image.zoom', zoomToken)
   eventBus.unsubscribe('app.preview.media.image.shrink', shrinkToken)

packages/web-pkg/src/services/uppy/uppyService.ts

@@ -80,6 +80,7 @@ type OmitFirstArg<T> = T extends [any, ...infer U] ? U : never
 export class UppyService {
   uppy: Uppy<OcUppyMeta, OcUppyBody>
   uploadInputs: HTMLInputElement[] = []
+  private uploadInputListeners = new WeakMap<HTMLInputElement, EventListener>()
   uploadFolderMap: Record<string, Resource> = {}
 
   constructor({ language }: UppyServiceOptions) {
@@ -277,19 +278,32 @@ export class UppyService {
   }
 
   registerUploadInput(el: HTMLInputElement) {
-    const listenerRegistered = el.getAttribute('listener')
-    if (listenerRegistered !== 'true') {
-      el.setAttribute('listener', 'true')
-      el.addEventListener('change', (event) => {
-        const target = event.target as HTMLInputElement
-        const files = Array.from(target.files)
-        this.addFiles(files)
-      })
-      this.uploadInputs.push(el)
+    if (this.uploadInputListeners.has(el)) {
+      return
+    }
+
+    const listener: EventListener = (event) => {
+      const target = event.target as HTMLInputElement
+      const files = Array.from(target.files || [])
+      this.addFiles(files)
     }
+
+    this.uploadInputListeners.set(el, listener)
+    el.addEventListener('change', listener)
+    this.uploadInputs.push(el)
   }
 
   removeUploadInput(el: HTMLInputElement) {
+    const listener = this.uploadInputListeners.get(el)
+    if (listener) {
+      el.removeEventListener('change', listener)
+      this.uploadInputListeners.delete(el)
+    }
+
+    this.unregisterUploadInputElement(el)
+  }
+
+  unregisterUploadInputElement(el: HTMLInputElement) {
     this.uploadInputs = this.uploadInputs.filter((input) => input !== el)
   }