Use our EventBus for upload related actions

changelog/unreleased/enhancement-uppy-service-event-bus

@@ -0,0 +1,6 @@
+Enhancement: Use event bus for upload related actions
+
+Instead of extending Vue, the uppy service now uses our custom `EventBus`.
+
+https://github.com/owncloud/web/pull/6853
+https://github.com/owncloud/web/issues/6819

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'
 
@@ -130,21 +130,21 @@ export default defineComponent({
     const uppyService = instance.$uppyService
 
     onMounted(() => {
-      uppyService.$on('filesSelected', instance.onFilesSelected)
-      uppyService.$on('uploadSuccess', instance.onFileSuccess)
-      uppyService.$on('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(() => {
-      uppyService.$off('filesSelected', instance.onFilesSelected)
-      uppyService.$off('uploadSuccess', instance.onFileSuccess)
-      uppyService.$off('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,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'
 
 export default {
@@ -56,18 +52,19 @@ export default {
     const uppyService = instance.$uppyService
 
     onMounted(() => {
-      uppyService.$on('filesSelected', instance.onFilesSelected)
-      uppyService.$on('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(() => {
-      uppyService.$off('filesSelected', instance.onFilesSelected)
-      uppyService.$off('uploadError', instance.onFileError)
+      instance.$on('beforeDestroy', () => {
+        uppyService.unsubscribe('filesSelected', filesSelectedSub)
+        uppyService.unsubscribe('uploadError', uploadErrorSub)
+        uppyService.removeDropTarget()
+      })
     })
 
     return {

packages/web-app-files/tests/unit/views/FilesDrop.spec.js

@@ -116,7 +116,8 @@ function getShallowWrapper({ store = createStore(), loading = false, errorMessag
       $uppyService: {
         $on: jest.fn(),
         useDropTarget: jest.fn(),
-        useXhr: jest.fn()
+        useXhr: jest.fn(),
+        subscribe: jest.fn()
       }
     },
     setup: () => {

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

@@ -105,22 +105,22 @@ export default {
     })
   },
   created() {
-    this.$uppyService.$on('uploadStarted', () => {
+    this.$uppyService.subscribe('uploadStarted', () => {
       this.showInfo = true
       this.filesUploading = this.filesUploading + 1
       this.uploadCancelled = false
     })
-    this.$uppyService.$on('uploadCompleted', () => {
+    this.$uppyService.subscribe('uploadCompleted', () => {
       this.filesUploading = this.filesUploading - 1
     })
-    this.$uppyService.$on('uploadCancelled', () => {
+    this.$uppyService.subscribe('uploadCancelled', () => {
       this.filesUploading = 0
       this.uploadCancelled = true
       if (!this.successfulUploads.length) {
         this.closeInfo()
       }
     })
-    this.$uppyService.$on('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

@@ -12,7 +12,7 @@ export class CustomDropTarget extends DropTarget {
     if (this.opts.uppyService) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      this.opts.uppyService.$emit('filesSelected', files)
+      this.opts.uppyService.publish('filesSelected', files)
       return
     }
 

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

@@ -4,14 +4,23 @@ import XHRUpload, { XHRUploadOptions } from '@uppy/xhr-upload'
 import { CustomDropTarget } from '../composables/upload/uppyPlugins/customDropTarget'
 import StatusBar from '@uppy/status-bar'
 import { UppyResource } from '../composables/upload'
-import Vue from 'vue'
+import { bus } from 'web-pkg/src/instance'
 
-export class UppyService extends Vue {
+type UppyServiceTopics =
+  | 'uploadStarted'
+  | 'uploadCancelled'
+  | 'uploadCompleted'
+  | 'uploadRemoved'
+  | 'uploadSuccess'
+  | 'uploadError'
+  | 'fileAdded'
+  | 'filesSelected'
+
+export class UppyService {
   uppy: Uppy
   uploadInputs: HTMLInputElement[] = []
 
   constructor() {
-    super()
     this.uppy = new Uppy({
       autoProceed: true
     })
@@ -164,34 +173,46 @@ export class UppyService extends Vue {
     })
   }
 
+  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', () => {
-      this.$emit('uploadStarted')
+      this.publish('uploadStarted')
     })
     this.uppy.on('cancel-all', () => {
-      this.$emit('uploadCancelled')
+      this.publish('uploadCancelled')
     })
     this.uppy.on('complete', (result) => {
-      this.$emit('uploadCompleted')
+      this.publish('uploadCompleted')
       result.successful.forEach((file) => {
-        this.$emit('uploadSuccess', file)
         this.uppy.removeFile(file.id)
+        this.publish('uploadSuccess', file)
       })
       result.failed.forEach((file) => {
-        this.$emit('uploadError', file)
+        this.publish('uploadError', file)
       })
       this.uploadInputs.forEach((item) => {
         item.value = null
       })
     })
     this.uppy.on('file-removed', () => {
-      this.$emit('uploadRemoved')
+      this.publish('uploadRemoved')
       this.uploadInputs.forEach((item) => {
         item.value = null
       })
     })
     this.uppy.on('file-added', (file) => {
-      this.$emit('fileAdded')
+      this.publish('fileAdded')
       const addedFile = file as unknown as UppyResource
       if (this.uppy.getPlugin('XHRUpload')) {
         const escapedName = encodeURIComponent(addedFile.name)
@@ -211,7 +232,7 @@ export class UppyService extends Vue {
       el.addEventListener('change', (event) => {
         const target = event.target as HTMLInputElement
         const files = Array.from(target.files)
-        this.$emit('filesSelected', files)
+        this.publish('filesSelected', files)
       })
       this.uploadInputs.push(el)
     }