From 2b91812f8da7023a2b52b8a8661914a5cb816a9f Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pwengerter@owncloud.com>
Date: Wed, 27 Apr 2022 19:40:47 +0200
Subject: [PATCH] [full-ci] Switch upload logic to Uppy (#6202)

* WIP

* WIP uppy

* Refactor uppy code

* Update changelog item, move uppy dependencies to web-runtime package

* Fix unit tests

* Remove logs and unnecessary events

* Minor fixes and improvements

* Fix ocis e2e tests

* Fix more e2e tests

* Prevent form fields from being added to uploaded file contents

* Properly encode file name for XHR uploads

* update fileDrop acceptance tests

* Remove Uppy drop target plugin on unmount

* Fix issues when uploading nested folders

* change rollup plugin order to apply injections for ts files also

* Fix issue with missing slashes when uploading

* Ensure that uppy uses only one upload plugin at a time

* Fix issue when updating the store for newly created folders

* Remove Uppy debug state

* Small fixes and polishing

* Fix tests, polishing

* Undo change in sunday,monday.txt file

* Bump owncloud-test-middleware docker image version to 1.5.0

Co-authored-by: Jannik Stehle <jannik.stehle@gmail.com>
Co-authored-by: saw-jan <saw.jan.grg3e@gmail.com>
Co-authored-by: Florian Schade <f.schade@icloud.com>
---
 .drone.star                                   |   2 +-
 .../unreleased/enhancement-resumeable-uploads |  12 +
 packages/web-app-files/package.json           |   3 +-
 packages/web-app-files/src/App.vue            |  16 +-
 .../src/components/AppBar/CreateAndUpload.vue | 217 ++++++----
 .../src/components/AppBar/Upload/FileDrop.vue | 132 ------
 .../components/AppBar/Upload/FileUpload.vue   |  39 +-
 .../components/AppBar/Upload/FolderUpload.vue |  26 +-
 .../src/components/Upload/ProgressBar.vue     |   7 +-
 .../src/composables/upload/index.ts           |   1 +
 .../composables/upload/useUploadHelpers.ts    | 174 ++++++++
 .../web-app-files/src/helpers/user/types.ts   |   1 +
 packages/web-app-files/src/mixins.js          | 403 ------------------
 packages/web-app-files/src/store/actions.js   |  14 -
 packages/web-app-files/src/store/getters.js   |   4 -
 packages/web-app-files/src/store/mutations.js |  48 ---
 packages/web-app-files/src/store/state.js     |   2 -
 .../web-app-files/src/views/FilesDrop.vue     | 174 +++-----
 .../components/AppBar/CreateAndUpload.spec.js |   3 +-
 .../components/AppBar/Upload/FileDrop.spec.js | 110 -----
 .../AppBar/Upload/FileUpload.spec.js          |  32 +-
 .../AppBar/Upload/FolderUpload.spec.js        |  31 +-
 .../components/Upload/ProgressBar.spec.js     |   3 +-
 .../web-app-files/tests/unit/mixins.spec.js   |  37 --
 .../tests/unit/views/FilesDrop.spec.js        | 130 +-----
 .../__snapshots__/FilesDrop.spec.js.snap      | 151 +------
 .../tests/unit/views/views.setup.js           |   1 -
 .../composables/capability/useCapability.ts   |   8 +
 packages/web-runtime/package.json             |   7 +-
 .../web-runtime/src/components/UploadInfo.vue | 223 ++++++++++
 .../src/composables/upload/index.ts           |   1 +
 .../upload/uppyPlugins/customDropTarget.ts    |  39 ++
 .../upload/uppyPlugins/customTus.ts           |  14 +
 .../src/composables/upload/useUpload.ts       | 151 +++++++
 .../web-runtime/src/container/bootstrap.ts    |  10 +
 packages/web-runtime/src/defaults/vue.js      |   5 -
 packages/web-runtime/src/index.ts             |   4 +-
 .../web-runtime/src/layouts/Application.vue   |   5 +-
 packages/web-runtime/src/plugins/upload.js    |  65 ---
 .../web-runtime/src/services/uppyService.ts   | 240 +++++++++++
 rollup.config.js                              |  10 +-
 .../shareByPublicLinkDifferentRoles.feature   |   4 +-
 tests/acceptance/pageObjects/filesDropPage.js |   6 +-
 tests/acceptance/pageObjects/personalPage.js  |   2 +-
 .../support/objects/app-files/page/public.ts  |   2 +-
 .../objects/app-files/resource/actions.ts     |   9 +-
 yarn.lock                                     | 183 ++++++--
 47 files changed, 1331 insertions(+), 1430 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-resumeable-uploads
 delete mode 100644 packages/web-app-files/src/components/AppBar/Upload/FileDrop.vue
 create mode 100644 packages/web-app-files/src/composables/upload/index.ts
 create mode 100644 packages/web-app-files/src/composables/upload/useUploadHelpers.ts
 delete mode 100644 packages/web-app-files/tests/unit/components/AppBar/Upload/FileDrop.spec.js
 delete mode 100644 packages/web-app-files/tests/unit/mixins.spec.js
 create mode 100644 packages/web-runtime/src/components/UploadInfo.vue
 create mode 100644 packages/web-runtime/src/composables/upload/index.ts
 create mode 100644 packages/web-runtime/src/composables/upload/uppyPlugins/customDropTarget.ts
 create mode 100644 packages/web-runtime/src/composables/upload/uppyPlugins/customTus.ts
 create mode 100644 packages/web-runtime/src/composables/upload/useUpload.ts
 delete mode 100644 packages/web-runtime/src/plugins/upload.js
 create mode 100644 packages/web-runtime/src/services/uppyService.ts

diff --git a/.drone.star b/.drone.star
index 2a54cdf6252..c343d151c5a 100644
--- a/.drone.star
+++ b/.drone.star
@@ -20,7 +20,7 @@ OC_CI_HUGO = "owncloudci/hugo:0.89.4"
 OC_CI_NODEJS = "owncloudci/nodejs:14"
 OC_CI_PHP = "owncloudci/php:7.4"
 OC_CI_WAIT_FOR = "owncloudci/wait-for:latest"
-OC_TESTING_MIDDLEWARE = "owncloud/owncloud-test-middleware:1.4.2"
+OC_TESTING_MIDDLEWARE = "owncloud/owncloud-test-middleware:1.5.0"
 OC_UBUNTU = "owncloud/ubuntu:20.04"
 PLUGINS_DOCKER = "plugins/docker:18.09"
 PLUGINS_DOWNSTREAM = "plugins/downstream"
diff --git a/changelog/unreleased/enhancement-resumeable-uploads b/changelog/unreleased/enhancement-resumeable-uploads
new file mode 100644
index 00000000000..df429090a42
--- /dev/null
+++ b/changelog/unreleased/enhancement-resumeable-uploads
@@ -0,0 +1,12 @@
+Enhancement: Resumable uploads
+
+We've implemented Uppy as a library for handling uploads. This concludes the following features and changes:
+
+- Resumable uploads when the backend supports the Tus-protocol
+- A nice looking overview for all files that have been uploaded successfully or failed to upload
+- Navigation across Web while uploads are in progress
+- Improved rendering of uploadProgress-visualization
+- Removed `vue2-dropzone` and `vue-drag-drop` libraries
+
+https://github.com/owncloud/web/pull/6202
+https://github.com/owncloud/web/issues/6268
diff --git a/packages/web-app-files/package.json b/packages/web-app-files/package.json
index efc2da258ab..c8acbc83df6 100644
--- a/packages/web-app-files/package.json
+++ b/packages/web-app-files/package.json
@@ -4,7 +4,6 @@
   "description": "ownCloud web files",
   "license": "AGPL-3.0",
   "dependencies": {
-    "copy-to-clipboard": "^3.3.1",
-    "vue2-dropzone": "^3.6.0"
+    "copy-to-clipboard": "^3.3.1"
   }
 }
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index fb8aae9e5fd..b9e1d445c57 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -1,11 +1,6 @@
 <template>
   <main id="files" class="oc-flex oc-height-1-1">
-    <div
-      ref="filesListWrapper"
-      tabindex="-1"
-      class="files-list-wrapper oc-width-expand"
-      @dragover="$_ocApp_dragOver"
-    >
+    <div ref="filesListWrapper" tabindex="-1" class="files-list-wrapper oc-width-expand">
       <router-view id="files-view" />
     </div>
     <side-bar
@@ -25,7 +20,7 @@
 </template>
 <script lang="ts">
 import Mixins from './mixins'
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 import SideBar from './components/SideBar/SideBar.vue'
 import { defineComponent } from '@vue/composition-api'
 
@@ -35,7 +30,6 @@ export default defineComponent({
   },
   mixins: [Mixins],
   computed: {
-    ...mapGetters('Files', ['dropzone']),
     ...mapState('Files/sidebar', {
       sidebarClosed: 'closed',
       sidebarActivePanel: 'activePanel'
@@ -62,7 +56,7 @@ export default defineComponent({
   },
 
   methods: {
-    ...mapActions('Files', ['dragOver', 'resetFileSelection']),
+    ...mapActions('Files', ['resetFileSelection']),
     ...mapActions('Files/sidebar', {
       closeSidebar: 'close',
       setActiveSidebarPanel: 'setActivePanel'
@@ -75,10 +69,6 @@ export default defineComponent({
         to: this.$refs.filesSidebar?.$el,
         revert: event === 'beforeDestroy'
       })
-    },
-    $_ocApp_dragOver(event) {
-      const hasfileInEvent = (event.dataTransfer.types || []).some((e) => e === 'Files')
-      this.dragOver(hasfileInEvent)
     }
   }
 })
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 704034a1865..794ad4992d4 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -70,15 +70,6 @@
         <translate>New folder</translate>
       </oc-button>
     </template>
-    <file-drop
-      v-if="!uploadOrFileCreationBlocked"
-      :root-path="currentPath"
-      :path="currentPath"
-      :headers="headers"
-      @success="onFileSuccess"
-      @error="onFileError"
-      @progress="onFileProgress"
-    />
     <oc-button
       id="upload-menu-btn"
       key="upload-menu-btn-enabled"
@@ -99,34 +90,20 @@
     >
       <oc-list id="upload-list">
         <li>
-          <folder-upload
-            :root-path="currentPath"
-            :path="currentPath"
-            :headers="headers"
-            @success="onFileSuccess"
-            @error="onFileError"
-            @progress="onFileProgress"
-          />
+          <folder-upload ref="folder-upload" />
         </li>
         <li>
-          <file-upload
-            :path="currentPath"
-            :headers="headers"
-            @success="onFileSuccess"
-            @error="onFileError"
-            @progress="onFileProgress"
-          />
+          <file-upload ref="file-upload" btn-class="oc-width-1-1" />
         </li>
       </oc-list>
     </oc-drop>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import pathUtil from 'path'
 
-import Mixins from '../../mixins'
 import MixinFileActions, { EDITOR_MODE_CREATE } from '../../mixins/fileActions'
 import { buildResource, buildWebDavFilesPath, buildWebDavSpacesPath } from '../../helpers/resources'
 import { isLocationPublicActive, isLocationSpacesActive } from '../../router'
@@ -135,19 +112,46 @@ import { useAppDefaults } from 'web-pkg/src/composables'
 
 import { DavProperties, DavProperty } from 'web-pkg/src/constants'
 
-import FileDrop from './Upload/FileDrop.vue'
+// 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 { UppyResource, useUpload } from 'web-runtime/src/composables/upload'
+import { useUploadHelpers } from '../../composables/upload'
 
-export default {
+export default defineComponent({
   components: {
-    FileDrop,
     FileUpload,
     FolderUpload
   },
-  mixins: [Mixins, MixinFileActions],
+  mixins: [MixinFileActions],
   setup() {
+    const instance = getCurrentInstance().proxy
+    const uppyService = instance.$uppyService
+
+    onMounted(() => {
+      uppyService.$on('filesSelected', instance.onFilesSelected)
+      uppyService.$on('uploadSuccess', instance.onFileSuccess)
+      uppyService.$on('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()
+    })
+
     return {
+      ...useUpload({
+        uppyService
+      }),
+      ...useUploadHelpers(),
       isPersonalLocation: useActiveLocation(isLocationSpacesActive, 'files-spaces-personal-home'),
       isPublicLocation: useActiveLocation(isLocationPublicActive, 'files-public-files'),
       isSpacesProjectsLocation: useActiveLocation(isLocationSpacesActive, 'files-spaces-projects'),
@@ -176,29 +180,6 @@ export default {
       return mimeTypes.filter((mimetype) => mimetype.allow_creation) || []
     },
 
-    currentPath() {
-      const path = this.$route.params.item || ''
-      if (path.endsWith('/')) {
-        return path
-      }
-      return path + '/'
-    },
-
-    headers() {
-      if (this.isPublicLocation) {
-        const password = this.publicLinkPassword
-
-        if (password) {
-          return { Authorization: 'Basic ' + Buffer.from('public:' + password).toString('base64') }
-        }
-
-        return {}
-      }
-      return {
-        Authorization: 'Bearer ' + this.getToken
-      }
-    },
-
     showActions() {
       return !(this.uploadOrFileCreationBlocked && this.isPublicLocation)
     },
@@ -265,20 +246,23 @@ export default {
     }
   },
   methods: {
-    ...mapActions('Files', ['updateFileProgress', 'loadIndicators']),
-    ...mapActions(['showMessage', 'createModal', 'setModalInputErrorMessage']),
+    ...mapActions('Files', ['loadPreview', 'loadIndicators']),
+    ...mapActions(['openFile', 'showMessage', 'createModal', 'setModalInputErrorMessage']),
     ...mapMutations('Files', ['UPSERT_RESOURCE']),
     ...mapMutations(['SET_QUOTA']),
 
-    async onFileSuccess(event, file) {
+    async onFileSuccess(file: UppyResource) {
       try {
-        if (file.name) {
-          file = file.name
+        let pathFileWasUploadedTo = file.meta.currentFolder
+        if (file.meta.relativeFolder) {
+          pathFileWasUploadedTo += file.meta.relativeFolder
         }
 
+        const fileIsInCurrentPath = pathFileWasUploadedTo === this.currentPath
+
         await this.$nextTick()
 
-        let path = pathUtil.join(this.currentPath, file)
+        let path = pathUtil.join(pathFileWasUploadedTo, file.name)
         let resource
 
         if (this.isPersonalLocation) {
@@ -297,14 +281,17 @@ export default {
 
         resource = buildResource(resource)
 
-        this.UPSERT_RESOURCE(resource)
-
-        if (this.isPersonalLocation) {
-          this.loadIndicators({
-            client: this.$client,
-            currentFolder: this.currentFolder.path,
-            encodePath: this.encodePath
-          })
+        // Update table only if the file was uploaded to the current directory
+        if (fileIsInCurrentPath) {
+          this.UPSERT_RESOURCE(resource)
+
+          if (this.isPersonalLocation) {
+            this.loadIndicators({
+              client: this.$client,
+              currentFolder: this.currentFolder.path,
+              encodePath: this.encodePath
+            })
+          }
         }
 
         const user = await this.$client.users.getUser(this.user.id)
@@ -315,18 +302,13 @@ export default {
       }
     },
 
-    onFileError(error) {
-      console.error(error)
+    onFileError(file) {
       this.showMessage({
         title: this.$gettext('Failed to upload'),
         status: 'danger'
       })
     },
 
-    onFileProgress(progress) {
-      this.updateFileProgress(progress)
-    },
-
     showCreateResourceModal(
       isFolder = true,
       ext = 'txt',
@@ -623,9 +605,96 @@ export default {
       }
 
       return null
+    },
+
+    onFilesSelected(files: File[]) {
+      const conflicts = []
+      const uppyResources: UppyResource[] = this.inputFilesToUppyFiles(files)
+      for (const file of uppyResources) {
+        const relativeFilePath = file.meta.relativePath
+        if (relativeFilePath) {
+          const rootFolder = relativeFilePath.replace(/^\/+/, '').split('/')[0]
+          const exists = this.files.find((f) => f.name === rootFolder)
+          if (exists) {
+            this.showMessage({
+              title: this.$gettextInterpolate(
+                this.$gettext('Folder "%{folder}" already exists.'),
+                { folder: rootFolder },
+                true
+              ),
+              status: 'danger'
+            })
+            return
+          }
+
+          // Folder does not exist, no need to care about files inside -> continue
+          continue
+        }
+        const exists = this.files.find((f) => f.name === file.name)
+        if (exists) {
+          conflicts.push(file)
+        }
+      }
+
+      if (conflicts.length) {
+        this.displayOverwriteDialog(uppyResources, conflicts)
+      } else {
+        this.handleUppyFileUpload(uppyResources)
+      }
+    },
+
+    async handleUppyFileUpload(files: UppyResource[]) {
+      await this.createDirectoryTree(files)
+      await this.updateStoreForCreatedFolders(files)
+      this.$uppyService.uploadFiles(files)
+    },
+
+    displayOverwriteDialog(files: UppyResource[], conflicts) {
+      const title = this.$ngettext(
+        'File already exists',
+        'Some files already exist',
+        conflicts.length
+      )
+
+      const isVersioningEnabled =
+        !this.publicPage() && this.capabilities.files && this.capabilities.files.versioning
+
+      let translatedMsg
+      if (isVersioningEnabled) {
+        translatedMsg = this.$ngettext(
+          'The following resource already exists: %{resources}. Do you want to create a new version for it?',
+          'The following resources already exist: %{resources}. Do you want to create a new version for them?',
+          conflicts.length
+        )
+      } else {
+        translatedMsg = this.$ngettext(
+          'The following resource already exists: %{resources}. Do you want to overwrite it?',
+          'The following resources already exist: %{resources}. Do you want to overwrite them?',
+          conflicts.length
+        )
+      }
+      const message = this.$gettextInterpolate(translatedMsg, {
+        resources: conflicts.map((f) => `${f.name}`).join(', ')
+      })
+
+      const modal = {
+        variation: isVersioningEnabled ? 'passive' : 'danger',
+        icon: 'upload-cloud',
+        title,
+        message,
+        cancelText: this.$gettext('Cancel'),
+        confirmText: isVersioningEnabled ? this.$gettext('Create') : this.$gettext('Overwrite'),
+        onCancel: this.hideModal,
+        onConfirm: () => {
+          this.hideModal()
+          this.handleUppyFileUpload(files)
+        }
+      }
+
+      this.createModal(modal)
     }
   }
-}
+})
 </script>
 <style lang="scss" scoped>
 #create-list {
diff --git a/packages/web-app-files/src/components/AppBar/Upload/FileDrop.vue b/packages/web-app-files/src/components/AppBar/Upload/FileDrop.vue
deleted file mode 100644
index f2fd61f005c..00000000000
--- a/packages/web-app-files/src/components/AppBar/Upload/FileDrop.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-  <div v-if="dropzone" :class="[sidebarStateClass]">
-    <vue-dropzone
-      id="oc-dropzone"
-      ref="ocDropzone"
-      class="oc-dropzone-container"
-      :class="[sidebarStateClass]"
-      :options="ocDropzone_options"
-      :use-custom-slot="true"
-      :include-styling="false"
-      @vdropzone-drop="$_ocUpload_addDropToQueue"
-      @vdropzone-files-added="$_ocDropzone_dragEnd"
-      @vdropzone-file-added="$_ocDropzone_removeFiles"
-      @vdropzone-drag-leave="$_ocDropzone_dragEnd"
-    >
-      <oc-dropzone>
-        <translate> Drag and drop to upload content into current folder </translate>
-      </oc-dropzone>
-    </vue-dropzone>
-  </div>
-</template>
-<script>
-import vue2DropZone from 'vue2-dropzone'
-import 'vue2-dropzone/dist/vue2Dropzone.min.css'
-import Mixins from '../../../mixins'
-import { mapActions, mapGetters, mapState } from 'vuex'
-import { useActiveApp } from 'web-pkg/src/composables'
-import { useActiveLocation } from '../../../composables'
-import { isLocationPublicActive } from '../../../router'
-
-export default {
-  components: {
-    vueDropzone: vue2DropZone
-  },
-  mixins: [Mixins],
-  props: {
-    rootPath: { type: String, required: true },
-    path: { type: String, required: true },
-    headers: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    requestType: { type: String, default: 'PUT' }
-  },
-  setup() {
-    return {
-      isPublicLocation: useActiveLocation(isLocationPublicActive, 'files-public-files'),
-      activeApp: useActiveApp()
-    }
-  },
-  data() {
-    return {
-      ocDropzone_options: {
-        url: '#', // FIXME: unused
-        clickable: false,
-        autoQueue: false
-      }
-    }
-  },
-  computed: {
-    ...mapState(['navigation', 'user']),
-    ...mapGetters(['getNavItemsByExtension']),
-    ...mapGetters('Files', ['dropzone']),
-    hasSidebarNavItems() {
-      if (this.isPublicLocation) {
-        return false
-      }
-      return (this.getNavItemsByExtension(this.activeApp) || []).length
-    },
-    sidebarStateClass() {
-      if (!this.hasSidebarNavItems) {
-        return 'oc-dropzone-navigation-hidden'
-      }
-      return this.navigation.closed
-        ? 'oc-dropzone-navigation-collapsed'
-        : 'oc-dropzone-navigation-expanded'
-    }
-  },
-  methods: {
-    ...mapActions('Files', ['dragOver']),
-
-    $_ocDropzone_dragEnd() {
-      this.dragOver(false)
-    },
-    $_ocDropzone_removeFiles(file) {
-      this.$refs.ocDropzone.removeFile(file)
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.oc-dropzone-navigation-hidden,
-.oc-dropzone-navigation-collapsed,
-.oc-dropzone-navigation-expanded {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.oc-dropzone-container {
-  position: fixed;
-  top: 60px;
-  height: calc(100% - 60px - var(--oc-space-small));
-  left: var(--oc-space-small);
-  width: calc(100% - (2 * var(--oc-space-small)));
-  z-index: 3;
-
-  // TODO: Remove vue-dropzone
-  .dz-message {
-    height: 100%;
-  }
-  .oc-dropzone {
-    border-radius: 15px;
-    height: calc(100% - (2 * var(--oc-space-medium)));
-  }
-}
-@media only screen and (min-width: 640px) {
-  .oc-dropzone-navigation-collapsed > .oc-dropzone-container {
-    left: calc(64px + var(--oc-space-small));
-    width: calc(100% - 64px - (2 * var(--oc-space-small)));
-  }
-  .oc-dropzone-navigation-expanded > .oc-dropzone-container {
-    left: calc(250px + var(--oc-space-small));
-    width: calc(100% - 250px - (2 * var(--oc-space-small)));
-  }
-}
-</style>
diff --git a/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue b/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
index 3303719fdf9..1a22d1217a0 100644
--- a/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
@@ -1,46 +1,43 @@
 <template>
   <div>
-    <oc-button class="oc-width-1-1" justify-content="left" appearance="raw" @click="triggerUpload">
+    <oc-button :class="btnClass" justify-content="left" appearance="raw" @click="triggerUpload">
       <oc-resource-icon :resource="{ extension: '' }" />
-      <span id="files-file-upload-button" v-translate>Files</span>
+      <span id="files-file-upload-button">{{ btnLabel }}</span>
     </oc-button>
     <input
       id="fileUploadInput"
       ref="input"
+      class="upload-input-target"
       type="file"
       aria-labelledby="files-file-upload-button"
       name="file"
       multiple
       tabindex="-1"
-      @change="$_ocUpload_addFileToQueue"
     />
   </div>
 </template>
 
 <script>
-import Mixins from '../../../mixins'
-import { mapState } from 'vuex'
-
 export default {
-  mixins: [Mixins],
   props: {
-    path: { type: String, required: true },
-    headers: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    additionalData: {
-      type: Object,
-      default: () => {
-        return {}
+    btnLabel: {
+      type: String,
+      required: false,
+      default: function () {
+        return this.$gettext('Files')
       }
     },
-    requestType: { type: String, default: 'PUT' }
+    btnClass: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  mounted() {
+    this.$uppyService.registerUploadInput(this.$refs.input)
   },
-  computed: {
-    ...mapState(['user'])
+  beforeDestroy() {
+    this.$uppyService.removeUploadInput(this.$refs.input)
   },
   methods: {
     triggerUpload() {
diff --git a/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue b/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue
index 5201e609d5a..e28b78f1f2c 100644
--- a/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue
@@ -7,6 +7,7 @@
     <input
       id="folderUploadInput"
       ref="input"
+      class="upload-input-target"
       type="file"
       name="folder"
       aria-labelledby="files-folder-upload-button"
@@ -14,32 +15,17 @@
       mozdirectory
       allowdirs
       tabindex="-1"
-      @change="$_ocUpload_addDirectoryToQueue"
     />
   </div>
 </template>
 
 <script>
-import Mixins from '../../../mixins'
-
 export default {
-  mixins: [Mixins],
-  props: {
-    rootPath: { type: String, required: true },
-    path: { type: String, required: true },
-    headers: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    additionalData: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    requestType: { type: String, default: 'PUT' }
+  mounted() {
+    this.$uppyService.registerUploadInput(this.$refs.input)
+  },
+  beforeDestroy() {
+    this.$uppyService.removeUploadInput(this.$refs.input)
   },
   methods: {
     triggerUpload() {
diff --git a/packages/web-app-files/src/components/Upload/ProgressBar.vue b/packages/web-app-files/src/components/Upload/ProgressBar.vue
index 3ea128a3a20..d2d9129d785 100644
--- a/packages/web-app-files/src/components/Upload/ProgressBar.vue
+++ b/packages/web-app-files/src/components/Upload/ProgressBar.vue
@@ -94,7 +94,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('Files', ['inProgress', 'uploaded']),
+    ...mapGetters('Files', ['inProgress']),
 
     count() {
       return this.inProgress.length
@@ -109,11 +109,6 @@ export default {
         progressSizeSum += (item.size * item.progress) / 100
       }
 
-      for (const item of this.uploaded) {
-        totalSizeSum += item.size
-        progressSizeSum += item.size
-      }
-
       if (this.inProgress.length > 0 && totalSizeSum > 0) {
         return (progressSizeSum / totalSizeSum) * 100
       } else {
diff --git a/packages/web-app-files/src/composables/upload/index.ts b/packages/web-app-files/src/composables/upload/index.ts
new file mode 100644
index 00000000000..a0ccc7142e7
--- /dev/null
+++ b/packages/web-app-files/src/composables/upload/index.ts
@@ -0,0 +1 @@
+export * from './useUploadHelpers'
diff --git a/packages/web-app-files/src/composables/upload/useUploadHelpers.ts b/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
new file mode 100644
index 00000000000..5a248e7802b
--- /dev/null
+++ b/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
@@ -0,0 +1,174 @@
+import { Route } from 'vue-router'
+import { UppyResource } from 'web-runtime/src/composables/upload'
+import { buildResource, buildWebDavFilesPath, buildWebDavSpacesPath } from '../../helpers/resources'
+import { User } from '../../helpers/user'
+import { DavProperties } from 'web-pkg/src/constants'
+import { ClientService } from 'web-pkg/src/services'
+import { Store } from 'vuex'
+import { useClientService, useRoute, useStore } from 'web-pkg/src/composables'
+import { useActiveLocation } from '../router'
+import { isLocationPublicActive, isLocationSpacesActive } from '../../router'
+import { computed, Ref, unref } from '@vue/composition-api'
+
+interface UploadHelpersResult {
+  inputFilesToUppyFiles(inputFileOptions): UppyResource[]
+  updateStoreForCreatedFolders(files: UppyResource[]): void
+  currentPath: Ref<string>
+  uploadPath: Ref<string>
+}
+
+interface inputFileOptions {
+  route: Ref<Route>
+  uploadPath: Ref<string>
+  currentPath: Ref<string>
+  user: Ref<User>
+}
+
+export function useUploadHelpers(): UploadHelpersResult {
+  const store = useStore()
+  const route = useRoute()
+  const publicLinkPassword = computed((): string => store.getters['Files/publicLinkPassword'])
+  const isPublicLocation = useActiveLocation(isLocationPublicActive, 'files-public-files')
+  const isSpacesProjectLocation = useActiveLocation(isLocationSpacesActive, 'files-spaces-project')
+  const clientService = useClientService()
+  const user = computed((): User => store.getters.user)
+
+  const currentPath = computed((): string => {
+    const { params } = unref(route)
+    const path = params.item || ''
+    if (path.endsWith('/')) {
+      return path
+    }
+    return path + '/'
+  })
+
+  const uploadPath = computed((): string => {
+    const { params } = unref(route)
+    const { owncloudSdk: client } = clientService
+
+    if (unref(isPublicLocation)) {
+      return client.publicFiles.getFileUrl(unref(currentPath))
+    }
+
+    if (unref(isSpacesProjectLocation)) {
+      const path = buildWebDavSpacesPath(params.storageId, unref(currentPath))
+      return client.files.getFileUrl(path)
+    }
+
+    return client.files.getFileUrl(buildWebDavFilesPath(unref(user).id, unref(currentPath)))
+  })
+
+  return {
+    inputFilesToUppyFiles: inputFilesToUppyFiles({ route, uploadPath, currentPath, user }),
+    updateStoreForCreatedFolders: updateStoreForCreatedFolders({
+      clientService,
+      store,
+      isPublicLocation,
+      publicLinkPassword
+    }),
+    currentPath,
+    uploadPath
+  }
+}
+
+const updateStoreForCreatedFolders = ({
+  clientService,
+  store,
+  isPublicLocation,
+  publicLinkPassword
+}: {
+  clientService: ClientService
+  store: Store<any>
+  isPublicLocation: Ref<boolean>
+  publicLinkPassword: Ref<string>
+}) => {
+  return async (files: UppyResource[]) => {
+    const { owncloudSdk: client } = clientService
+    const fetchedFolders = []
+    for (const file of files) {
+      if (!file.meta.relativeFolder) {
+        continue
+      }
+
+      const relativeFolder = `/${file.meta.relativeFolder.replace(/^\/+/, '')}`
+      // Only care about the root folders, no need to fetch nested folders
+      const rootFolder = relativeFolder.split('/').slice(0, 2).join('/')
+      const rootFolderPath = `${file.meta.webDavBasePath}/${rootFolder}`
+
+      if (fetchedFolders.includes(rootFolderPath)) {
+        continue
+      }
+
+      let resource
+      if (unref(isPublicLocation)) {
+        resource = await client.publicFiles.getFileInfo(
+          `${file.meta.currentFolder}${rootFolder}`,
+          unref(publicLinkPassword),
+          DavProperties.PublicLink
+        )
+      } else {
+        resource = await client.files.fileInfo(rootFolderPath, DavProperties.Default)
+      }
+
+      resource = buildResource(resource)
+      store.commit('Files/UPSERT_RESOURCE', resource)
+      fetchedFolders.push(rootFolderPath)
+    }
+  }
+}
+
+const inputFilesToUppyFiles = ({ route, uploadPath, currentPath, user }: inputFileOptions) => {
+  return (files: File[]): UppyResource[] => {
+    const uppyFiles: UppyResource[] = []
+
+    const { params } = unref(route)
+    const currentFolder = unref(currentPath)
+
+    for (const file of files) {
+      // Get the relative path of the file when the file was inside a directory on the client computer
+      const relativeFilePath = file.webkitRelativePath || (file as any).relativePath || null
+      // Directory without filename
+      const directory = relativeFilePath
+        ? relativeFilePath.substring(0, relativeFilePath.lastIndexOf('/'))
+        : ''
+
+      // Build tus endpoint to dynamically set it on file upload.
+      // Looks something like: https://localhost:9200/remote.php/dav/files/admin
+      let tusEndpoint
+      if (directory) {
+        tusEndpoint = `${unref(uploadPath).replace(/\/+$/, '')}/${directory.replace(/^\/+/, '')}`
+      } else {
+        tusEndpoint = unref(uploadPath)
+      }
+
+      // Build the route object for this file. This is used later by the upload-info-box
+      const item = params.item ? `${params.item}/${directory}` : directory
+      const fileRoute = {
+        ...unref(route),
+        params: { ...params, item }
+      }
+
+      const storageId = params.storageId
+      const webDavBasePath = storageId
+        ? buildWebDavSpacesPath(storageId, currentFolder)
+        : buildWebDavFilesPath(unref(user)?.id, currentFolder)
+
+      uppyFiles.push({
+        source: 'file input',
+        name: file.name,
+        type: file.type,
+        data: file,
+        meta: {
+          currentFolder,
+          relativeFolder: directory,
+          relativePath: relativeFilePath, // uppy needs this property to be named relativePath
+          route: fileRoute,
+          tusEndpoint,
+          webDavBasePath // WebDAV base path where the files will be uploaded to
+        }
+      })
+    }
+
+    return uppyFiles
+  }
+}
diff --git a/packages/web-app-files/src/helpers/user/types.ts b/packages/web-app-files/src/helpers/user/types.ts
index ccfb7622927..5aec66fda05 100644
--- a/packages/web-app-files/src/helpers/user/types.ts
+++ b/packages/web-app-files/src/helpers/user/types.ts
@@ -1,4 +1,5 @@
 export interface User {
+  id?: string
   uuid?: string
   name?: string
   username?: string
diff --git a/packages/web-app-files/src/mixins.js b/packages/web-app-files/src/mixins.js
index 7ad0e341509..f38fc35ddb7 100644
--- a/packages/web-app-files/src/mixins.js
+++ b/packages/web-app-files/src/mixins.js
@@ -1,8 +1,4 @@
-import pathUtil from 'path'
 import { DateTime } from 'luxon'
-import { mapActions, mapGetters } from 'vuex'
-import PQueue from 'p-queue'
-import { buildWebDavFilesPath, buildWebDavSpacesPath } from './helpers/resources'
 
 export default {
   filters: {
@@ -10,24 +6,7 @@ export default {
       return parseInt(int.toFixed(0))
     }
   },
-  data: () => ({
-    uploadQueue: new PQueue({ concurrency: 1 }),
-    directoryQueue: new PQueue({ concurrency: 1 }),
-    uploadFileUniqueId: 0,
-    /**
-     * Resources in the upload queue which already exists
-     */
-    existingResources: []
-  }),
-  computed: {
-    ...mapGetters('Files', ['files', 'highlightedFile', 'publicLinkPassword', 'currentFolder']),
-    ...mapGetters(['getToken', 'capabilities', 'configuration']),
-    ...mapGetters(['user'])
-  },
   methods: {
-    ...mapActions('Files', ['resetSearch', 'addFileToProgress', 'removeFileFromProgress']),
-    ...mapActions(['showMessage', 'createModal', 'hideModal']),
-
     formDateFromJSDate(date, format = DateTime.DATETIME_FULL) {
       return DateTime.fromJSDate(date).setLocale(this.$language.current).toLocaleString(format)
     },
@@ -57,388 +36,6 @@ export default {
        * Delay for screen readers Virtual buffers
        */
       setTimeout(() => func(), delay)
-    },
-    checkIfBrowserSupportsFolderUpload() {
-      const el = document.createElement('input')
-      el.type = 'file'
-      return (
-        typeof el.webkitdirectory !== 'undefined' ||
-        typeof el.mozdirectory !== 'undefined' ||
-        typeof el.directory !== 'undefined'
-      )
-    },
-    checkIfElementExists(element) {
-      const name = element.name || element
-      return this.files.find((file) => file.name === name)
-    },
-
-    async processDirectoryEntryRecursively(directory) {
-      // step 1: create folder
-      await this.$_buildCreateFolderCallback(this.rootPath, directory.fullPath, {
-        userId: this.user?.id,
-        storageId: this.$route.params.storageId,
-        publicLinkPassword: this.publicLinkPassword
-      })()
-
-      // step 2: for all files in folder: recursion (if folder) or upload (if file)
-      const directoryReader = directory.createReader()
-      const ctrl = this
-      directoryReader.readEntries(function (entries) {
-        entries.forEach(function (entry) {
-          if (entry.isDirectory) {
-            ;(() => {
-              ctrl.processDirectoryEntryRecursively(entry)
-            })()
-          } else {
-            entry.file((file) => {
-              ctrl.$_ocUpload(file, entry.fullPath, null, false)
-            })
-          }
-        })
-      })
-    },
-
-    hideOverwriteDialog() {
-      this.existingResources = []
-      this.hideModal()
-    },
-
-    confirmOverwrite() {
-      for (const resource of this.existingResources) {
-        this.$_ocUpload(resource.file, resource.path, resource.etag)
-      }
-
-      this.hideOverwriteDialog()
-    },
-
-    displayOverwriteDialog() {
-      const translated = this.$gettext('File "%{file}" already exists')
-      const isVersioningEnabled =
-        !this.publicPage() && this.capabilities.files && this.capabilities.files.versioning
-      // TODO: Handle properly case of multiple existing files
-      const title =
-        this.existingResources.length > 1
-          ? this.$gettext('Multiple files already exist')
-          : this.$gettextInterpolate(
-              translated,
-              { file: this.existingResources[0].file.name },
-              true
-            )
-
-      const modal = {
-        variation: isVersioningEnabled ? 'passive' : 'danger',
-        icon: 'upload-cloud',
-        title,
-        message: isVersioningEnabled
-          ? this.$gettext('Do you want to create a new version?')
-          : this.$gettext('Do you want to overwrite it?'),
-        cancelText: this.$gettext('Cancel'),
-        confirmText: isVersioningEnabled ? this.$gettext('Create') : this.$gettext('Overwrite'),
-        onCancel: this.hideOverwriteDialog,
-        onConfirm: this.confirmOverwrite
-      }
-
-      this.createModal(modal)
-    },
-
-    $_ocUpload_addDropToQueue(e) {
-      const items = e.dataTransfer.items || e.dataTransfer.files
-      const promises = []
-
-      // A list of files is being dropped ...
-      if (items instanceof FileList) {
-        this.$_ocUpload_addDirectoryToQueue(e)
-        return
-      }
-
-      for (let item of items) {
-        item = item.webkitGetAsEntry()
-        const exists = this.checkIfElementExists(item)
-
-        if (item.isDirectory) {
-          if (exists) {
-            this.showMessage({
-              title: this.$gettextInterpolate(
-                this.$gettext('Folder "%{folder}" already exists.'),
-                { folder: item.name },
-                true
-              ),
-              status: 'danger'
-            })
-
-            continue
-          }
-
-          this.processDirectoryEntryRecursively(item).then(() => {
-            this.$emit('success', null, item.name)
-          })
-
-          continue
-        }
-
-        if (exists) {
-          promises.push(
-            new Promise((resolve) => {
-              item.file((file) => {
-                this.existingResources.push({ file, path: item.fullPath, etag: exists.etag })
-
-                resolve()
-              })
-            })
-          )
-
-          continue
-        }
-
-        item.file((file) => {
-          this.$_ocUpload(file, item.fullPath)
-        })
-      }
-
-      // Ensures with promises that all files will be properly pushed into the existingResources array
-      if (promises.length > 0) {
-        Promise.all(promises).then(() => {
-          this.displayOverwriteDialog()
-        })
-      }
-    },
-
-    $_ocUpload_addFileToQueue(e) {
-      const files = e.target.files
-
-      if (files.length < 1) {
-        return
-      }
-
-      for (let i = 0; i < files.length; i++) {
-        const exists = this.checkIfElementExists(files[i])
-
-        if (exists) {
-          this.existingResources.push({ file: files[i], path: files[i].name, etag: exists.etag })
-
-          continue
-        }
-
-        this.$_ocUpload(files[i], files[i].name)
-      }
-
-      this.$_ocUploadInput_clean()
-
-      if (this.existingResources.length > 0) {
-        this.displayOverwriteDialog()
-      }
-    },
-
-    $_ocUpload_addDirectoryToQueue(e) {
-      const files = e.target.files || e.dataTransfer.files
-      if (!files.length) return
-
-      // Check if base directory exists
-      let directoryPath = files[0].webkitRelativePath.replace('/' + files[0].name, '')
-      const directoryName = directoryPath.split('/')[0]
-      const directoryExists = this.checkIfElementExists(directoryName)
-
-      if (directoryExists) {
-        this.showMessage({
-          title: this.$gettextInterpolate(
-            this.$gettext('Folder "%{folder}" already exists.'),
-            { folder: directoryName },
-            true
-          ),
-          status: 'danger'
-        })
-      } else {
-        // Get folder structure
-        const directoriesToCreate = []
-        for (const file of files) {
-          this.$_addFileToUploadProgress(file)
-          directoryPath = file.webkitRelativePath.replace('/' + file.name, '')
-
-          if (directoriesToCreate.indexOf(directoryPath) > -1) {
-            continue
-          }
-
-          const directories = directoryPath.split('/')
-          for (let i = 0; i < directories.length; i++) {
-            if (i === 0) {
-              if (directoriesToCreate.indexOf(directories[0]) === -1) {
-                directoriesToCreate.push(directories[0])
-              }
-
-              continue
-            }
-
-            const parentDirectory = pathUtil.join.apply(null, directories.slice(0, i))
-            const currentDirectory = `${parentDirectory}/${directories[i]}`
-
-            if (directoriesToCreate.indexOf(currentDirectory) === -1) {
-              directoriesToCreate.push(currentDirectory)
-            }
-          }
-        }
-
-        // Create folder structure
-        const createFolderPromises = []
-        const rootDir = directoriesToCreate[0]
-        for (const directory of directoriesToCreate) {
-          createFolderPromises.push(
-            this.directoryQueue.add(
-              this.$_buildCreateFolderCallback(this.rootPath, directory, {
-                userId: this.user?.id,
-                storageId: this.$route.params.storageId,
-                publicLinkPassword: this.publicLinkPassword
-              })
-            )
-          )
-        }
-        // Upload files
-        const uploadPromises = []
-        Promise.all(createFolderPromises).then(() => {
-          for (const file of files) {
-            uploadPromises.push(this.$_ocUpload(file, file.webkitRelativePath, null, false, false))
-          }
-          // once all files are uploaded we emit the success event
-          Promise.all(uploadPromises).then(() => {
-            this.$emit('success', null, rootDir)
-            this.$_ocUploadInput_clean()
-          })
-        })
-      }
-    },
-
-    $_buildCreateFolderCallback(rootPath, directory, { userId, storageId, publicLinkPassword }) {
-      if (this.publicPage()) {
-        return () => this.$client.publicFiles.createFolder(rootPath, directory, publicLinkPassword)
-      }
-
-      const path = storageId
-        ? buildWebDavSpacesPath(storageId, `${rootPath}${directory}`)
-        : buildWebDavFilesPath(userId, `${rootPath}${directory}`)
-      return () => this.$client.files.createFolder(path)
-    },
-
-    /**
-     * Adds file into the progress queue and assigns it unique id
-     * @param {Object} file File which is to be added into progress
-     */
-    $_addFileToUploadProgress(file) {
-      file.id = this.uploadFileUniqueId
-      this.uploadFileUniqueId++
-      this.addFileToProgress(file)
-    },
-
-    $_ocUpload(file, path, overwrite = null, emitSuccess = true, addToProgress = true) {
-      this.$root.$emit('upload-start')
-      let basePath = this.path || ''
-      let relativePath = path
-      if (addToProgress) {
-        this.$_addFileToUploadProgress(file)
-      }
-
-      let promise
-      if (this.publicPage()) {
-        // strip out public link token from path
-        const tokenSplit = basePath.indexOf('/')
-        const token = basePath.substring(0, tokenSplit)
-        basePath = basePath.substring(tokenSplit + 1) || ''
-        relativePath = pathUtil.join(basePath, relativePath)
-        const extraHeaders = {}
-        if (file.lastModifiedDate) {
-          extraHeaders['X-OC-Mtime'] = '' + file.lastModifiedDate.getTime() / 1000
-        } else if (file.lastModified) {
-          extraHeaders['X-OC-Mtime'] = '' + file.lastModified / 1000
-        }
-        promise = this.uploadQueue.add(() =>
-          this.$client.publicFiles.putFileContents(
-            token,
-            relativePath,
-            this.publicLinkPassword,
-            file,
-            {
-              headers: extraHeaders,
-              onProgress: (progress) => {
-                this.$_ocUpload_onProgress(progress, file)
-              },
-              overwrite: overwrite
-            }
-          )
-        )
-      } else {
-        basePath = this.path || ''
-        const joinedPath = pathUtil.join(basePath, relativePath)
-
-        if (this.$route.params.storageId) {
-          relativePath = buildWebDavSpacesPath(this.$route.params.storageId, joinedPath)
-        } else {
-          relativePath = buildWebDavFilesPath(this.user.id, joinedPath)
-        }
-        // FIXME: this might break if relativePath is not the currentFolder
-        // and is a mount point that has no chunk support
-        if (this.browserSupportsChunked && this.currentFolder.isChunkedUploadSupported) {
-          let chunkSize = this.configuration.uploadChunkSize
-          if (this.capabilities.files.tus_support.max_chunk_size > 0) {
-            if (
-              chunkSize === null ||
-              chunkSize === 0 ||
-              chunkSize > this.capabilities.files.tus_support.max_chunk_size
-            ) {
-              chunkSize = this.capabilities.files.tus_support.max_chunk_size
-            }
-          }
-          promise = this.uploadQueue.add(() => {
-            return this.uploadChunkedFile(file, pathUtil.dirname(relativePath), {
-              chunkSize: chunkSize,
-              overridePatchMethod: !!this.capabilities.files.tus_support.http_method_override,
-              emitProgress: (progress) => {
-                this.$_ocUpload_onProgress(progress, file)
-              }
-            })
-          })
-        } else {
-          const extraHeaders = {}
-          if (file.lastModifiedDate) {
-            extraHeaders['X-OC-Mtime'] = '' + file.lastModifiedDate.getTime() / 1000
-          } else if (file.lastModified) {
-            extraHeaders['X-OC-Mtime'] = '' + file.lastModified / 1000
-          }
-          promise = this.uploadQueue.add(() =>
-            this.$client.files.putFileContents(relativePath, file, {
-              headers: extraHeaders,
-              onProgress: (progress) => {
-                this.$_ocUpload_onProgress(progress, file)
-              },
-              overwrite: overwrite
-            })
-          )
-        }
-      }
-
-      promise
-        .then((e) => {
-          this.$root.$emit('upload-end')
-          this.removeFileFromProgress(file)
-          if (emitSuccess) {
-            this.$emit('success', e, file)
-          }
-        })
-        .catch((e) => {
-          this.removeFileFromProgress(file)
-          this.$emit('error', e)
-        })
-    },
-    $_ocUpload_onProgress(e, file) {
-      const progress = parseInt((e.loaded * 100) / e.total)
-      this.$emit('progress', {
-        id: file.id,
-        fileName: file.name,
-        progress
-      })
-    },
-    $_ocUploadInput_clean() {
-      const input = this.$refs.input
-      if (input) {
-        input.value = ''
-      }
     }
   }
 }
diff --git a/packages/web-app-files/src/store/actions.js b/packages/web-app-files/src/store/actions.js
index 1e03c9a885a..ad0e393cfc1 100644
--- a/packages/web-app-files/src/store/actions.js
+++ b/packages/web-app-files/src/store/actions.js
@@ -22,17 +22,6 @@ const allowSharePermissions = (getters) => {
 }
 
 export default {
-  updateFileProgress({ commit }, progress) {
-    commit('UPDATE_FILE_PROGRESS', progress)
-  },
-  addFileToProgress({ commit }, file) {
-    commit('ADD_FILE_TO_PROGRESS', file)
-  },
-
-  removeFileFromProgress({ commit }, file) {
-    commit('REMOVE_FILE_FROM_PROGRESS', file)
-  },
-
   loadFiles(context, { currentFolder, files }) {
     if (currentFolder) {
       currentFolder = buildResource(currentFolder)
@@ -591,9 +580,6 @@ export default {
     }
     context.commit('SET_VERSIONS', response)
   },
-  dragOver(context, value) {
-    context.commit('DRAG_OVER', value)
-  },
   setPublicLinkPassword(context, password) {
     context.commit('SET_PUBLIC_LINK_PASSWORD', password)
   },
diff --git a/packages/web-app-files/src/store/getters.js b/packages/web-app-files/src/store/getters.js
index 5a978dfb3ea..bbe323ba063 100644
--- a/packages/web-app-files/src/store/getters.js
+++ b/packages/web-app-files/src/store/getters.js
@@ -36,9 +36,6 @@ export default {
       folders: folderCount
     }
   },
-  dropzone: (state) => {
-    return state.dropzone
-  },
   currentFileOutgoingCollaborators: (state) => {
     return state.currentFileOutgoingShares.filter((share) => {
       return ShareTypes.containsAnyValue(ShareTypes.authenticated, [share.shareType])
@@ -90,6 +87,5 @@ export default {
 
     return password
   },
-  uploaded: (state) => state.uploaded,
   actionsInProgress: (state) => state.actionsInProgress
 }
diff --git a/packages/web-app-files/src/store/mutations.js b/packages/web-app-files/src/store/mutations.js
index af49a67a8fc..03de84a2ebf 100644
--- a/packages/web-app-files/src/store/mutations.js
+++ b/packages/web-app-files/src/store/mutations.js
@@ -6,51 +6,6 @@ import { renameResource } from '../helpers/resources'
 import { ShareTypes } from '../helpers/share'
 
 export default {
-  UPDATE_FILE_PROGRESS(state, file) {
-    const inProgress = [...state.inProgress]
-
-    const fileIndex = inProgress.findIndex((f) => {
-      return f.id === file.id
-    })
-    if (fileIndex === -1) return
-
-    inProgress[fileIndex].progress = file.progress
-    state.inProgress = inProgress
-  },
-
-  ADD_FILE_TO_PROGRESS(state, file) {
-    const inProgress = [...state.inProgress]
-    inProgress.push({
-      id: file.id,
-      name: file.name,
-      type: file.type,
-      size: file.size,
-      progress: 0,
-      action: 'upload'
-    })
-    state.inProgress = inProgress
-  },
-
-  REMOVE_FILE_FROM_PROGRESS(state, file) {
-    const inProgress = [...state.inProgress]
-    const fileIndex = inProgress.findIndex((f) => {
-      return f.id === file.id
-    })
-
-    inProgress.splice(fileIndex, 1)
-    if (inProgress.length < 1) {
-      state.inProgress = []
-      state.uploaded = []
-      return
-    }
-    state.inProgress = inProgress
-
-    const uploaded = [...state.uploaded]
-    file.progress = 100
-    uploaded.push(file)
-    state.uploaded = uploaded
-  },
-
   LOAD_FILES(state, { currentFolder, files }) {
     state.currentFolder = currentFolder
     state.files = files
@@ -111,9 +66,6 @@ export default {
 
     state.files = resources
   },
-  DRAG_OVER(state, value) {
-    state.dropzone = value
-  },
   CURRENT_FILE_OUTGOING_SHARES_SET(state, shares) {
     state.currentFileOutgoingShares = shares
   },
diff --git a/packages/web-app-files/src/store/state.js b/packages/web-app-files/src/store/state.js
index 69fc5bb5393..3e06966a034 100644
--- a/packages/web-app-files/src/store/state.js
+++ b/packages/web-app-files/src/store/state.js
@@ -4,7 +4,6 @@ export default {
   filesSearched: null,
   selectedIds: [],
   inProgress: [],
-  dropzone: false,
   shareOpen: null,
   versions: [],
 
@@ -31,7 +30,6 @@ export default {
 
   loadingFolder: false,
   publicLinkPassword: null,
-  uploaded: [],
   actionsInProgress: [],
 
   /**
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index ccd7980b11f..b47abc8fbf4 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -11,54 +11,14 @@
       <div v-else key="loaded-drop" class="oc-flex oc-flex-column oc-flex-middle oc-height-1-1">
         <div class="oc-text-center oc-width-1-1 oc-width-xxlarge@m">
           <h2 v-text="title" />
-          <vue-dropzone
-            id="oc-dropzone"
-            :options="dropzoneOptions"
-            :use-custom-slot="true"
-            :include-styling="false"
-            @vdropzone-file-added="dropZoneFileAdded"
-          >
-            <div class="oc-flex oc-flex-middle oc-flex-center oc-files-drop-drag-area">
-              <oc-icon name="file-upload" />
-              <translate>Drop files here to upload or click to select file</translate>
-            </div>
-          </vue-dropzone>
+          <file-upload
+            id="files-drop-zone"
+            ref="fileUpload"
+            class="uk-flex uk-flex-middle uk-flex-center uk-placeholder"
+            :btn-label="$gettext('Drop files here to upload or click to select file')"
+          />
           <div id="previews" hidden />
         </div>
-        <div
-          class="oc-flex oc-flex-center oc-overflow-auto oc-width-1-1 oc-mt"
-          :class="{ 'files-empty': !getUploadedFiles }"
-        >
-          <oc-table-simple v-if="getUploadedFiles" class="oc-width-1-1 oc-width-xxlarge@m">
-            <oc-tbody>
-              <oc-tr v-for="(file, key) in getUploadedFiles" :key="key">
-                <oc-td class="oc-pl-rm" v-text="file.name" />
-                <oc-td width="shrink" class="oc-text-nowrap oc-text-muted">
-                  <oc-resource-size :size="file.size" />
-                </oc-td>
-                <oc-td width="shrink" class="oc-pr-rm">
-                  <oc-icon
-                    v-if="file.status === 'done'"
-                    name="checkbox-circle"
-                    size="small"
-                    variation="success"
-                  />
-                  <oc-icon
-                    v-if="file.status === 'error'"
-                    name="information"
-                    size="small"
-                    variation="danger"
-                  />
-                  <oc-spinner
-                    v-if="file.status === 'uploading' || file.status === 'init'"
-                    size="small"
-                    :aria-label="$_ocUploadingFileMessage(file.name)"
-                  />
-                </oc-td>
-              </oc-tr>
-            </oc-tbody>
-          </oc-table-simple>
-        </div>
         <div v-if="errorMessage" class="oc-text-center">
           <h2>
             <translate>An error occurred while loading the public link</translate>
@@ -74,24 +34,52 @@
 </template>
 
 <script>
-import vue2DropZone from 'vue2-dropzone'
-import { mapGetters } from 'vuex'
-import Mixins from '../mixins.js'
+import { mapActions, mapGetters } from 'vuex'
 import { DavProperties, DavProperty } from 'web-pkg/src/constants'
 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 { useUpload } from 'web-runtime/src/composables/upload'
+
 export default {
   components: {
-    vueDropzone: vue2DropZone
+    FileUpload
+  },
+  setup() {
+    const instance = getCurrentInstance().proxy
+    const uppyService = instance.$uppyService
+
+    onMounted(() => {
+      uppyService.$on('filesSelected', instance.onFilesSelected)
+      uppyService.$on('uploadError', instance.onFileError)
+
+      uppyService.useDropTarget({
+        targetSelector: '#files-drop-container',
+        uppyService
+      })
+    })
+
+    onUnmounted(() => {
+      uppyService.$off('filesSelected', instance.onFilesSelected)
+      uppyService.$off('uploadError', instance.onFileError)
+    })
+
+    return {
+      ...useUpload({
+        uppyService
+      })
+    }
   },
-  mixins: [Mixins],
   data() {
     return {
       loading: true,
-      errorMessage: null,
-      uploadedFiles: new Map(),
-      uploadedFilesChangeTracker: 0
+      errorMessage: null
     }
   },
   computed: {
@@ -117,24 +105,14 @@ export default {
     },
     url() {
       return this.$client.publicFiles.getFileUrl(this.publicLinkToken) + '/'
-    },
-    getUploadedFiles() {
-      return this.uploadedFilesChangeTracker && this.uploadedFiles.values()
-    },
-    dropzoneOptions() {
-      return {
-        url: this.url,
-        clickable: true,
-        createImageThumbnails: false,
-        autoQueue: false,
-        previewsContainer: '#previews'
-      }
     }
   },
   mounted() {
     this.resolvePublicLink()
   },
   methods: {
+    ...mapActions(['showMessage']),
+
     resolvePublicLink() {
       this.loading = true
 
@@ -171,46 +149,28 @@ export default {
           this.loading = false
         })
     },
-    dropZoneFileAdded(event) {
-      const uploadId = event.upload.uuid
-      this.uploadedFilesChangeTracker++
-      this.uploadedFiles.set(uploadId, { name: event.name, size: event.size, status: 'init' })
 
-      this.uploadQueue
-        .add(() =>
-          this.$client.publicFiles.putFileContents(
-            this.publicLinkToken,
-            event.name,
-            this.publicLinkPassword,
-            event,
-            {
-              // automatically rename in case of duplicates
-              headers: { 'OC-Autorename': 1 },
-              onProgress: (progressEvent) => {
-                this.uploadedFilesChangeTracker++
-                this.uploadedFiles.set(uploadId, {
-                  name: event.name,
-                  size: event.size,
-                  status: 'uploading'
-                })
-              }
-            }
-          )
-        )
-        .then((e) => {
-          this.uploadedFilesChangeTracker++
-          this.uploadedFiles.set(uploadId, { name: event.name, size: event.size, status: 'done' })
-        })
-        .catch((e) => {
-          console.error('Error uploading file ', event.name, ': ', e)
-          this.uploadedFilesChangeTracker++
-          this.uploadedFiles.set(uploadId, { name: event.name, size: event.size, status: 'error' })
-        })
+    onFilesSelected(files) {
+      const uppyResources = files.map((file) => ({
+        source: 'FileDrop',
+        name: file.name,
+        type: file.type,
+        data: file,
+        meta: {
+          tusEndpoint: this.url,
+          relativePath: file.webkitRelativePath || file.relativePath || ''
+        }
+      }))
+
+      this.$uppyService.uploadFiles(uppyResources)
     },
 
-    $_ocUploadingFileMessage(fileName) {
-      const translated = this.$gettext('Uploading file "%{fileName}"')
-      return this.$gettextInterpolate(translated, { fileName }, true)
+    onFileError(error) {
+      console.error(error)
+      this.showMessage({
+        title: this.$gettext('Failed to upload'),
+        status: 'danger'
+      })
     }
   }
 }
@@ -218,10 +178,8 @@ export default {
 
 <style lang="scss">
 #files-drop-container {
-  .oc-files-drop-drag-area {
-    background: transparent;
-    border: 1px dashed var(--oc-color-input-border);
-    padding: var(--oc-space-xlarge);
-  }
+  background: transparent;
+  border: 1px dashed var(--oc-color-input-border);
+  margin: var(--oc-space-xlarge);
 }
 </style>
diff --git a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.js b/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.js
index e694e393ddf..262b95af006 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.js
+++ b/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.js
@@ -242,8 +242,7 @@ function createStore(state = { currentFolder: {} }, fileHandlers = []) {
           ...state
         },
         getters: {
-          currentFolder: () => state.currentFolder,
-          dropzone: () => {}
+          currentFolder: () => state.currentFolder
         }
       }
     }
diff --git a/packages/web-app-files/tests/unit/components/AppBar/Upload/FileDrop.spec.js b/packages/web-app-files/tests/unit/components/AppBar/Upload/FileDrop.spec.js
deleted file mode 100644
index f8adca056cd..00000000000
--- a/packages/web-app-files/tests/unit/components/AppBar/Upload/FileDrop.spec.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils'
-import Vuex from 'vuex'
-import vue2DropZone from 'vue2-dropzone'
-import FileDrop from '../../../../../src/components/AppBar/Upload/FileDrop.vue'
-
-const localVue = createLocalVue()
-localVue.use(Vuex)
-localVue.use(vue2DropZone)
-
-describe('FileDrop component', () => {
-  afterEach(() => {
-    jest.clearAllMocks()
-  })
-
-  describe('when dropzone is disabled', () => {
-    it('should not render component', () => {
-      const store = createStore({
-        dropzone: jest.fn(() => false)
-      })
-      const wrapper = createWrapper({ store })
-      const dropZone = wrapper.findComponent(vue2DropZone)
-
-      expect(dropZone.exists()).toBeFalsy()
-    })
-  })
-
-  describe('when dropzone is enabled', () => {
-    const spyOcUploadAddDropToQueue = jest
-      .spyOn(FileDrop.mixins[0].methods, '$_ocUpload_addDropToQueue')
-      .mockImplementation()
-    const spyOcDropzoneDragEnd = jest
-      .spyOn(FileDrop.methods, '$_ocDropzone_dragEnd')
-      .mockImplementation()
-    const spyOcDropzoneRemoveFiles = jest
-      .spyOn(FileDrop.methods, '$_ocDropzone_removeFiles')
-      .mockImplementation()
-
-    const store = createStore({
-      dropzone: jest.fn(() => true)
-    })
-    const wrapper = createWrapper({ store })
-    const dropZone = wrapper.findComponent(vue2DropZone)
-
-    it('should render component', () => {
-      wrapper.setData({
-        ocDropzone_options: {
-          url: '#',
-          clickable: false,
-          autoQueue: false
-        }
-      })
-      expect(dropZone.exists()).toBeTruthy()
-      expect(dropZone.props().options.url).toEqual('#')
-      expect(dropZone.props().options.clickable).toEqual(false)
-      expect(dropZone.props().options.autoQueue).toEqual(false)
-      expect(dropZone.text()).toEqual('Drag and drop to upload content into current folder')
-    })
-    it('should call "$_ocUpload_addDropToQueue" if file-drop event is triggered', () => {
-      dropZone.vm.$emit('vdropzone-drop')
-
-      expect(spyOcUploadAddDropToQueue).toHaveBeenCalledTimes(1)
-    })
-    it('should call "$_ocDropzone_dragEnd" if files-added event is triggered', () => {
-      dropZone.vm.$emit('vdropzone-files-added')
-
-      expect(spyOcDropzoneDragEnd).toHaveBeenCalledTimes(1)
-    })
-    it('should call "$_ocDropzone_dragEnd" if drag-leave event is triggered', () => {
-      dropZone.vm.$emit('vdropzone-drag-leave')
-
-      expect(spyOcDropzoneDragEnd).toHaveBeenCalledTimes(1)
-    })
-    it('should call "$_ocDropzone_removeFiles" if file remove event is triggered', () => {
-      dropZone.vm.$emit('vdropzone-file-added')
-
-      expect(spyOcDropzoneRemoveFiles).toHaveBeenCalledTimes(1)
-    })
-  })
-})
-
-function createWrapper(options = {}) {
-  return shallowMount(FileDrop, {
-    localVue,
-    stubs: { translate: true, 'oc-dropzone': true },
-    propsData: {
-      rootPath: '/',
-      path: '/'
-    },
-    computed: {
-      hasSidebarNavItems: jest.fn(() => true)
-    },
-    ...options
-  })
-}
-
-function createStore(getters) {
-  return new Vuex.Store({
-    state: {
-      navigation: {
-        closed: false
-      }
-    },
-    modules: {
-      Files: {
-        namespaced: true,
-        getters
-      }
-    }
-  })
-}
diff --git a/packages/web-app-files/tests/unit/components/AppBar/Upload/FileUpload.spec.js b/packages/web-app-files/tests/unit/components/AppBar/Upload/FileUpload.spec.js
index 756a99c3cfd..5000efd3932 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/Upload/FileUpload.spec.js
+++ b/packages/web-app-files/tests/unit/components/AppBar/Upload/FileUpload.spec.js
@@ -1,4 +1,4 @@
-import { mount, shallowMount, createLocalVue } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import FileUpload from '../../../../../src/components/AppBar/Upload/FileUpload.vue'
 import DesignSystem from 'owncloud-design-system'
 
@@ -32,28 +32,6 @@ describe('File Upload Component', () => {
       expect(spyTriggerUpload).toHaveBeenCalledTimes(1)
       expect(fileUploadInput.element.click).toHaveBeenCalledTimes(1)
     })
-
-    describe('when file is selected for upload', () => {
-      const event = new Event('change')
-
-      it('should call "$_ocUpload_addFileToQueue"', async () => {
-        const wrapper = shallowMount(FileUpload, {
-          ...getOptions(),
-          stubs: {
-            'oc-button': true,
-            'oc-icon': true
-          }
-        })
-        wrapper.vm.$_ocUpload_addFileToQueue = jest.fn()
-        await wrapper.vm.$forceUpdate()
-
-        const fileUploadInput = wrapper.find('#fileUploadInput')
-        await fileUploadInput.trigger('change')
-
-        expect(wrapper.vm.$_ocUpload_addFileToQueue).toHaveBeenCalledTimes(1)
-        expect(wrapper.vm.$_ocUpload_addFileToQueue).toHaveBeenCalledWith(event)
-      })
-    })
   })
 })
 
@@ -65,6 +43,12 @@ function getOptions() {
       path: ''
     },
     localVue,
-    directives: { Translate }
+    directives: { Translate },
+    mocks: {
+      $uppyService: {
+        registerUploadInput: jest.fn(),
+        removeUploadInput: jest.fn()
+      }
+    }
   }
 }
diff --git a/packages/web-app-files/tests/unit/components/AppBar/Upload/FolderUpload.spec.js b/packages/web-app-files/tests/unit/components/AppBar/Upload/FolderUpload.spec.js
index 37da0e08832..940d0f15427 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/Upload/FolderUpload.spec.js
+++ b/packages/web-app-files/tests/unit/components/AppBar/Upload/FolderUpload.spec.js
@@ -1,4 +1,4 @@
-import { mount, shallowMount, createLocalVue } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import FolderUpload from '@files/src/components/AppBar/Upload/FolderUpload.vue'
 import DesignSystem from 'owncloud-design-system'
 
@@ -17,7 +17,13 @@ describe('FolderUpload Component', () => {
       path: '/'
     },
     localVue,
-    directives: { translate: jest.fn() }
+    directives: { translate: jest.fn() },
+    mocks: {
+      $uppyService: {
+        registerUploadInput: jest.fn(),
+        removeUploadInput: jest.fn()
+      }
+    }
   }
 
   describe('when upload folder button is clicked', () => {
@@ -34,26 +40,5 @@ describe('FolderUpload Component', () => {
       expect(spyTriggerUpload).toHaveBeenCalledTimes(1)
       expect(spyClickUploadInput).toHaveBeenCalledTimes(1)
     })
-
-    describe('when folder is selected for upload', () => {
-      it('should call "$_ocUpload_addDirectoryToQueue"', async () => {
-        const spyOcUploadAddDirectoryToQueue = jest
-          .spyOn(FolderUpload.mixins[0].methods, '$_ocUpload_addDirectoryToQueue')
-          .mockImplementation()
-        const wrapper = shallowMount(FolderUpload, {
-          ...mountOptions,
-          stubs: {
-            'oc-icon': true,
-            'oc-resource-icon': true,
-            'oc-button': true
-          }
-        })
-
-        const folderUploadInput = wrapper.find(selector.uploadInput)
-        await folderUploadInput.trigger('change')
-
-        expect(spyOcUploadAddDirectoryToQueue).toHaveBeenCalledTimes(1)
-      })
-    })
   })
 })
diff --git a/packages/web-app-files/tests/unit/components/Upload/ProgressBar.spec.js b/packages/web-app-files/tests/unit/components/Upload/ProgressBar.spec.js
index fe4cf219062..54812ad1328 100644
--- a/packages/web-app-files/tests/unit/components/Upload/ProgressBar.spec.js
+++ b/packages/web-app-files/tests/unit/components/Upload/ProgressBar.spec.js
@@ -159,8 +159,7 @@ function createStore(inProgress = []) {
       Files: {
         namespaced: true,
         getters: {
-          inProgress: jest.fn(() => inProgress),
-          uploaded: jest.fn(() => [])
+          inProgress: jest.fn(() => inProgress)
         }
       }
     }
diff --git a/packages/web-app-files/tests/unit/mixins.spec.js b/packages/web-app-files/tests/unit/mixins.spec.js
deleted file mode 100644
index db29ff7d9e7..00000000000
--- a/packages/web-app-files/tests/unit/mixins.spec.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import Vuex from 'vuex'
-import mixins from '../../src/mixins'
-import { createLocalVue, mount } from '@vue/test-utils'
-
-const localVue = createLocalVue()
-localVue.use(Vuex)
-
-describe('mixins', () => {
-  describe('checkIfElementExists', () => {
-    const Component = {
-      render() {}
-    }
-    const wrapper = mount(Component, {
-      localVue,
-      mixins: [mixins],
-      store: new Vuex.Store({
-        modules: {
-          Files: {
-            namespaced: true,
-            getters: {
-              files: () => [{ name: 'file1', size: 1220 }, { name: 'file2' }]
-            }
-          }
-        }
-      })
-    })
-    it('should return the first found element if it exists in store files list', () => {
-      expect(wrapper.vm.checkIfElementExists({ name: 'file1' })).toMatchObject({ name: 'file1' })
-    })
-    it('should return the first found element with provided name if it exists in store files list', () => {
-      expect(wrapper.vm.checkIfElementExists('file1')).toMatchObject({ name: 'file1' })
-    })
-    it("should return undefined if the element doesn't exist in store files list", () => {
-      expect(wrapper.vm.checkIfElementExists({ name: 'file3' })).toBe(undefined)
-    })
-  })
-})
diff --git a/packages/web-app-files/tests/unit/views/FilesDrop.spec.js b/packages/web-app-files/tests/unit/views/FilesDrop.spec.js
index 74ce36958ea..78e674fd381 100644
--- a/packages/web-app-files/tests/unit/views/FilesDrop.spec.js
+++ b/packages/web-app-files/tests/unit/views/FilesDrop.spec.js
@@ -1,12 +1,12 @@
 import FilesDrop from '@files/src/views/FilesDrop.vue'
 import { shallowMount } from '@vue/test-utils'
 import GetTextPlugin from 'vue-gettext'
-import vue2DropZone from 'vue2-dropzone'
 import { getStore, localVue } from './views.setup.js'
 import { DavProperty } from 'web-pkg/src/constants'
 import { linkRoleUploaderFolder } from '@files/src/helpers/share'
+import VueCompositionAPI from '@vue/composition-api/dist/vue-composition-api'
 
-localVue.use(vue2DropZone)
+localVue.use(VueCompositionAPI)
 localVue.use(GetTextPlugin, {
   translations: 'does-not-matter.json',
   silent: true
@@ -45,8 +45,6 @@ const selectors = {
 }
 
 const ocSpinnerStubSelector = 'oc-spinner-stub'
-const ocTableSimpleStubSelector = 'oc-table-simple-stub'
-const ocTableRowStubSelector = 'oc-tr-stub'
 
 describe('FilesDrop', () => {
   it('should call "resolvePublicLink" method on wrapper mount', () => {
@@ -71,8 +69,6 @@ describe('FilesDrop', () => {
   })
 
   describe('when "loading" is set to false', () => {
-    const spyDropZoneFileAdded = jest.spyOn(FilesDrop.methods, 'dropZoneFileAdded')
-
     const wrapper = getShallowWrapper()
 
     it('should not show spinner and loading header', () => {
@@ -85,25 +81,8 @@ describe('FilesDrop', () => {
     })
 
     it('should show vue drop zone with given options', () => {
-      const dropZone = wrapper.findComponent(vue2DropZone)
-
+      const dropZone = wrapper.find('#files-drop-zone')
       expect(dropZone.exists()).toBeTruthy()
-      expect(dropZone.props()).toMatchObject({
-        id: 'oc-dropzone',
-        options: {
-          // from the mocked function
-          url: 'http://some-url/abc123def456/',
-          clickable: true,
-          createImageThumbnails: false,
-          autoQueue: false,
-          previewsContainer: '#previews'
-        },
-        includeStyling: false,
-        awss3: null,
-        destroyDropzone: true,
-        duplicateCheck: false,
-        useCustomSlot: true
-      })
     })
 
     it('should show error message if only it has truthy value', () => {
@@ -114,92 +93,6 @@ describe('FilesDrop', () => {
 
       expect(wrapper).toMatchSnapshot()
     })
-
-    it('should not show files table if uploaded files list is empty', () => {
-      expect(wrapper.find(selectors.filesEmpty).exists()).toBeTruthy()
-      expect(wrapper.find(selectors.filesEmpty)).toMatchSnapshot()
-      expect(wrapper.find(ocTableSimpleStubSelector).exists()).toBeFalsy()
-    })
-
-    it('should show files list of uploaded files', async () => {
-      const uploadedFiles = new Map()
-      const files = [
-        { name: 'file1', size: 300, status: 'error' },
-        { name: 'file2', size: 600, status: 'done' },
-        { name: 'file3', size: 900, status: 'init' },
-        { name: 'file4', size: 1200, status: 'uploading' }
-      ]
-      uploadedFiles.set(1, files[0])
-      uploadedFiles.set(2, files[1])
-      uploadedFiles.set(3, files[2])
-      uploadedFiles.set(4, files[3])
-
-      const wrapper = shallowMount(FilesDrop, {
-        localVue,
-        store: createStore(),
-        mocks: {
-          $route
-        },
-        data() {
-          return {
-            uploadedFiles: uploadedFiles,
-            uploadedFilesChangeTracker: 1
-          }
-        }
-      })
-
-      // table is visible only after two next-ticks
-      await wrapper.vm.$nextTick()
-      await wrapper.vm.$nextTick()
-
-      const tableElement = wrapper.find(ocTableSimpleStubSelector)
-      const rows = tableElement.findAll(ocTableRowStubSelector)
-
-      expect(rows.length).toBe(4)
-
-      expect(wrapper).toMatchSnapshot()
-    })
-
-    it('should call "dropZoneFileAdded" method if "vdropzone-file-added" event is emitted', async () => {
-      const event = {
-        upload: {
-          uuid: 'abc123'
-        },
-        name: 'file1.txt',
-        size: '300'
-      }
-      const expectedMap = new Map()
-      const expectedDoneMap = expectedMap.set(event.upload.uuid, {
-        name: event.name,
-        size: event.size,
-        status: 'done'
-      })
-
-      const dropZone = wrapper.findComponent(vue2DropZone)
-
-      expect(spyDropZoneFileAdded).not.toHaveBeenCalled()
-
-      // drag and drop cannot be performed in unit tests
-      // only checking how wrapper responds when dropzone emits the event specified below
-      await dropZone.vm.$emit('vdropzone-file-added', event)
-
-      expect(spyDropZoneFileAdded).toHaveBeenCalledTimes(1)
-      expect(wrapper.vm.uploadedFilesChangeTracker).toBe(1)
-
-      await wrapper.vm.$nextTick()
-
-      expect(wrapper.vm.uploadedFilesChangeTracker).toBe(2)
-      expect(wrapper.vm.uploadedFiles).toMatchObject(expectedDoneMap)
-
-      await wrapper.vm.$nextTick()
-
-      const tableElement = wrapper.find(ocTableSimpleStubSelector)
-      const rows = tableElement.findAll(ocTableRowStubSelector)
-
-      expect(rows.length).toBe(1)
-
-      expect(wrapper).toMatchSnapshot()
-    })
   })
 })
 
@@ -212,7 +105,22 @@ function getShallowWrapper({ store = createStore(), loading = false, errorMessag
     localVue,
     store,
     mocks: {
-      $route
+      $route,
+      $router: {
+        currentRoute: { name: 'some-route' },
+        resolve: (r) => {
+          return { href: r.name }
+        },
+        afterEach: jest.fn()
+      },
+      $uppyService: {
+        $on: jest.fn(),
+        useDropTarget: jest.fn(),
+        useXhr: jest.fn()
+      }
+    },
+    setup: () => {
+      return {}
     },
     data() {
       return {
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 eb26a8d83ae..69b0ef58120 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
@@ -7,17 +7,9 @@ exports[`FilesDrop should show page title and configuration theme general slogan
     <div class="oc-flex oc-flex-column oc-flex-middle oc-height-1-1">
       <div class="oc-text-center oc-width-1-1 oc-width-xxlarge@m">
         <h2>admin shared this folder with you for uploading</h2>
-        <vue-dropzone-stub id="oc-dropzone" options="[object Object]" destroydropzone="true" usecustomslot="true">
-          <div class="oc-flex oc-flex-middle oc-flex-center oc-files-drop-drag-area">
-            <oc-icon-stub name="file-upload" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-            <translate-stub tag="span">Drop files here to upload or click to select file</translate-stub>
-          </div>
-        </vue-dropzone-stub>
+        <file-upload-stub btnlabel="Drop files here to upload or click to select file" btnclass="" id="files-drop-zone" class="uk-flex uk-flex-middle uk-flex-center uk-placeholder"></file-upload-stub>
         <div id="previews" hidden="hidden"></div>
       </div>
-      <div class="oc-flex oc-flex-center oc-overflow-auto oc-width-1-1 oc-mt files-empty">
-        <!---->
-      </div>
       <!---->
     </div>
   </div>
@@ -44,53 +36,6 @@ exports[`FilesDrop should show spinner with loading text if wrapper is loading 1
 </div>
 `;
 
-exports[`FilesDrop when "loading" is set to false should call "dropZoneFileAdded" method if "vdropzone-file-added" event is emitted 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">
-      <div class="oc-text-center oc-width-1-1 oc-width-xxlarge@m">
-        <h2>admin shared this folder with you for uploading</h2>
-        <vue-dropzone-stub id="oc-dropzone" options="[object Object]" destroydropzone="true" usecustomslot="true">
-          <div class="oc-flex oc-flex-middle oc-flex-center oc-files-drop-drag-area">
-            <oc-icon-stub name="file-upload" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-            <translate-stub tag="span">Drop files here to upload or click to select file</translate-stub>
-          </div>
-        </vue-dropzone-stub>
-        <div id="previews" hidden="hidden"></div>
-      </div>
-      <div class="oc-flex oc-flex-center oc-overflow-auto oc-width-1-1 oc-mt">
-        <oc-table-simple-stub class="oc-width-1-1 oc-width-xxlarge@m">
-          <oc-tbody-stub>
-            <oc-tr-stub>
-              <oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-pl-rm">file1.txt</oc-td-stub>
-              <oc-td-stub alignh="left" alignv="middle" width="shrink" class="oc-text-nowrap oc-text-muted">
-                <oc-resource-size-stub size="300"></oc-resource-size-stub>
-              </oc-td-stub>
-              <oc-td-stub alignh="left" alignv="middle" width="shrink" class="oc-pr-rm">
-                <oc-icon-stub name="checkbox-circle" filltype="fill" accessiblelabel="" type="span" size="small" variation="success" color=""></oc-icon-stub>
-                <!---->
-                <!---->
-              </oc-td-stub>
-            </oc-tr-stub>
-          </oc-tbody-stub>
-        </oc-table-simple-stub>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div class="oc-text-center">
-    <p>some slogan</p>
-  </div>
-</div>
-`;
-
-exports[`FilesDrop when "loading" is set to false should not show files table if uploaded files list is empty 1`] = `
-<div class="oc-flex oc-flex-center oc-overflow-auto oc-width-1-1 oc-mt files-empty">
-  <!---->
-</div>
-`;
-
 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>
@@ -98,17 +43,9 @@ exports[`FilesDrop when "loading" is set to false should show error message if o
     <div class="oc-flex oc-flex-column oc-flex-middle oc-height-1-1">
       <div class="oc-text-center oc-width-1-1 oc-width-xxlarge@m">
         <h2>admin shared this folder with you for uploading</h2>
-        <vue-dropzone-stub id="oc-dropzone" options="[object Object]" destroydropzone="true" usecustomslot="true">
-          <div class="oc-flex oc-flex-middle oc-flex-center oc-files-drop-drag-area">
-            <oc-icon-stub name="file-upload" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-            <translate-stub tag="span">Drop files here to upload or click to select file</translate-stub>
-          </div>
-        </vue-dropzone-stub>
+        <file-upload-stub btnlabel="Drop files here to upload or click to select file" btnclass="" id="files-drop-zone" class="uk-flex uk-flex-middle uk-flex-center uk-placeholder"></file-upload-stub>
         <div id="previews" hidden="hidden"></div>
       </div>
-      <div class="oc-flex oc-flex-center oc-overflow-auto oc-width-1-1 oc-mt files-empty">
-        <!---->
-      </div>
       <div class="oc-text-center">
         <h2>
           <translate-stub tag="span">An error occurred while loading the public link</translate-stub>
@@ -123,80 +60,6 @@ exports[`FilesDrop when "loading" is set to false should show error message if o
 </div>
 `;
 
-exports[`FilesDrop when "loading" is set to false should show files list of uploaded files 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">
-      <div class="oc-text-center oc-width-1-1 oc-width-xxlarge@m">
-        <h2>admin shared this folder with you for uploading</h2>
-        <vue-dropzone-stub id="oc-dropzone" options="[object Object]" destroydropzone="true" usecustomslot="true">
-          <div class="oc-flex oc-flex-middle oc-flex-center oc-files-drop-drag-area">
-            <oc-icon-stub name="file-upload" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-            <translate-stub tag="span">Drop files here to upload or click to select file</translate-stub>
-          </div>
-        </vue-dropzone-stub>
-        <div id="previews" hidden="hidden"></div>
-      </div>
-      <div class="oc-flex oc-flex-center oc-overflow-auto oc-width-1-1 oc-mt">
-        <oc-table-simple-stub class="oc-width-1-1 oc-width-xxlarge@m">
-          <oc-tbody-stub>
-            <oc-tr-stub>
-              <oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-pl-rm">file1</oc-td-stub>
-              <oc-td-stub alignh="left" alignv="middle" width="shrink" class="oc-text-nowrap oc-text-muted">
-                <oc-resource-size-stub size="300"></oc-resource-size-stub>
-              </oc-td-stub>
-              <oc-td-stub alignh="left" alignv="middle" width="shrink" class="oc-pr-rm">
-                <!---->
-                <oc-icon-stub name="information" filltype="fill" accessiblelabel="" type="span" size="small" variation="danger" color=""></oc-icon-stub>
-                <!---->
-              </oc-td-stub>
-            </oc-tr-stub>
-            <oc-tr-stub>
-              <oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-pl-rm">file2</oc-td-stub>
-              <oc-td-stub alignh="left" alignv="middle" width="shrink" class="oc-text-nowrap oc-text-muted">
-                <oc-resource-size-stub size="600"></oc-resource-size-stub>
-              </oc-td-stub>
-              <oc-td-stub alignh="left" alignv="middle" width="shrink" class="oc-pr-rm">
-                <oc-icon-stub name="checkbox-circle" filltype="fill" accessiblelabel="" type="span" size="small" variation="success" color=""></oc-icon-stub>
-                <!---->
-                <!---->
-              </oc-td-stub>
-            </oc-tr-stub>
-            <oc-tr-stub>
-              <oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-pl-rm">file3</oc-td-stub>
-              <oc-td-stub alignh="left" alignv="middle" width="shrink" class="oc-text-nowrap oc-text-muted">
-                <oc-resource-size-stub size="900"></oc-resource-size-stub>
-              </oc-td-stub>
-              <oc-td-stub alignh="left" alignv="middle" width="shrink" class="oc-pr-rm">
-                <!---->
-                <!---->
-                <oc-spinner-stub arialabel="Uploading file &quot;file3&quot;" size="small"></oc-spinner-stub>
-              </oc-td-stub>
-            </oc-tr-stub>
-            <oc-tr-stub>
-              <oc-td-stub alignh="left" alignv="middle" width="auto" class="oc-pl-rm">file4</oc-td-stub>
-              <oc-td-stub alignh="left" alignv="middle" width="shrink" class="oc-text-nowrap oc-text-muted">
-                <oc-resource-size-stub size="1200"></oc-resource-size-stub>
-              </oc-td-stub>
-              <oc-td-stub alignh="left" alignv="middle" width="shrink" class="oc-pr-rm">
-                <!---->
-                <!---->
-                <oc-spinner-stub arialabel="Uploading file &quot;file4&quot;" size="small"></oc-spinner-stub>
-              </oc-td-stub>
-            </oc-tr-stub>
-          </oc-tbody-stub>
-        </oc-table-simple-stub>
-      </div>
-      <!---->
-    </div>
-  </div>
-  <div class="oc-text-center">
-    <p>some slogan</p>
-  </div>
-</div>
-`;
-
 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>
@@ -204,17 +67,9 @@ exports[`FilesDrop when "loading" is set to false should show share information
     <div class="oc-flex oc-flex-column oc-flex-middle oc-height-1-1">
       <div class="oc-text-center oc-width-1-1 oc-width-xxlarge@m">
         <h2>admin shared this folder with you for uploading</h2>
-        <vue-dropzone-stub id="oc-dropzone" options="[object Object]" destroydropzone="true" usecustomslot="true">
-          <div class="oc-flex oc-flex-middle oc-flex-center oc-files-drop-drag-area">
-            <oc-icon-stub name="file-upload" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-            <translate-stub tag="span">Drop files here to upload or click to select file</translate-stub>
-          </div>
-        </vue-dropzone-stub>
+        <file-upload-stub btnlabel="Drop files here to upload or click to select file" btnclass="" id="files-drop-zone" class="uk-flex uk-flex-middle uk-flex-center uk-placeholder"></file-upload-stub>
         <div id="previews" hidden="hidden"></div>
       </div>
-      <div class="oc-flex oc-flex-center oc-overflow-auto oc-width-1-1 oc-mt files-empty">
-        <!---->
-      </div>
       <!---->
     </div>
   </div>
diff --git a/packages/web-app-files/tests/unit/views/views.setup.js b/packages/web-app-files/tests/unit/views/views.setup.js
index 8b9f4589d8b..70095223c0a 100644
--- a/packages/web-app-files/tests/unit/views/views.setup.js
+++ b/packages/web-app-files/tests/unit/views/views.setup.js
@@ -166,7 +166,6 @@ export const getStore = function ({
           selectedFiles: () => selectedFiles,
           activeFiles: (state) => state.activeFiles,
           inProgress: () => inProgress,
-          uploaded: () => [],
           highlightedFile: () => highlightedFile,
           currentFolder: () => currentFolder,
           pages: () => pages,
diff --git a/packages/web-pkg/src/composables/capability/useCapability.ts b/packages/web-pkg/src/composables/capability/useCapability.ts
index fcb3380c0d2..56cd451b8dd 100644
--- a/packages/web-pkg/src/composables/capability/useCapability.ts
+++ b/packages/web-pkg/src/composables/capability/useCapability.ts
@@ -30,3 +30,11 @@ export const useCapabilityFilesSharingResharing = createCapabilityComposable(
 )
 
 export const useCapabilitySpacesEnabled = createCapabilityComposable('spaces.enabled', false)
+export const useCapabilityFilesTusSupportHttpMethodOverride = createCapabilityComposable<boolean>(
+  'files.tus_support.http_method_override',
+  false
+)
+export const useCapabilityFilesTusSupportMaxChunkSize = createCapabilityComposable<number>(
+  'files.tus_support.max_chunk_size',
+  0
+)
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index 8f596afb104..c6fc268ea13 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -6,6 +6,11 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@popperjs/core": "^2.4.0",
+    "@uppy/core": "^2.1.7",
+    "@uppy/drop-target": "^1.1.1",
+    "@uppy/status-bar": "^2.1.3",
+    "@uppy/tus": "^2.2.2",
+    "@uppy/xhr-upload": "^2.0.7",
     "@vue/composition-api": "^1.4.9",
     "axios": "^0.26.1",
     "cross-fetch": "^3.0.6",
@@ -30,14 +35,12 @@
     "sanitize-html": "^2.7.0",
     "semver": "^7.3.5",
     "tippy.js": "^6.3.7",
-    "tus-js-client": "^2.3.1",
     "utf8": "^3.0.0",
     "uuid": "^8.3.2",
     "v-calendar": "^2.3.2",
     "vue": "^2.6.10",
     "vue-async-computed": "^3.9.0",
     "vue-concurrency": "^2.2.1",
-    "vue-drag-drop": "^1.1.4",
     "vue-events": "^3.1.0",
     "vue-gettext": "^2.1.5",
     "vue-inline-svg": "^2.0.0",
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
new file mode 100644
index 00000000000..8c2894fcb09
--- /dev/null
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -0,0 +1,223 @@
+<template>
+  <div id="upload-info" class="oc-rounded oc-box-shadow-medium" :class="{ 'oc-hidden': !showInfo }">
+    <div class="upload-info-title oc-flex oc-flex-between oc-flex-middle oc-p-m">
+      <span class="oc-flex oc-flex-middle">
+        <oc-icon
+          v-if="!filesUploading && !uploadCancelled"
+          variation="success"
+          name="check"
+          class="oc-mr-s"
+        />
+        <oc-icon v-else-if="uploadCancelled" variation="danger" name="close" class="oc-mr-s" />
+        <span v-text="uploadInfoTitle" />
+      </span>
+
+      <oc-button
+        id="close-upload-info-btn"
+        v-oc-tooltip="$gettext('Close')"
+        appearance="raw"
+        @click="closeInfo"
+      >
+        <oc-icon name="close" />
+      </oc-button>
+    </div>
+    <div
+      class="upload-info-status-bar oc-px-m"
+      :class="{ 'oc-mb-m': successfulUploads.length && filesUploading.length }"
+    />
+    <div class="upload-info-successful-uploads oc-px-m oc-pb-m">
+      <ul id="files-collaborators-list" class="oc-list">
+        <li
+          v-for="(item, idx) in successfulUploads"
+          :key="idx"
+          :class="{ 'oc-mb-s': idx !== successfulUploads.length - 1 }"
+        >
+          <oc-resource
+            v-if="displayFileAsResource(item)"
+            :key="item.path"
+            :resource="item"
+            :is-path-displayed="true"
+            :is-thumbnail-displayed="displayThumbnails"
+            :is-resource-clickable="false"
+            :parent-folder-name-default="defaultParentFolderName(item)"
+            :folder-link="folderLink(item)"
+            :parent-folder-link="parentFolderLink(item)"
+          />
+          <span v-else class="oc-flex oc-flex-middle">
+            <oc-resource-icon :resource="item" size="large" class="file_info__icon oc-mr-s" />
+            <oc-resource-name
+              :name="item.name"
+              :extension="item.extension"
+              :type="item.type"
+              full-path=""
+              :is-path-displayed="false"
+            />
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import '@uppy/core/dist/style.css'
+import '@uppy/status-bar/dist/style.css'
+import path from 'path'
+import { useCapabilitySpacesEnabled } from 'web-pkg/src/composables'
+import { mapGetters } from 'vuex'
+
+export default {
+  setup() {
+    return {
+      hasSpaces: useCapabilitySpacesEnabled()
+    }
+  },
+  data: () => ({
+    showInfo: false,
+    filesUploading: 0,
+    uploadCancelled: false,
+    successfulUploads: []
+  }),
+  computed: {
+    ...mapGetters(['configuration']),
+
+    uploadInfoTitle() {
+      if (this.filesUploading) {
+        return this.$gettextInterpolate(
+          this.$ngettext(
+            '%{ filesUploading } file uploading...',
+            '%{ filesUploading } files uploading...',
+            this.filesUploading
+          ),
+          { filesUploading: this.filesUploading }
+        )
+      }
+      if (this.uploadCancelled) {
+        return this.$gettext('Upload cancelled')
+      }
+      return this.$gettext('Upload completed')
+    },
+    displayThumbnails() {
+      return !this.configuration.options.disablePreviews
+    }
+  },
+  mounted() {
+    this.$uppyService.useStatusBar({
+      targetSelector: '.upload-info-status-bar',
+      getText: this.$gettext
+    })
+  },
+  created() {
+    this.$uppyService.$on('uploadStarted', () => {
+      this.showInfo = true
+      this.filesUploading = this.filesUploading + 1
+      this.uploadCancelled = false
+    })
+    this.$uppyService.$on('uploadCompleted', () => {
+      this.filesUploading = this.filesUploading - 1
+    })
+    this.$uppyService.$on('uploadCancelled', () => {
+      this.filesUploading = 0
+      this.uploadCancelled = true
+    })
+    this.$uppyService.$on('uploadSuccess', (file) => {
+      // @TODO we need the storage ID here... maybe fetch the file via DAV and call buildResources()?
+
+      let path = file.meta.currentFolder
+      if (file.meta.relativePath) {
+        path += file.meta.relativePath
+      }
+      path += file.name
+
+      this.successfulUploads.push({
+        ...file,
+        path,
+        targetRoute: file.meta.route
+      })
+    })
+  },
+  methods: {
+    closeInfo() {
+      this.showInfo = false
+      this.filesUploading = 0
+      this.successfulUploads = []
+      this.uploadCancelled = false
+    },
+    displayFileAsResource(file) {
+      return !!file.targetRoute
+    },
+    folderLink(file) {
+      return this.createFolderLink(file.path, file.storageId, file.targetRoute)
+    },
+    parentFolderLink(file) {
+      return this.createFolderLink(path.dirname(file.path), file.storageId, file.targetRoute)
+    },
+    defaultParentFolderName(file) {
+      // FIXME: use isLocationSpacesActive(), but it currently lies in the files app
+      if (file.targetRoute?.name === 'files-spaces-project') {
+        return file.targetRoute.params.name
+      }
+      return this.hasSpaces ? this.$gettext('Personal') : this.$gettext('All files and folders')
+    },
+    createFolderLink(path, storageId, targetRoute) {
+      if (!targetRoute) {
+        return {}
+      }
+
+      const strippedPath = path.replace(/^\//, '')
+      const route = {
+        name: targetRoute.name,
+        query: targetRoute.query,
+        params: {
+          ...(storageId && path && { storageId })
+        }
+      }
+
+      if (strippedPath) {
+        route.params = { ...targetRoute.params }
+        route.params.item = strippedPath
+      }
+
+      return route
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+#upload-info {
+  position: absolute;
+  right: 20px;
+  background-color: var(--oc-color-background-secondary);
+  bottom: 20px;
+  width: 300px;
+}
+.upload-info-successful-uploads {
+  max-height: 50vh;
+  overflow-y: auto;
+}
+.upload-info-status-bar .uppy-StatusBar,
+.upload-info-status-bar .uppy-StatusBar-actionBtn--retry:hover {
+  background-color: unset !important;
+}
+.upload-info-status-bar .uppy-StatusBar-content {
+  padding-left: 0.25rem !important;
+  color: var(--oc-color-text-default);
+}
+.upload-info-status-bar .uppy-StatusBar-actions {
+  right: 0.25rem !important;
+}
+.upload-info-status-bar .uppy-c-btn {
+  color: var(--oc-color-text-default);
+}
+.upload-info-status-bar .uppy-StatusBar-statusSecondary {
+  color: var(--oc-color-swatch-passive-default);
+}
+.upload-info-status-bar .uppy-StatusBar-details,
+.upload-info-status-bar .uppy-StatusBar-actionBtn--retry svg {
+  display: none;
+}
+.upload-info-status-bar .uppy-StatusBar-statusPrimary {
+  font-size: 0.9rem;
+}
+</style>
diff --git a/packages/web-runtime/src/composables/upload/index.ts b/packages/web-runtime/src/composables/upload/index.ts
new file mode 100644
index 00000000000..7e3692274ba
--- /dev/null
+++ b/packages/web-runtime/src/composables/upload/index.ts
@@ -0,0 +1 @@
+export * from './useUpload'
diff --git a/packages/web-runtime/src/composables/upload/uppyPlugins/customDropTarget.ts b/packages/web-runtime/src/composables/upload/uppyPlugins/customDropTarget.ts
new file mode 100644
index 00000000000..79591547abe
--- /dev/null
+++ b/packages/web-runtime/src/composables/upload/uppyPlugins/customDropTarget.ts
@@ -0,0 +1,39 @@
+import DropTarget from '@uppy/drop-target'
+
+/**
+ * Custom Drop Target plugin
+ *
+ * It adds the possibility to have a custom method for adding files to uppy.
+ */
+export class CustomDropTarget extends DropTarget {
+  addFiles = (files) => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    if (this.opts.uppyService) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      this.opts.uppyService.$emit('filesSelected', files)
+      return
+    }
+
+    const descriptors = files.map((file) => {
+      return {
+        source: this.id,
+        name: file.name,
+        type: file.type,
+        data: file,
+        meta: {
+          relativePath: file.relativePath || null
+        }
+      }
+    })
+
+    try {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      this.uppy.addFiles(descriptors)
+    } catch (err) {
+      this.uppy.log(err)
+    }
+  }
+}
diff --git a/packages/web-runtime/src/composables/upload/uppyPlugins/customTus.ts b/packages/web-runtime/src/composables/upload/uppyPlugins/customTus.ts
new file mode 100644
index 00000000000..049a48affaf
--- /dev/null
+++ b/packages/web-runtime/src/composables/upload/uppyPlugins/customTus.ts
@@ -0,0 +1,14 @@
+import Tus from '@uppy/tus'
+
+export class CustomTus extends Tus {
+  upload(file) {
+    if (file.meta.tusEndpoint) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      this.opts.endpoint = file.meta.tusEndpoint
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return super.upload(file)
+  }
+}
diff --git a/packages/web-runtime/src/composables/upload/useUpload.ts b/packages/web-runtime/src/composables/upload/useUpload.ts
new file mode 100644
index 00000000000..b425717a652
--- /dev/null
+++ b/packages/web-runtime/src/composables/upload/useUpload.ts
@@ -0,0 +1,151 @@
+import { Route } from 'vue-router'
+import { ClientService } from 'web-pkg/src/services'
+import {
+  useCapabilityFilesTusSupportHttpMethodOverride,
+  useCapabilityFilesTusSupportMaxChunkSize,
+  useClientService,
+  useStore
+} from 'web-pkg/src/composables'
+import { computed, Ref, unref, watch } from '@vue/composition-api'
+import { useActiveLocation } from 'files/src/composables'
+import { isLocationPublicActive } from 'files/src/router'
+import { UppyService } from '../../services/uppyService'
+
+export interface UppyResource {
+  id?: string
+  source: string
+  name: string
+  type: string
+  data: Blob
+  meta: {
+    currentFolder: string
+    relativeFolder: string
+    relativePath: string
+    route: Route
+    tusEndpoint: string
+    webDavBasePath: string
+  }
+}
+
+interface UploadOptions {
+  uppyService: UppyService
+}
+
+interface UploadResult {
+  createDirectoryTree(files: UppyResource[]): void
+}
+
+export function useUpload(options: UploadOptions): UploadResult {
+  const store = useStore()
+  const publicLinkPassword = computed((): string => store.getters['Files/publicLinkPassword'])
+  const isPublicLocation = useActiveLocation(isLocationPublicActive, 'files-public-files')
+  const isPublicDropLocation = useActiveLocation(isLocationPublicActive, 'files-public-drop')
+  const clientService = useClientService()
+  const getToken = computed((): string => store.getters.getToken)
+
+  const tusHttpMethodOverride = useCapabilityFilesTusSupportHttpMethodOverride()
+  const tusMaxChunkSize = useCapabilityFilesTusSupportMaxChunkSize()
+  const uploadChunkSize = computed((): number => store.getters.configuration.uploadChunkSize)
+
+  const headers = computed((): { [key: string]: string } => {
+    if (unref(isPublicLocation) || unref(isPublicDropLocation)) {
+      const password = unref(publicLinkPassword)
+      if (password) {
+        return { Authorization: 'Basic ' + Buffer.from('public:' + password).toString('base64') }
+      }
+
+      return {}
+    }
+    return {
+      Authorization: 'Bearer ' + unref(getToken)
+    }
+  })
+
+  const uppyOptions = computed(() => {
+    const isTusSupported = unref(tusMaxChunkSize) > 0
+
+    if (isTusSupported) {
+      return {
+        isTusSupported,
+        tusMaxChunkSize: unref(tusMaxChunkSize),
+        uploadChunkSize: unref(uploadChunkSize),
+        tusHttpMethodOverride: unref(tusHttpMethodOverride),
+        headers: unref(headers)
+      }
+    }
+
+    return { isTusSupported, headers: unref(headers) }
+  })
+
+  watch(
+    uppyOptions,
+    () => {
+      // @TODO use Tus once the backend supports it on password protected links
+      if (unref(uppyOptions).isTusSupported && !unref(publicLinkPassword)) {
+        options.uppyService.useTus(unref(uppyOptions) as any)
+        return
+      }
+      options.uppyService.useXhr(unref(uppyOptions) as any)
+    },
+    { immediate: true }
+  )
+
+  return {
+    createDirectoryTree: createDirectoryTree({
+      clientService,
+      isPublicLocation,
+      publicLinkPassword
+    })
+  }
+}
+
+const createDirectoryTree = ({
+  clientService,
+  isPublicLocation,
+  publicLinkPassword
+}: {
+  clientService: ClientService
+  isPublicLocation: Ref<boolean>
+  publicLinkPassword?: Ref<string>
+}) => {
+  return async (files: UppyResource[]) => {
+    const { owncloudSdk: client } = clientService
+    const createdFolders = []
+    for (const file of files) {
+      const currentFolder = file.meta.currentFolder
+      const directory = file.meta.relativeFolder
+
+      if (!directory || createdFolders.includes(directory)) {
+        continue
+      }
+
+      const folders = directory.split('/')
+      let createdSubFolders = ''
+      for (const subFolder of folders) {
+        if (!subFolder) {
+          continue
+        }
+
+        const folderToCreate = `${createdSubFolders}/${subFolder}`
+        if (createdFolders.includes(folderToCreate)) {
+          createdSubFolders += `/${subFolder}`
+          createdFolders.push(createdSubFolders)
+          continue
+        }
+
+        if (unref(isPublicLocation)) {
+          await client.publicFiles.createFolder(
+            currentFolder,
+            folderToCreate,
+            unref(publicLinkPassword)
+          )
+        } else {
+          await client.files.createFolder(`${file.meta.webDavBasePath}/${folderToCreate}`)
+        }
+
+        createdSubFolders += `/${subFolder}`
+        createdFolders.push(createdSubFolders)
+      }
+    }
+  }
+}
diff --git a/packages/web-runtime/src/container/bootstrap.ts b/packages/web-runtime/src/container/bootstrap.ts
index f1c3875f0a4..d5f8717b4ef 100644
--- a/packages/web-runtime/src/container/bootstrap.ts
+++ b/packages/web-runtime/src/container/bootstrap.ts
@@ -14,6 +14,7 @@ import { useLocalStorage } from 'web-pkg/src/composables'
 import { unref } from '@vue/composition-api'
 import { useDefaultThemeName } from '../composables'
 import { clientService } from 'web-pkg/src/services'
+import { UppyService } from '../services/uppyService'
 
 /**
  * fetch runtime configuration, this step is optional, all later steps can use a static
@@ -249,6 +250,15 @@ export const announceClientService = ({
   vue.prototype.$clientService.owncloudSdk = sdk
 }
 
+/**
+ * announce uppyService and owncloud SDK and inject it into vue
+ *
+ * @param vue
+ */
+export const announceUppyService = ({ vue }: { vue: VueConstructor }): void => {
+  vue.prototype.$uppyService = new UppyService()
+}
+
 /**
  * announce runtime defaults, this is usual the last needed announcement before rendering the actual ui
  *
diff --git a/packages/web-runtime/src/defaults/vue.js b/packages/web-runtime/src/defaults/vue.js
index fa86623564f..afe9ff9733d 100644
--- a/packages/web-runtime/src/defaults/vue.js
+++ b/packages/web-runtime/src/defaults/vue.js
@@ -2,7 +2,6 @@ import 'vue-resize/dist/vue-resize.css'
 import Vue from 'vue'
 import MediaSource from '../plugins/mediaSource.js'
 import WebPlugin from '../plugins/web'
-import ChunkedUpload from '../plugins/upload'
 import Avatar from '../components/Avatar.vue'
 import focusMixin from '../mixins/focusMixin'
 import lifecycleMixin from '../mixins/lifecycleMixin'
@@ -13,7 +12,6 @@ import VueResize from 'vue-resize'
 import VueMeta from 'vue-meta'
 import PortalVue from 'portal-vue'
 import AsyncComputed from 'vue-async-computed'
-import { Drag, Drop } from 'vue-drag-drop'
 import VueRouter from 'vue-router'
 import Vuex from 'vuex'
 import VueCompositionAPI from '@vue/composition-api'
@@ -29,12 +27,9 @@ Vue.use(VueResize)
 Vue.use(VueMeta, {
   refreshOnceOnNavigation: true
 })
-Vue.use(ChunkedUpload)
 Vue.use(PortalVue)
 Vue.use(AsyncComputed)
 
-Vue.component('drag', Drag)
-Vue.component('drop', Drop)
 Vue.component('avatar-image', Avatar)
 
 Vue.mixin(focusMixin)
diff --git a/packages/web-runtime/src/index.ts b/packages/web-runtime/src/index.ts
index 4eb8b8b6b7c..6706b51d4c1 100644
--- a/packages/web-runtime/src/index.ts
+++ b/packages/web-runtime/src/index.ts
@@ -19,12 +19,14 @@ import {
   announceTheme,
   announceTranslations,
   announceVersions,
-  applicationStore
+  applicationStore,
+  announceUppyService
 } from './container'
 
 export const bootstrap = async (configurationPath: string): Promise<void> => {
   const runtimeConfiguration = await requestConfiguration(configurationPath)
   announceClientService({ vue: Vue, runtimeConfiguration })
+  announceUppyService({ vue: Vue })
   await announceClient(runtimeConfiguration)
   await announceStore({ vue: Vue, store, runtimeConfiguration })
   await announceApplications({
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index 5880ff5cbcf..548844f9ad3 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -18,6 +18,7 @@
         />
       </div>
     </div>
+    <upload-info />
   </div>
 </template>
 
@@ -26,6 +27,7 @@ import { mapActions, mapGetters } from 'vuex'
 import TopBar from '../components/Topbar/TopBar.vue'
 import MessageBar from '../components/MessageBar.vue'
 import SidebarNav from '../components/SidebarNav/SidebarNav.vue'
+import UploadInfo from '../components/UploadInfo.vue'
 import { useActiveApp, useRoute } from 'web-pkg/src/composables'
 import { watch, defineComponent } from '@vue/composition-api'
 
@@ -33,7 +35,8 @@ export default defineComponent({
   components: {
     MessageBar,
     TopBar,
-    SidebarNav
+    SidebarNav,
+    UploadInfo
   },
   setup() {
     // FIXME: we can convert to a single router-view without name (thus without the loop) and without this watcher when we release v6.0.0
diff --git a/packages/web-runtime/src/plugins/upload.js b/packages/web-runtime/src/plugins/upload.js
deleted file mode 100644
index 4a6aa2c6a8e..00000000000
--- a/packages/web-runtime/src/plugins/upload.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { isSupported, Upload } from 'tus-js-client'
-
-export default {
-  install(Vue) {
-    Vue.mixin({
-      computed: {
-        browserSupportsChunked() {
-          return isSupported
-        }
-      },
-      methods: {
-        uploadChunkedFile(file, path, options) {
-          return new Promise((resolve, reject) => {
-            const headers = this.$client.helpers.buildHeaders()
-            delete headers['OCS-APIREQUEST']
-            let mtime = null
-            if (file.lastModifiedDate) {
-              mtime = file.lastModifiedDate.getTime() / 1000
-            }
-            if (file.lastModified) {
-              mtime = file.lastModified / 1000
-            }
-            const upload = new Upload(file, {
-              endpoint: this.$client.files.getFileUrlV2(path),
-              headers: headers,
-              chunkSize: options.chunkSize || Infinity,
-              removeFingerprintOnSuccess: true,
-              overridePatchMethod: !!options.overridePatchMethod,
-              retryDelays: [0, 3000, 5000, 10000, 20000],
-              metadata: {
-                filename: file.name,
-                filetype: file.type,
-                size: file.size,
-                mtime: mtime
-              },
-
-              onError: (error) => {
-                console.error(`Error uploading file "${file}" to "${path}"`, error)
-                reject(error)
-              },
-
-              onProgress: (bytesUploaded, bytesTotal) => {
-                options.emitProgress({ loaded: bytesUploaded, total: bytesTotal })
-              },
-
-              onSuccess: () => {
-                resolve(`File ${upload.file.name} was uploaded successfully`)
-              }
-            })
-
-            upload.findPreviousUploads().then((previousUploads) => {
-              if (previousUploads.length === 0) {
-                return
-              }
-              upload.resumeFromPreviousUpload(previousUploads[0])
-            })
-
-            upload.start()
-            return upload
-          })
-        }
-      }
-    })
-  }
-}
diff --git a/packages/web-runtime/src/services/uppyService.ts b/packages/web-runtime/src/services/uppyService.ts
new file mode 100644
index 00000000000..74e2f342571
--- /dev/null
+++ b/packages/web-runtime/src/services/uppyService.ts
@@ -0,0 +1,240 @@
+import Uppy from '@uppy/core'
+import { CustomTus } from '../composables/upload/uppyPlugins/customTus'
+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'
+
+export class UppyService extends Vue {
+  uppy: Uppy
+  uploadInputs: HTMLInputElement[] = []
+
+  constructor() {
+    super()
+    this.uppy = new Uppy({
+      autoProceed: true
+    })
+    this.setUpEvents()
+  }
+
+  useTus({
+    tusMaxChunkSize,
+    uploadChunkSize,
+    tusHttpMethodOverride,
+    headers
+  }: {
+    tusMaxChunkSize: number
+    uploadChunkSize: number
+    tusHttpMethodOverride: boolean
+    headers: { [key: string]: string }
+  }) {
+    const chunkSize =
+      tusMaxChunkSize > 0 && uploadChunkSize !== Infinity
+        ? Math.max(tusMaxChunkSize, uploadChunkSize)
+        : uploadChunkSize
+
+    const tusPluginOptions = {
+      headers: headers,
+      chunkSize: chunkSize,
+      removeFingerprintOnSuccess: true,
+      overridePatchMethod: !!tusHttpMethodOverride,
+      retryDelays: [0]
+    }
+
+    const xhrPlugin = this.uppy.getPlugin('XHRUpload')
+    if (xhrPlugin) {
+      this.uppy.removePlugin(xhrPlugin)
+    }
+
+    const tusPlugin = this.uppy.getPlugin('Tus')
+    if (tusPlugin) {
+      tusPlugin.setOptions(tusPluginOptions)
+      return
+    }
+
+    this.uppy.use(CustomTus, tusPluginOptions)
+  }
+
+  useXhr({ headers }: { headers: { [key: string]: string } }) {
+    const xhrPluginOptions: XHRUploadOptions = {
+      endpoint: '',
+      method: 'put',
+      headers,
+      formData: false,
+      getResponseData() {
+        return {}
+      }
+    }
+
+    const tusPlugin = this.uppy.getPlugin('Tus')
+    if (tusPlugin) {
+      this.uppy.removePlugin(tusPlugin)
+    }
+
+    const xhrPlugin = this.uppy.getPlugin('XHRUpload')
+    if (xhrPlugin) {
+      xhrPlugin.setOptions(xhrPluginOptions)
+      return
+    }
+
+    this.uppy.use(XHRUpload, xhrPluginOptions)
+  }
+
+  useDropTarget({
+    targetSelector,
+    uppyService
+  }: {
+    targetSelector: string
+    uppyService: UppyService
+  }) {
+    if (this.uppy.getPlugin('DropTarget')) {
+      return
+    }
+    this.uppy.use(CustomDropTarget, {
+      target: targetSelector,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      uppyService
+    })
+  }
+
+  removeDropTarget() {
+    const dropTargetPlugin = this.uppy.getPlugin('DropTarget')
+    if (dropTargetPlugin) {
+      this.uppy.removePlugin(dropTargetPlugin)
+    }
+  }
+
+  useStatusBar({
+    targetSelector,
+    getText
+  }: {
+    targetSelector: string
+    getText: (msgid: string) => string
+  }) {
+    if (this.uppy.getPlugin('StatusBar')) {
+      return
+    }
+
+    this.uppy.use(StatusBar, {
+      id: 'StatusBar',
+      target: targetSelector,
+      hideAfterFinish: true,
+      showProgressDetails: true,
+      hideUploadButton: false,
+      hideRetryButton: false,
+      hidePauseResumeButton: false,
+      hideCancelButton: false,
+      doneButtonHandler: null,
+      locale: {
+        strings: {
+          uploading: getText('Uploading'),
+          complete: getText('Complete'),
+          uploadFailed: getText('Upload failed'),
+          paused: getText('Paused'),
+          retry: getText('Retry'),
+          cancel: getText('Cancel'),
+          pause: getText('Pause'),
+          resume: getText('Resume'),
+          done: getText('Done'),
+          filesUploadedOfTotal: {
+            0: getText('%{complete} of %{smart_count} file uploaded'),
+            1: getText('%{complete} of %{smart_count} files uploaded')
+          },
+          dataUploadedOfTotal: getText('%{complete} of %{total}'),
+          xTimeLeft: getText('%{time} left'),
+          uploadXFiles: {
+            0: getText('Upload %{smart_count} file'),
+            1: getText('Upload %{smart_count} files')
+          },
+          uploadXNewFiles: {
+            0: getText('Upload +%{smart_count} file'),
+            1: getText('Upload +%{smart_count} files')
+          },
+          upload: getText('Upload'),
+          retryUpload: getText('Retry upload'),
+          xMoreFilesAdded: {
+            0: getText('%{smart_count} more file added'),
+            1: getText('%{smart_count} more files added')
+          },
+          showErrorDetails: getText('Show error details')
+        }
+      }
+    })
+  }
+
+  private setUpEvents() {
+    this.uppy.on('upload', () => {
+      this.$emit('uploadStarted')
+    })
+    this.uppy.on('cancel-all', () => {
+      this.$emit('uploadCancelled')
+    })
+    this.uppy.on('complete', (result) => {
+      this.$emit('uploadCompleted')
+      result.successful.forEach((file) => {
+        this.$emit('uploadSuccess', file)
+        this.uppy.removeFile(file.id)
+      })
+      result.failed.forEach((file) => {
+        this.$emit('uploadError', file)
+      })
+      this.uploadInputs.forEach((item) => {
+        item.value = null
+      })
+    })
+    this.uppy.on('file-removed', () => {
+      this.$emit('uploadRemoved')
+      this.uploadInputs.forEach((item) => {
+        item.value = null
+      })
+    })
+    this.uppy.on('file-added', (file) => {
+      this.$emit('fileAdded')
+      const addedFile = file as unknown as UppyResource
+      if (this.uppy.getPlugin('XHRUpload')) {
+        const escapedName = encodeURIComponent(addedFile.name)
+        this.uppy.setFileState(addedFile.id, {
+          xhrUpload: {
+            endpoint: `${addedFile.meta.tusEndpoint.replace(/\/+$/, '')}/${escapedName}`
+          }
+        })
+      }
+    })
+  }
+
+  registerUploadInput(el: HTMLInputElement) {
+    const listenerRegistered = el.getAttribute('listener')
+    if (listenerRegistered !== 'true') {
+      el.setAttribute('listener', 'true')
+      el.addEventListener('change', (event) => {
+        const target = event.target as HTMLInputElement
+        const files = Array.from(target.files)
+        this.$emit('filesSelected', files)
+      })
+      this.uploadInputs.push(el)
+    }
+  }
+
+  removeUploadInput(el: HTMLInputElement) {
+    this.uploadInputs = this.uploadInputs.filter((input) => input !== el)
+  }
+
+  uploadFiles(files: UppyResource[]) {
+    files.forEach((file) => {
+      try {
+        this.uppy.addFile(file)
+      } catch (err) {
+        console.error('error upload file:', file)
+        if (err.isRestriction) {
+          // handle restrictions
+          console.error('Restriction error:', err)
+        } else {
+          // handle other errors
+          console.error(err)
+        }
+      }
+    })
+  }
+}
diff --git a/rollup.config.js b/rollup.config.js
index 71eff617204..777e3fa9fe8 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -60,9 +60,6 @@ const plugins = [
     css: false
   }),
   nodePolyfills(),
-  inject({
-    Buffer: ['buffer', 'Buffer']
-  }),
   resolve({
     include: 'node_modules/**',
     dedupe: ['@vue/composition-api'],
@@ -83,6 +80,9 @@ const plugins = [
   ts({
     browserslist: false
   }),
+  inject({
+    Buffer: ['buffer', 'Buffer']
+  }),
   json(),
   copy({
     watch: !production && ['./config', './packages/web-runtime/themes'],
@@ -150,7 +150,9 @@ const plugins = [
                   const fp = path.parse(f.fileName)
                   const lastDash = fp.name.lastIndexOf('-')
                   acc[c][
-                    production ? fp.name.slice(0, lastDash !== -1 ? lastDash : 0) || fp.name : fp.name
+                    production
+                      ? fp.name.slice(0, lastDash !== -1 ? lastDash : 0) || fp.name
+                      : fp.name
                   ] = c === 'js' ? fp.name : f.fileName
                 })
 
diff --git a/tests/acceptance/features/webUISharingPublicDifferentRoles/shareByPublicLinkDifferentRoles.feature b/tests/acceptance/features/webUISharingPublicDifferentRoles/shareByPublicLinkDifferentRoles.feature
index acf0005e7a2..f80efaa6dd3 100644
--- a/tests/acceptance/features/webUISharingPublicDifferentRoles/shareByPublicLinkDifferentRoles.feature
+++ b/tests/acceptance/features/webUISharingPublicDifferentRoles/shareByPublicLinkDifferentRoles.feature
@@ -71,7 +71,7 @@ Feature: Share by public link with different roles
       | name        | Public link    |
     And a link named "Public link" should be listed with role "Uploader" in the public link list of folder "simple-folder" on the webUI
     When the public uses the webUI to access the last public link created by user "Alice" in a new session
-    Then there should be no resources listed on the webUI
+    Then the user should be redirected to the files-drop page
 
   @skipOnOC10 @issue-ocis-reva-383
   #after fixing the issue delete this scenario and use the one above by deleting the @skipOnOCIS tag there
@@ -87,7 +87,7 @@ Feature: Share by public link with different roles
       | path        | /simple-folder |
     And a public link with the last created link share token as name should be listed for resource "simple-folder" on the webUI
     When the public uses the webUI to access the last public link created by user "Alice" in a new session
-    Then there should be no resources listed on the webUI
+    Then the user should be redirected to the files-drop page
 
   @issue-4582 @disablePreviews
   Scenario: creating a public link with "Editor" role makes it possible to delete files via the link
diff --git a/tests/acceptance/pageObjects/filesDropPage.js b/tests/acceptance/pageObjects/filesDropPage.js
index 8f9bdd68a9f..707736792cf 100644
--- a/tests/acceptance/pageObjects/filesDropPage.js
+++ b/tests/acceptance/pageObjects/filesDropPage.js
@@ -44,7 +44,7 @@ module.exports = {
       const files = []
       for (const { ELEMENT } of elements) {
         await this.api.elementIdText(ELEMENT, function (result) {
-          files.push(result.value)
+          files.push(result.value.replace('\n', ''))
         })
       }
       return files
@@ -56,11 +56,11 @@ module.exports = {
       locateStrategy: 'css selector'
     },
     uploadedFiles: {
-      selector: 'table tr > td:first-child',
+      selector: '.upload-info-successful-uploads span.oc-resource-name',
       locateStrategy: 'css selector'
     },
     fileDropzone: {
-      selector: '#oc-dropzone',
+      selector: '#files-drop-container',
       locateStrategy: 'css selector'
     }
   }
diff --git a/tests/acceptance/pageObjects/personalPage.js b/tests/acceptance/pageObjects/personalPage.js
index e3b566924c1..480dd78611c 100644
--- a/tests/acceptance/pageObjects/personalPage.js
+++ b/tests/acceptance/pageObjects/personalPage.js
@@ -168,7 +168,7 @@ module.exports = {
           false
         )
         .waitForElementNotVisible('@fileUploadProgress')
-        .click('@newFileMenuButton')
+        .click('@uploadFilesButton')
     },
     /**
      * This uploads a folder that is inside the selenium host,
diff --git a/tests/e2e/support/objects/app-files/page/public.ts b/tests/e2e/support/objects/app-files/page/public.ts
index 56198384fad..2f5e85a3338 100644
--- a/tests/e2e/support/objects/app-files/page/public.ts
+++ b/tests/e2e/support/objects/app-files/page/public.ts
@@ -23,7 +23,7 @@ export class Public {
 
   async upload({ resources }: { resources: File[] }): Promise<void> {
     await this.#page
-      .locator('//input[@id="file_upload_start" or @class="dz-hidden-input"]')
+      .locator('//input[@id="fileUploadInput"]')
       .setInputFiles(resources.map((file) => file.path))
   }
 }
diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index e0b2cbd02a5..1299c624fe4 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -74,13 +74,12 @@ export const uploadResource = async (args: uploadResourceArgs): Promise<void> =>
   await page.locator('#fileUploadInput').setInputFiles(resources.map((file) => file.path))
 
   if (createVersion) {
-    const fileName = resources.map((file) => path.basename(file.name))
-    await Promise.all([
-      page.waitForResponse((resp) => resp.url().endsWith(fileName[0]) && resp.status() === 204),
-      page.locator('.oc-modal-body-actions-confirm').click()
-    ])
+    await page.locator('.oc-modal-body-actions-confirm').click()
+    // @TODO check if upload was successful
   }
 
+  await page.locator('#close-upload-info-btn').click()
+
   await waitForResources({
     page: page,
     names: resources.map((file) => path.basename(file.name))
diff --git a/yarn.lock b/yarn.lock
index adf6a256120..39745305292 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2262,6 +2262,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@transloadit/prettier-bytes@npm:0.0.7":
+  version: 0.0.7
+  resolution: "@transloadit/prettier-bytes@npm:0.0.7"
+  checksum: af075e1b2b045cac55d5ab854b5c94273ef7f4bd825f05fe578559465f206d2a1535343b50170252a9efb31ffdc2d6420e64eb32d2faeabeeb8b7d81d5d46ef0
+  languageName: node
+  linkType: hard
+
 "@tsconfig/node10@npm:^1.0.7":
   version: 1.0.8
   resolution: "@tsconfig/node10@npm:1.0.8"
@@ -2739,6 +2746,100 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@uppy/companion-client@npm:^2.0.4, @uppy/companion-client@npm:^2.0.5":
+  version: 2.0.6
+  resolution: "@uppy/companion-client@npm:2.0.6"
+  dependencies:
+    "@uppy/utils": ^4.0.6
+    namespace-emitter: ^2.0.1
+  checksum: 2a60c70a280b4c7d898d5c0b4b58b0088dc4dc2937b7cf426c6a29a9a404a9db218fa6b909f892eb8a886106882943e2ccfc05b309fa760d90bef76039bc7b52
+  languageName: node
+  linkType: hard
+
+"@uppy/core@npm:^2.1.7":
+  version: 2.1.8
+  resolution: "@uppy/core@npm:2.1.8"
+  dependencies:
+    "@transloadit/prettier-bytes": 0.0.7
+    "@uppy/store-default": ^2.0.3
+    "@uppy/utils": ^4.0.6
+    lodash.throttle: ^4.1.1
+    mime-match: ^1.0.2
+    namespace-emitter: ^2.0.1
+    nanoid: ^3.1.25
+    preact: ^10.5.13
+  checksum: 2c4e1febef1cd7ef841aa9634773fa7eccc9737b34412152964ff384a0ced32b85cadc3532de7de7c74ae7da8887d2e8accd7e5b9f1df40cdec72e65441f3aff
+  languageName: node
+  linkType: hard
+
+"@uppy/drop-target@npm:^1.1.1":
+  version: 1.1.2
+  resolution: "@uppy/drop-target@npm:1.1.2"
+  dependencies:
+    "@uppy/utils": ^4.0.5
+  peerDependencies:
+    "@uppy/core": ^2.1.6
+  checksum: fc237303e0377182ec72288ade6fca9b3a6ee4344ff4930844efb460d3768b6273be3982c28726c8b134fc2966ea98d129e003ffaa96f1254d0f004d75726b2a
+  languageName: node
+  linkType: hard
+
+"@uppy/status-bar@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "@uppy/status-bar@npm:2.1.3"
+  dependencies:
+    "@transloadit/prettier-bytes": 0.0.7
+    "@uppy/utils": ^4.0.5
+    classnames: ^2.2.6
+    lodash.throttle: ^4.1.1
+    preact: ^10.5.13
+  peerDependencies:
+    "@uppy/core": ^2.1.6
+  checksum: 80df539fd4f8444ffdc824b102b248a039bd2519ce6940fa76d40723212dfd14642067410bce30f388ca64cd66152906fe5458d08e2d489ccb737e6d8c84e01a
+  languageName: node
+  linkType: hard
+
+"@uppy/store-default@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "@uppy/store-default@npm:2.0.3"
+  checksum: aa6a3f80611ce6efed2963a197e3592cf00b1dedeb7e6c5aa7282e4ef857c8a7c1b747f8943cf969cc0fb12daf4907b62f1041a3df177bff01feb403f7dc777e
+  languageName: node
+  linkType: hard
+
+"@uppy/tus@npm:^2.2.2":
+  version: 2.2.2
+  resolution: "@uppy/tus@npm:2.2.2"
+  dependencies:
+    "@uppy/companion-client": ^2.0.5
+    "@uppy/utils": ^4.0.5
+    tus-js-client: ^2.1.1
+  peerDependencies:
+    "@uppy/core": ^2.1.7
+  checksum: 16073b4dfcd1a49d998ccaa37ff78707a80758dcebb92b5644042cb4601821e78690ed5e0ea3b829ed33129772c384bf8c9c60a69211e70447a956cef3225f57
+  languageName: node
+  linkType: hard
+
+"@uppy/utils@npm:^4.0.4, @uppy/utils@npm:^4.0.5, @uppy/utils@npm:^4.0.6":
+  version: 4.0.6
+  resolution: "@uppy/utils@npm:4.0.6"
+  dependencies:
+    lodash.throttle: ^4.1.1
+  checksum: 8773c4b1d742d65237c48c0575f1a933a20ffdcd8da462141b19649c027b0b88e4aa5dcb26ead1e830c967b904e51315fb61ea72ee0273614b463122d2b63066
+  languageName: node
+  linkType: hard
+
+"@uppy/xhr-upload@npm:^2.0.7":
+  version: 2.0.7
+  resolution: "@uppy/xhr-upload@npm:2.0.7"
+  dependencies:
+    "@uppy/companion-client": ^2.0.4
+    "@uppy/utils": ^4.0.4
+    nanoid: ^3.1.25
+  peerDependencies:
+    "@uppy/core": ^2.1.4
+  checksum: 714bb27348816249feea9545da299b56e150830ecd2d5e7015a061f412b349287aa2db875465949b4c58836377dbb7634d8e176a87c0126cb92b0a54ab408049
+  languageName: node
+  linkType: hard
+
 "@vue/compiler-core@npm:3.1.1":
   version: 3.1.1
   resolution: "@vue/compiler-core@npm:3.1.1"
@@ -4221,6 +4322,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"classnames@npm:^2.2.6":
+  version: 2.3.1
+  resolution: "classnames@npm:2.3.1"
+  checksum: 14db8889d56c267a591f08b0834989fe542d47fac659af5a539e110cc4266694e8de86e4e3bbd271157dbd831361310a8293e0167141e80b0f03a0f175c80960
+  languageName: node
+  linkType: hard
+
 "clean-css@npm:^4.1.11":
   version: 4.2.3
   resolution: "clean-css@npm:4.2.3"
@@ -4570,7 +4678,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^2.4.0, core-js@npm:^2.5.3, core-js@npm:^2.6.5":
+"core-js@npm:^2.4.0, core-js@npm:^2.6.5":
   version: 2.6.12
   resolution: "core-js@npm:2.6.12"
   checksum: 44fa9934a85f8c78d61e0c8b7b22436330471ffe59ec5076fe7f324d6e8cf7f824b14b1c81ca73608b13bdb0fef035bd820989bf059767ad6fa13123bb8bd016
@@ -5360,13 +5468,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"dropzone@npm:^5.5.1":
-  version: 5.9.2
-  resolution: "dropzone@npm:5.9.2"
-  checksum: 4c906f1e08421bbbb14f5e41ad37e5694317b6761f0a7e95d22c3037f6a05fe01ba48b722392187cccef367f18fdbaa18b1ae172c0b5cdb9a39ecba04ebb4f0a
-  languageName: node
-  linkType: hard
-
 "duplexify@npm:^4.1.2":
   version: 4.1.2
   resolution: "duplexify@npm:4.1.2"
@@ -6324,7 +6425,6 @@ __metadata:
   resolution: "files@workspace:packages/web-app-files"
   dependencies:
     copy-to-clipboard: ^3.3.1
-    vue2-dropzone: ^3.6.0
   languageName: unknown
   linkType: soft
 
@@ -9022,6 +9122,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mime-match@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "mime-match@npm:1.0.2"
+  dependencies:
+    wildcard: ^1.1.0
+  checksum: 3e4afd6be98e20bfb421146a14147560941f471886e6d3534372b37d29bb7e35a7462e1f9cee98312f92e44969ae9deca2da7ad91ab5a738af55a7d5f03a6814
+  languageName: node
+  linkType: hard
+
 "mime-types@npm:^2.1.12":
   version: 2.1.31
   resolution: "mime-types@npm:2.1.31"
@@ -9257,12 +9366,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.1.32, nanoid@npm:^3.3.1":
-  version: 3.3.1
-  resolution: "nanoid@npm:3.3.1"
+"namespace-emitter@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "namespace-emitter@npm:2.0.1"
+  checksum: 49ae49674d5b83e18ad91c549ed264df1fcba02d039617e0932dab618f79e3749de6d878d54962b5cbf2611c0eafc91203a376980399c33c30edf542f19cb034
+  languageName: node
+  linkType: hard
+
+"nanoid@npm:^3.1.25, nanoid@npm:^3.1.32, nanoid@npm:^3.3.1":
+  version: 3.3.2
+  resolution: "nanoid@npm:3.3.2"
   bin:
     nanoid: bin/nanoid.cjs
-  checksum: 4ef0969e1bbe866fc223eb32276cbccb0961900bfe79104fa5abe34361979dead8d0e061410a5c03bc3d47455685adf32c09d6f27790f4a6898fb51f7df7ec86
+  checksum: 376717f0685251fad77850bd84c6b8d57837c71eeb1c05be7c742140cc1835a5a2953562add05166d6dbc8fb65f3fdffa356213037b967a470e1691dc3e7b9cc
   languageName: node
   linkType: hard
 
@@ -10739,6 +10855,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"preact@npm:^10.5.13":
+  version: 10.7.1
+  resolution: "preact@npm:10.7.1"
+  checksum: e99d08bd38372e78ce1c84e68685cad66adf076bd95069bc8bcd32c9903a4df09c01d5b04aad849527362b67cc2c09446b647f72de4e67d0578fdea0f904f28f
+  languageName: node
+  linkType: hard
+
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"
@@ -13151,7 +13274,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tus-js-client@npm:^2.3.1":
+"tus-js-client@npm:^2.1.1":
   version: 2.3.1
   resolution: "tus-js-client@npm:2.3.1"
   dependencies:
@@ -13567,15 +13690,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-drag-drop@npm:^1.1.4":
-  version: 1.1.4
-  resolution: "vue-drag-drop@npm:1.1.4"
-  dependencies:
-    core-js: ^2.5.3
-  checksum: 8d4184ed35cb941745d42f9a925866f06fe9b7a71386792503efccc451fe6fed1c733d3f3d847a0eed2316ad861903b965fcb476153b233517609600dbb56695
-  languageName: node
-  linkType: hard
-
 "vue-eslint-parser@npm:^7.0.0, vue-eslint-parser@npm:^7.10.0":
   version: 7.11.0
   resolution: "vue-eslint-parser@npm:7.11.0"
@@ -13706,15 +13820,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue2-dropzone@npm:^3.6.0":
-  version: 3.6.0
-  resolution: "vue2-dropzone@npm:3.6.0"
-  dependencies:
-    dropzone: ^5.5.1
-  checksum: 6aada15d09bc8d2a1a3d59b370927fade313726224048635aa896ed8e592b71d6b1eb22d74bb45062631adc63ddd19ebbcfa59d8eaaaea35cb1248fff3c80ca1
-  languageName: node
-  linkType: hard
-
 "vue@npm:^2.6.10":
   version: 2.6.14
   resolution: "vue@npm:2.6.14"
@@ -13818,6 +13923,11 @@ __metadata:
     "@popperjs/core": ^2.4.0
     "@types/luxon": ^2.3.1
     "@types/semver": ^7.3.8
+    "@uppy/core": ^2.1.7
+    "@uppy/drop-target": ^1.1.1
+    "@uppy/status-bar": ^2.1.3
+    "@uppy/tus": ^2.2.2
+    "@uppy/xhr-upload": ^2.0.7
     "@vue/composition-api": ^1.4.9
     axios: ^0.26.1
     cross-fetch: ^3.0.6
@@ -13842,14 +13952,12 @@ __metadata:
     sanitize-html: ^2.7.0
     semver: ^7.3.5
     tippy.js: ^6.3.7
-    tus-js-client: ^2.3.1
     utf8: ^3.0.0
     uuid: ^8.3.2
     v-calendar: ^2.3.2
     vue: ^2.6.10
     vue-async-computed: ^3.9.0
     vue-concurrency: ^2.2.1
-    vue-drag-drop: ^1.1.4
     vue-events: ^3.1.0
     vue-gettext: ^2.1.5
     vue-inline-svg: ^2.0.0
@@ -13987,6 +14095,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wildcard@npm:^1.1.0":
+  version: 1.1.2
+  resolution: "wildcard@npm:1.1.2"
+  checksum: f93bf48a23b7b776f7960fa7f252af55da265b4ce8127852e420f04a907b78073bc0412f74fc662f561667f3277473974f6553a260ece67f53b1975d128320ab
+  languageName: node
+  linkType: hard
+
 "with@npm:^7.0.0":
   version: 7.0.2
   resolution: "with@npm:7.0.2"