From 88432d95f74c59fd2d9be7a61047840649995b38 Mon Sep 17 00:00:00 2001 From: Jannik Stehle Date: Mon, 2 May 2022 15:36:21 +0200 Subject: [PATCH] Wrap up the event methods in our uppy service --- .../src/components/AppBar/CreateAndUpload.vue | 20 ++++++++--------- .../web-app-files/src/views/FilesDrop.vue | 19 +++++++--------- .../web-runtime/src/components/UploadInfo.vue | 9 ++++---- .../upload/uppyPlugins/customDropTarget.ts | 3 +-- .../web-runtime/src/services/uppyService.ts | 22 +++++++++++++++++++ 5 files changed, 45 insertions(+), 28 deletions(-) diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue index 5824f2d237a..4f569cfb639 100644 --- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue +++ b/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 { diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue index 5efd077b40a..df12e1179b1 100644 --- a/packages/web-app-files/src/views/FilesDrop.vue +++ b/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 { diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue index f1d01cc755c..6fc78c7cb90 100644 --- a/packages/web-runtime/src/components/UploadInfo.vue +++ b/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 diff --git a/packages/web-runtime/src/composables/upload/uppyPlugins/customDropTarget.ts b/packages/web-runtime/src/composables/upload/uppyPlugins/customDropTarget.ts index 1d0b50a0977..dc7644b9de0 100644 --- a/packages/web-runtime/src/composables/upload/uppyPlugins/customDropTarget.ts +++ b/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 } diff --git a/packages/web-runtime/src/services/uppyService.ts b/packages/web-runtime/src/services/uppyService.ts index 1ed007bda1e..4c8081ade7a 100644 --- a/packages/web-runtime/src/services/uppyService.ts +++ b/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')