Wrap up the event methods in our uppy service

packages/web-app-files/src/components/AppBar/CreateAndUpload.vue

@@ -115,10 +115,9 @@ import { DavProperties, DavProperty } from 'web-pkg/src/constants'
 // TODO: Simplify to one UploadButton component and fill from here
 import FileUpload from './Upload/FileUpload.vue'
 import FolderUpload from './Upload/FolderUpload.vue'
-import { defineComponent, getCurrentInstance, onMounted, onUnmounted } from '@vue/composition-api'
+import { defineComponent, getCurrentInstance, onMounted } from '@vue/composition-api'
 import { UppyResource, useUpload } from 'web-runtime/src/composables/upload'
 import { useUploadHelpers } from '../../composables/upload'
-import { bus } from 'web-pkg/src/instance'
 
 export default defineComponent({
   components: {
@@ -131,21 +130,21 @@ export default defineComponent({
     const uppyService = instance.$uppyService
 
     onMounted(() => {
-      bus.subscribe('filesSelected', instance.onFilesSelected)
-      bus.subscribe('uploadSuccess', instance.onFileSuccess)
-      bus.subscribe('uploadError', instance.onFileError)
+      const filesSelectedSub = uppyService.subscribe('filesSelected', instance.onFilesSelected)
+      const uploadSuccessSub = uppyService.subscribe('uploadSuccess', instance.onFileSuccess)
+      const uploadErrorSub = uppyService.subscribe('uploadError', instance.onFileError)
 
       uppyService.useDropTarget({
         targetSelector: '#files-view',
         uppyService
       })
-    })
 
-    onUnmounted(() => {
-      bus.unsubscribe('filesSelected', instance.onFilesSelected)
-      bus.unsubscribe('uploadSuccess', instance.onFileSuccess)
-      bus.unsubscribe('uploadError', instance.onFileError)
-      uppyService.removeDropTarget()
+      instance.$on('beforeDestroy', () => {
+        uppyService.unsubscribe('filesSelected', filesSelectedSub)
+        uppyService.unsubscribe('uploadSuccess', uploadSuccessSub)
+        uppyService.unsubscribe('uploadError', uploadErrorSub)
+        uppyService.removeDropTarget()
+      })
     })
 
     return {

packages/web-app-files/src/views/FilesDrop.vue

@@ -40,13 +40,8 @@ import { linkRoleUploaderFolder } from '../helpers/share'
 import { createLocationOperations, createLocationPublic } from '../router'
 
 import FileUpload from '../components/AppBar/Upload/FileUpload.vue'
-import {
-  getCurrentInstance,
-  onMounted,
-  onUnmounted
-} from '@vue/composition-api/dist/vue-composition-api'
+import { getCurrentInstance, onMounted } from '@vue/composition-api/dist/vue-composition-api'
 import { useUpload } from 'web-runtime/src/composables/upload'
-import { bus } from 'web-pkg/src/instance'
 
 export default {
   components: {
@@ -57,18 +52,19 @@ export default {
     const uppyService = instance.$uppyService
 
     onMounted(() => {
-      bus.subscribe('filesSelected', instance.onFilesSelected)
-      bus.subscribe('uploadError', instance.onFileError)
+      const filesSelectedSub = uppyService.subscribe('filesSelected', instance.onFilesSelected)
+      const uploadErrorSub = uppyService.subscribe('uploadError', instance.onFileError)
 
       uppyService.useDropTarget({
         targetSelector: '#files-drop-container',
         uppyService
       })
-    })
 
-    onUnmounted(() => {
-      bus.unsubscribe('filesSelected', instance.onFilesSelected)
-      bus.unsubscribe('uploadError', instance.onFileError)
+      instance.$on('beforeDestroy', () => {
+        uppyService.unsubscribe('filesSelected', filesSelectedSub)
+        uppyService.unsubscribe('uploadError', uploadErrorSub)
+        uppyService.removeDropTarget()
+      })
     })
 
     return {

packages/web-runtime/src/components/UploadInfo.vue

@@ -57,7 +57,6 @@ import '@uppy/status-bar/dist/style.css'
 import path from 'path'
 import { useCapabilitySpacesEnabled } from 'web-pkg/src/composables'
 import { mapGetters } from 'vuex'
-import { bus } from 'web-pkg/src/instance'
 
 export default {
   setup() {
@@ -106,22 +105,22 @@ export default {
     })
   },
   created() {
-    bus.subscribe('uploadStarted', () => {
+    this.$uppyService.subscribe('uploadStarted', () => {
       this.showInfo = true
       this.filesUploading = this.filesUploading + 1
       this.uploadCancelled = false
     })
-    bus.subscribe('uploadCompleted', () => {
+    this.$uppyService.subscribe('uploadCompleted', () => {
       this.filesUploading = this.filesUploading - 1
     })
-    bus.subscribe('uploadCancelled', () => {
+    this.$uppyService.subscribe('uploadCancelled', () => {
       this.filesUploading = 0
       this.uploadCancelled = true
       if (!this.successfulUploads.length) {
         this.closeInfo()
       }
     })
-    bus.subscribe('uploadSuccess', (file) => {
+    this.$uppyService.subscribe('uploadSuccess', (file) => {
       // @TODO we need the storage ID here... maybe fetch the file via DAV and call buildResources()?
 
       let path = file.meta.currentFolder

packages/web-runtime/src/composables/upload/uppyPlugins/customDropTarget.ts

@@ -1,5 +1,4 @@
 import DropTarget from '@uppy/drop-target'
-import { bus } from 'web-pkg/src/instance'
 
 /**
  * Custom Drop Target plugin
@@ -13,7 +12,7 @@ export class CustomDropTarget extends DropTarget {
     if (this.opts.uppyService) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      bus.publish('filesSelected', files)
+      this.opts.uppyService.publish('filesSelected', files)
       return
     }
 

packages/web-runtime/src/services/uppyService.ts

@@ -6,6 +6,16 @@ import StatusBar from '@uppy/status-bar'
 import { UppyResource } from '../composables/upload'
 import { bus } from 'web-pkg/src/instance'
 
+type UppyServiceTopics =
+  | 'uploadStarted'
+  | 'uploadCancelled'
+  | 'uploadCompleted'
+  | 'uploadRemoved'
+  | 'uploadSuccess'
+  | 'uploadError'
+  | 'fileAdded'
+  | 'filesSelected'
+
 export class UppyService {
   uppy: Uppy
   uploadInputs: HTMLInputElement[] = []
@@ -163,34 +173,46 @@ export class UppyService {
     })
   }
 
+  subscribe(topic: UppyServiceTopics, callback: (data?: unknown) => void): void {
+    bus.subscribe(topic, callback)
+  }
+
+  unsubscribe(topic: UppyServiceTopics, token: string): void {
+    bus.unsubscribe(topic, token)
+  }
+
+  publish(topic: UppyServiceTopics, data?: unknown): void {
+    bus.publish(topic, data)
+  }
+
   private setUpEvents() {
     this.uppy.on('upload', () => {
-      bus.publish('uploadStarted')
+      this.publish('uploadStarted')
     })
     this.uppy.on('cancel-all', () => {
-      bus.publish('uploadCancelled')
+      this.publish('uploadCancelled')
     })
     this.uppy.on('complete', (result) => {
-      bus.publish('uploadCompleted')
+      this.publish('uploadCompleted')
       result.successful.forEach((file) => {
-        bus.publish('uploadSuccess', file)
+        this.publish('uploadSuccess', file)
         this.uppy.removeFile(file.id)
       })
       result.failed.forEach((file) => {
-        bus.publish('uploadError', file)
+        this.publish('uploadError', file)
       })
       this.uploadInputs.forEach((item) => {
         item.value = null
       })
     })
     this.uppy.on('file-removed', () => {
-      bus.publish('uploadRemoved')
+      this.publish('uploadRemoved')
       this.uploadInputs.forEach((item) => {
         item.value = null
       })
     })
     this.uppy.on('file-added', (file) => {
-      bus.publish('fileAdded')
+      this.publish('fileAdded')
       const addedFile = file as unknown as UppyResource
       if (this.uppy.getPlugin('XHRUpload')) {
         const escapedName = encodeURIComponent(addedFile.name)
@@ -210,7 +232,7 @@ export class UppyService {
       el.addEventListener('change', (event) => {
         const target = event.target as HTMLInputElement
         const files = Array.from(target.files)
-        bus.publish('filesSelected', files)
+        this.publish('filesSelected', files)
       })
       this.uploadInputs.push(el)
     }