From 2b918f115b6c7447eccb7827c1f318eeb33c6c03 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 11 Jul 2022 10:22:34 +0200
Subject: [PATCH 1/5] Add dragarea again, changelog

---
 .../unreleased/bugfix-add-droparea-again      |  7 +++++
 packages/web-app-files/src/App.vue            | 30 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 changelog/unreleased/bugfix-add-droparea-again

diff --git a/changelog/unreleased/bugfix-add-droparea-again b/changelog/unreleased/bugfix-add-droparea-again
new file mode 100644
index 00000000000..9327359ccdd
--- /dev/null
+++ b/changelog/unreleased/bugfix-add-droparea-again
@@ -0,0 +1,7 @@
+Bugfix: Add Droparea again
+
+We've added the visual droparea again to indicate drag and drop
+from outside the application
+
+https://github.com/owncloud/web/issues/7080
+https://github.com/owncloud/web/pull/7251
\ No newline at end of file
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 19165eb2cd8..98beee20ebb 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -1,5 +1,6 @@
 <template>
-  <main id="files" class="oc-flex oc-height-1-1">
+  <main id="files" class="oc-flex oc-height-1-1" @dragenter="onDragEnter" @mouseleave="onDragLeave">
+    <div v-if="dragareaEnabled" class="dragarea" />
     <div ref="filesListWrapper" tabindex="-1" class="files-list-wrapper oc-width-expand">
       <router-view id="files-view" tabindex="0" />
     </div>
@@ -29,6 +30,9 @@ export default defineComponent({
     SideBar
   },
   mixins: [Mixins],
+  data: () => ({
+    dragareaEnabled: false
+  }),
   computed: {
     ...mapState('Files/sidebar', {
       sidebarClosed: 'closed',
@@ -62,6 +66,13 @@ export default defineComponent({
       setActiveSidebarPanel: 'setActivePanel'
     }),
 
+    onDragEnter(event) {
+      const hasFileInEvent = (event.dataTransfer.types || []).some((e) => e === 'Files')
+      this.dragareaEnabled = hasFileInEvent
+    },
+    onDragLeave() {
+      this.dragareaEnabled = false
+    },
     focusSideBar(component, event) {
       this.focus({
         from: document.activeElement,
@@ -78,7 +89,20 @@ main {
   max-height: 100%;
 }
 
+.dragarea {
+  background-color: rgba(60, 130, 225, 0.21);
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  z-index: 9;
+  border-radius: 14px;
+  border: 2px dashed var(--oc-color-swatch-primary-muted);
+}
 .files-list-wrapper {
+  position: relative;
   overflow-y: auto;
   display: grid;
   grid-template-columns: 1fr;
@@ -94,6 +118,10 @@ main {
   }
 }
 
+#files {
+  position: relative;
+}
+
 #files-sidebar {
   position: relative;
   overflow: hidden;

From 341851cc5106dd957e9ffad2d8458b52072af548 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 1 Aug 2022 12:09:31 +0200
Subject: [PATCH 2/5] Fix mouseout

---
 changelog/unreleased/bugfix-add-droparea-again | 3 +--
 packages/web-app-files/src/App.vue             | 5 +++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/changelog/unreleased/bugfix-add-droparea-again b/changelog/unreleased/bugfix-add-droparea-again
index 9327359ccdd..d4d48c6894f 100644
--- a/changelog/unreleased/bugfix-add-droparea-again
+++ b/changelog/unreleased/bugfix-add-droparea-again
@@ -1,7 +1,6 @@
 Bugfix: Add Droparea again
 
-We've added the visual droparea again to indicate drag and drop
-from outside the application
+We've added the visual droparea again to indicate drag and drop upload
 
 https://github.com/owncloud/web/issues/7080
 https://github.com/owncloud/web/pull/7251
\ No newline at end of file
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 98beee20ebb..fb02444f9a2 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <main id="files" class="oc-flex oc-height-1-1" @dragenter="onDragEnter" @mouseleave="onDragLeave">
+  <main id="files" class="oc-flex oc-height-1-1" @dragenter="onDragEnter" @mouseout="onDragLeave">
     <div v-if="dragareaEnabled" class="dragarea" />
     <div ref="filesListWrapper" tabindex="-1" class="files-list-wrapper oc-width-expand">
       <router-view id="files-view" tabindex="0" />
@@ -65,8 +65,9 @@ export default defineComponent({
       closeSidebar: 'close',
       setActiveSidebarPanel: 'setActivePanel'
     }),
-
     onDragEnter(event) {
+      event.stopPropagation()
+      event.preventDefault()
       const hasFileInEvent = (event.dataTransfer.types || []).some((e) => e === 'Files')
       this.dragareaEnabled = hasFileInEvent
     },

From 408dc20d3b73949ac2cce33d1f060dd3931a69c2 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 1 Aug 2022 15:52:05 +0200
Subject: [PATCH 3/5] Use uppy events for dropzone

---
 packages/web-app-files/src/App.vue            | 22 +++++++++++++------
 .../web-runtime/src/services/uppyService.ts   | 14 +++++++++++-
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index fb02444f9a2..50c47e98052 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <main id="files" class="oc-flex oc-height-1-1" @dragenter="onDragEnter" @mouseout="onDragLeave">
+  <main id="files" class="oc-flex oc-height-1-1">
     <div v-if="dragareaEnabled" class="dragarea" />
     <div ref="filesListWrapper" tabindex="-1" class="files-list-wrapper oc-width-expand">
       <router-view id="files-view" tabindex="0" />
@@ -24,6 +24,7 @@ import Mixins from './mixins'
 import { mapActions, mapState } from 'vuex'
 import SideBar from './components/SideBar/SideBar.vue'
 import { defineComponent } from '@vue/composition-api'
+import { bus } from 'web-pkg/src/instance'
 
 export default defineComponent({
   components: {
@@ -57,6 +58,15 @@ export default defineComponent({
     this.$root.$on('upload-end', () => {
       this.delayForScreenreader(() => this.$refs.filesListWrapper.focus())
     })
+    const dragOver = bus.subscribe('drag-over', this.onDragOver)
+    const dragOut = bus.subscribe('drag-out', this.hideDropzone)
+    const drop = bus.subscribe('drop', this.hideDropzone)
+
+    this.$on('beforeDestroy', () => {
+      bus.unsubscribe('drag-over', dragOver)
+      bus.unsubscribe('drag-out', dragOut)
+      bus.unsubscribe('drop', drop)
+    })
   },
 
   methods: {
@@ -65,15 +75,13 @@ export default defineComponent({
       closeSidebar: 'close',
       setActiveSidebarPanel: 'setActivePanel'
     }),
-    onDragEnter(event) {
-      event.stopPropagation()
-      event.preventDefault()
+    hideDropzone() {
+      this.dragareaEnabled = false
+    },
+    onDragOver(event) {
       const hasFileInEvent = (event.dataTransfer.types || []).some((e) => e === 'Files')
       this.dragareaEnabled = hasFileInEvent
     },
-    onDragLeave() {
-      this.dragareaEnabled = false
-    },
     focusSideBar(component, event) {
       this.focus({
         from: document.activeElement,
diff --git a/packages/web-runtime/src/services/uppyService.ts b/packages/web-runtime/src/services/uppyService.ts
index 35ab45b58e1..0b0f16fcd16 100644
--- a/packages/web-runtime/src/services/uppyService.ts
+++ b/packages/web-runtime/src/services/uppyService.ts
@@ -17,6 +17,9 @@ type UppyServiceTopics =
   | 'progress'
   | 'addedForUpload'
   | 'upload-progress'
+  | 'drag-over'
+  | 'drag-out'
+  | 'drop'
 
 export class UppyService {
   uppy: Uppy
@@ -110,7 +113,16 @@ export class UppyService {
       target: targetSelector,
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      uppyService
+      uppyService,
+      onDragOver: (event) => {
+        this.publish('drag-over', event)
+      },
+      onDragLeave: (event) => {
+        this.publish('drag-out', event)
+      },
+      onDrop: (event) => {
+        this.publish('drop', event)
+      }
     })
   }
 

From 772eb4598d6b14266a15f76a9b7e272dc9c40338 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 1 Aug 2022 16:06:24 +0200
Subject: [PATCH 4/5] Implement dropzone for upload link

---
 .../web-app-files/src/views/FilesDrop.vue     | 35 ++++++++++++++++++-
 .../__snapshots__/FilesDrop.spec.js.snap      |  4 +++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index 5de2baf3102..df05ebb6423 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -1,5 +1,6 @@
 <template>
   <div id="files-drop-container" class="oc-height-1-1 oc-flex oc-flex-column oc-flex-between">
+    <div v-if="dragareaEnabled" class="dragarea" />
     <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
     <div class="oc-p oc-height-1-1">
       <div v-if="loading" key="loading-drop" class="oc-flex oc-flex-column oc-flex-middle">
@@ -44,6 +45,7 @@ import { getCurrentInstance, onMounted } from '@vue/composition-api/dist/vue-com
 import { useUpload } from 'web-runtime/src/composables/upload'
 import * as uuid from 'uuid'
 import { usePublicLinkPassword, useStore } from 'web-pkg/src/composables'
+import { bus } from 'web-pkg/src/instance'
 
 export default {
   components: {
@@ -78,7 +80,8 @@ export default {
   data() {
     return {
       loading: true,
-      errorMessage: null
+      errorMessage: null,
+      dragareaEnabled: false
     }
   },
   computed: {
@@ -106,11 +109,28 @@ export default {
     }
   },
   mounted() {
+    const dragOver = bus.subscribe('drag-over', this.onDragOver)
+    const dragOut = bus.subscribe('drag-out', this.hideDropzone)
+    const drop = bus.subscribe('drop', this.hideDropzone)
+
+    this.$on('beforeDestroy', () => {
+      bus.unsubscribe('drag-over', dragOver)
+      bus.unsubscribe('drag-out', dragOut)
+      bus.unsubscribe('drop', drop)
+    })
     this.resolvePublicLink()
   },
   methods: {
     ...mapActions(['showMessage']),
 
+    hideDropzone() {
+      this.dragareaEnabled = false
+    },
+    onDragOver(event) {
+      const hasFileInEvent = (event.dataTransfer.types || []).some((e) => e === 'Files')
+      this.dragareaEnabled = hasFileInEvent
+    },
+
     resolvePublicLink() {
       this.loading = true
 
@@ -173,8 +193,21 @@ export default {
 
 <style lang="scss">
 #files-drop-container {
+  position: relative;
   background: transparent;
   border: 1px dashed var(--oc-color-input-border);
   margin: var(--oc-space-xlarge);
 }
+.dragarea {
+  background-color: rgba(60, 130, 225, 0.21);
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  z-index: 9;
+  border-radius: 14px;
+  border: 2px dashed var(--oc-color-swatch-primary-muted);
+}
 </style>
diff --git a/packages/web-app-files/tests/unit/views/__snapshots__/FilesDrop.spec.js.snap b/packages/web-app-files/tests/unit/views/__snapshots__/FilesDrop.spec.js.snap
index 617511bd48f..150430e8627 100644
--- a/packages/web-app-files/tests/unit/views/__snapshots__/FilesDrop.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/__snapshots__/FilesDrop.spec.js.snap
@@ -2,6 +2,7 @@
 
 exports[`FilesDrop should show page title and configuration theme general slogan 1`] = `
 <div id="files-drop-container" class="oc-height-1-1 oc-flex oc-flex-column oc-flex-between">
+  <!---->
   <h1 class="oc-invisible-sr">page route title</h1>
   <div class="oc-p oc-height-1-1">
     <div class="oc-flex oc-flex-column oc-flex-middle oc-height-1-1">
@@ -21,6 +22,7 @@ exports[`FilesDrop should show page title and configuration theme general slogan
 
 exports[`FilesDrop should show spinner with loading text if wrapper is loading 1`] = `
 <div id="files-drop-container" class="oc-height-1-1 oc-flex oc-flex-column oc-flex-between">
+  <!---->
   <h1 class="oc-invisible-sr">page route title</h1>
   <div class="oc-p oc-height-1-1">
     <div class="oc-flex oc-flex-column oc-flex-middle">
@@ -38,6 +40,7 @@ exports[`FilesDrop should show spinner with loading text if wrapper is loading 1
 
 exports[`FilesDrop when "loading" is set to false should show error message if only it has truthy value 1`] = `
 <div id="files-drop-container" class="oc-height-1-1 oc-flex oc-flex-column oc-flex-between">
+  <!---->
   <h1 class="oc-invisible-sr">page route title</h1>
   <div class="oc-p oc-height-1-1">
     <div class="oc-flex oc-flex-column oc-flex-middle oc-height-1-1">
@@ -62,6 +65,7 @@ exports[`FilesDrop when "loading" is set to false should show error message if o
 
 exports[`FilesDrop when "loading" is set to false should show share information title 1`] = `
 <div id="files-drop-container" class="oc-height-1-1 oc-flex oc-flex-column oc-flex-between">
+  <!---->
   <h1 class="oc-invisible-sr">page route title</h1>
   <div class="oc-p oc-height-1-1">
     <div class="oc-flex oc-flex-column oc-flex-middle oc-height-1-1">

From 9812ff65a0f2a2353acf302a7ac7e763c67aceee Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 1 Aug 2022 16:08:39 +0200
Subject: [PATCH 5/5] Address PR issues

---
 packages/web-app-files/src/App.vue             | 3 +--
 packages/web-app-files/src/views/FilesDrop.vue | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 50c47e98052..44206259421 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -79,8 +79,7 @@ export default defineComponent({
       this.dragareaEnabled = false
     },
     onDragOver(event) {
-      const hasFileInEvent = (event.dataTransfer.types || []).some((e) => e === 'Files')
-      this.dragareaEnabled = hasFileInEvent
+      this.dragareaEnabled = (event.dataTransfer.types || []).some((e) => e === 'Files')
     },
     focusSideBar(component, event) {
       this.focus({
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index df05ebb6423..0ac81745b29 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -127,8 +127,7 @@ export default {
       this.dragareaEnabled = false
     },
     onDragOver(event) {
-      const hasFileInEvent = (event.dataTransfer.types || []).some((e) => e === 'Files')
-      this.dragareaEnabled = hasFileInEvent
+      this.dragareaEnabled = (event.dataTransfer.types || []).some((e) => e === 'Files')
     },
 
     resolvePublicLink() {