Remove drop target in read-only folders

changelog/unreleased/bugfix-remove-drop-target-in-read-only-folders

@@ -0,0 +1,6 @@
+Bugfix: Remove drop target in read-only folders
+
+The drop target in read-only folders has been removed.
+
+https://github.com/owncloud/web/pull/8825
+https://github.com/owncloud/web/issues/8277

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

@@ -159,7 +159,9 @@ import {
   getCurrentInstance,
   onMounted,
   onBeforeUnmount,
-  PropType
+  PropType,
+  unref,
+  watch
 } from 'vue'
 import { useUpload } from 'web-runtime/src/composables/upload'
 import { useUploadHelpers } from '../../composables/upload'
@@ -207,14 +209,16 @@ export default defineComponent({
     let filesSelectedSub
     let uploadCompletedSub
 
+    const currentFolder = computed(() => {
+      return store.getters['Files/currentFolder']
+    })
+    const canUpload = computed(() => {
+      return unref(currentFolder)?.canUpload({ user: store.getters.user })
+    })
+
     onMounted(() => {
       filesSelectedSub = uppyService.subscribe('filesSelected', instance.onFilesSelected)
       uploadCompletedSub = uppyService.subscribe('uploadCompleted', instance.onUploadComplete)
-
-      uppyService.useDropTarget({
-        targetSelector: '#files-view',
-        uppyService
-      })
     })
 
     onBeforeUnmount(() => {
@@ -223,6 +227,18 @@ export default defineComponent({
       uppyService.removeDropTarget()
     })
 
+    watch(
+      canUpload,
+      () => {
+        if (unref(canUpload)) {
+          uppyService.useDropTarget({ targetSelector: '#files-view', uppyService })
+        } else {
+          uppyService.removeDropTarget()
+        }
+      },
+      { immediate: true }
+    )
+
     return {
       ...useFileActions({ store }),
       ...useUpload({
@@ -240,21 +256,17 @@ export default defineComponent({
       isSpacesGenericLocation: useActiveLocation(isLocationSpacesActive, 'files-spaces-generic'),
       hasShareJail: useCapabilityShareJailEnabled(),
       hasSpaces: useCapabilitySpacesEnabled(),
-      isUserContext: useUserContext({ store })
+      isUserContext: useUserContext({ store }),
+      canUpload,
+      currentFolder
     }
   },
   data: () => ({
     newFileAction: null
   }),
   computed: {
     ...mapGetters(['capabilities', 'configuration', 'newFileHandlers', 'user']),
-    ...mapGetters('Files', [
-      'ancestorMetaData',
-      'files',
-      'currentFolder',
-      'selectedFiles',
-      'clipboardResources'
-    ]),
+    ...mapGetters('Files', ['ancestorMetaData', 'files', 'selectedFiles', 'clipboardResources']),
     ...mapState('Files', ['areFileExtensionsShown']),
     ...mapGetters('runtime/spaces', ['spaces']),
 
@@ -314,13 +326,6 @@ export default defineComponent({
       return !this.canUpload
     },
 
-    canUpload() {
-      if (!this.currentFolder) {
-        return false
-      }
-      return this.currentFolder.canUpload({ user: this.user })
-    },
-
     loadIndicatorsForNewFile() {
       return this.isSpacesGenericLocation && this.space.driveType !== 'share'
     },

packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts

@@ -238,6 +238,17 @@ describe('CreateAndUpload component', () => {
       expect(storeOptions.actions.showMessage).toHaveBeenCalled()
     })
   })
+  describe('drop target', () => {
+    it('is being initialized when user can upload', () => {
+      const { mocks } = getWrapper()
+      expect(mocks.$uppyService.useDropTarget).toHaveBeenCalled()
+    })
+    it('is not being initialized when user can not upload', () => {
+      const currentFolder = mockDeep<Resource>({ canUpload: () => false })
+      const { mocks } = getWrapper({ currentFolder })
+      expect(mocks.$uppyService.useDropTarget).not.toHaveBeenCalled()
+    })
+  })
 })
 
 function getWrapper({