Use our EventBus for upload related actions

owncloud · May 2, 2022 · 0a80e36 · 0a80e36
1 parent 7060117
commit 0a80e36
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 26 deletions.
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -118,6 +118,7 @@ import FolderUpload from './Upload/FolderUpload.vue'
 import { defineComponent, getCurrentInstance, onMounted, onUnmounted } 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: {
@@ -130,9 +131,9 @@ export default defineComponent({
     const uppyService = instance.$uppyService
 
     onMounted(() => {
-      uppyService.$on('filesSelected', instance.onFilesSelected)
-      uppyService.$on('uploadSuccess', instance.onFileSuccess)
-      uppyService.$on('uploadError', instance.onFileError)
+      bus.subscribe('filesSelected', instance.onFilesSelected)
+      bus.subscribe('uploadSuccess', instance.onFileSuccess)
+      bus.subscribe('uploadError', instance.onFileError)
 
       uppyService.useDropTarget({
         targetSelector: '#files-view',
@@ -141,9 +142,9 @@ export default defineComponent({
     })
 
     onUnmounted(() => {
-      uppyService.$off('filesSelected', instance.onFilesSelected)
-      uppyService.$off('uploadSuccess', instance.onFileSuccess)
-      uppyService.$off('uploadError', instance.onFileError)
+      bus.unsubscribe('filesSelected', instance.onFilesSelected)
+      bus.unsubscribe('uploadSuccess', instance.onFileSuccess)
+      bus.unsubscribe('uploadError', instance.onFileError)
       uppyService.removeDropTarget()
     })
 

diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
@@ -46,6 +46,7 @@ import {
   onUnmounted
 } 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: {
@@ -56,8 +57,8 @@ export default {
     const uppyService = instance.$uppyService
 
     onMounted(() => {
-      uppyService.$on('filesSelected', instance.onFilesSelected)
-      uppyService.$on('uploadError', instance.onFileError)
+      bus.subscribe('filesSelected', instance.onFilesSelected)
+      bus.subscribe('uploadError', instance.onFileError)
 
       uppyService.useDropTarget({
         targetSelector: '#files-drop-container',
@@ -66,8 +67,8 @@ export default {
     })
 
     onUnmounted(() => {
-      uppyService.$off('filesSelected', instance.onFilesSelected)
-      uppyService.$off('uploadError', instance.onFileError)
+      bus.unsubscribe('filesSelected', instance.onFilesSelected)
+      bus.unsubscribe('uploadError', instance.onFileError)
     })
 
     return {

diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
@@ -57,6 +57,7 @@ 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() {
@@ -105,22 +106,22 @@ export default {
     })
   },
   created() {
-    this.$uppyService.$on('uploadStarted', () => {
+    bus.subscribe('uploadStarted', () => {
       this.showInfo = true
       this.filesUploading = this.filesUploading + 1
       this.uploadCancelled = false
     })
-    this.$uppyService.$on('uploadCompleted', () => {
+    bus.subscribe('uploadCompleted', () => {
       this.filesUploading = this.filesUploading - 1
     })
-    this.$uppyService.$on('uploadCancelled', () => {
+    bus.subscribe('uploadCancelled', () => {
       this.filesUploading = 0
       this.uploadCancelled = true
       if (!this.successfulUploads.length) {
         this.closeInfo()
       }
     })
-    this.$uppyService.$on('uploadSuccess', (file) => {
+    bus.subscribe('uploadSuccess', (file) => {
       // @TODO we need the storage ID here... maybe fetch the file via DAV and call buildResources()?
 
       let path = file.meta.currentFolder

diff --git a/packages/web-runtime/src/composables/upload/uppyPlugins/customDropTarget.ts b/packages/web-runtime/src/composables/upload/uppyPlugins/customDropTarget.ts
@@ -1,4 +1,5 @@
 import DropTarget from '@uppy/drop-target'
+import { bus } from 'web-pkg/src/instance'
 
 /**
  * Custom Drop Target plugin
@@ -12,7 +13,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)
+      bus.publish('filesSelected', files)
       return
     }
 

diff --git a/packages/web-runtime/src/services/uppyService.ts b/packages/web-runtime/src/services/uppyService.ts
@@ -4,14 +4,13 @@ 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 {
+export class UppyService {
   uppy: Uppy
   uploadInputs: HTMLInputElement[] = []
 
   constructor() {
-    super()
     this.uppy = new Uppy({
       autoProceed: true
     })
@@ -166,32 +165,32 @@ export class UppyService extends Vue {
 
   private setUpEvents() {
     this.uppy.on('upload', () => {
-      this.$emit('uploadStarted')
+      bus.publish('uploadStarted')
     })
     this.uppy.on('cancel-all', () => {
-      this.$emit('uploadCancelled')
+      bus.publish('uploadCancelled')
     })
     this.uppy.on('complete', (result) => {
-      this.$emit('uploadCompleted')
+      bus.publish('uploadCompleted')
       result.successful.forEach((file) => {
-        this.$emit('uploadSuccess', file)
+        bus.publish('uploadSuccess', file)
         this.uppy.removeFile(file.id)
       })
       result.failed.forEach((file) => {
-        this.$emit('uploadError', file)
+        bus.publish('uploadError', file)
       })
       this.uploadInputs.forEach((item) => {
         item.value = null
       })
     })
     this.uppy.on('file-removed', () => {
-      this.$emit('uploadRemoved')
+      bus.publish('uploadRemoved')
       this.uploadInputs.forEach((item) => {
         item.value = null
       })
     })
     this.uppy.on('file-added', (file) => {
-      this.$emit('fileAdded')
+      bus.publish('fileAdded')
       const addedFile = file as unknown as UppyResource
       if (this.uppy.getPlugin('XHRUpload')) {
         const escapedName = encodeURIComponent(addedFile.name)
@@ -211,7 +210,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)
+        bus.publish('filesSelected', files)
       })
       this.uploadInputs.push(el)
     }