Wrap up the event methods in our uppy service

Author: JammingBen

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

@@ -115,7 +115,7 @@ 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'
@@ -131,21 +131,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', () => {
+        bus.unsubscribe('filesSelected', filesSelectedSub)
+        bus.unsubscribe('uploadSuccess', uploadSuccessSub)
+        bus.unsubscribe('uploadError', uploadErrorSub)
+        uppyService.removeDropTarget()
+      })
     })
 
     return {

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

@@ -40,11 +40,7 @@ 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'
 
@@ -57,18 +53,19 @@ export default {
     const uppyService = instance.$uppyService
 
     onMounted(() => {
-      bus.subscribe('filesSelected', instance.onFilesSelected)
-      bus.subscribe('uploadError', instance.onFileError)
+      const filesSelectedSub = bus.subscribe('filesSelected', instance.onFilesSelected)
+      const uploadErrorSub = bus.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', () => {
+        bus.unsubscribe('filesSelected', filesSelectedSub)
+        bus.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,6 +173,18 @@ 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')