From d5f663ea9e7c953e60b4a1faf0b45061ab4bb57d Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 4 Apr 2022 11:11:53 +0200
Subject: [PATCH 01/23] WIP

---
 .../unreleased/enhancement-resumeable-uploads |   9 +
 packages/web-app-files/package.json           |   8 +-
 .../src/components/AppBar/CreateAndUpload.vue | 184 ++++++--
 .../src/components/AppBar/Upload/FileDrop.vue | 132 ------
 .../components/AppBar/Upload/FileUpload.vue   |  25 +-
 .../components/AppBar/Upload/FolderUpload.vue |  22 +-
 .../src/components/Upload/ProgressBar.vue     |   7 +-
 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     | 156 +++++--
 .../components/Upload/ProgressBar.spec.js     |   3 +-
 .../tests/unit/views/views.setup.js           |   1 -
 packages/web-runtime/package.json             |   2 -
 packages/web-runtime/src/defaults/vue.js      |   5 -
 packages/web-runtime/src/plugins/upload.js    |  65 ---
 yarn.lock                                     | 183 ++++++--
 19 files changed, 441 insertions(+), 832 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-resumeable-uploads
 delete mode 100644 packages/web-app-files/src/components/AppBar/Upload/FileDrop.vue
 delete mode 100644 packages/web-runtime/src/plugins/upload.js

diff --git a/changelog/unreleased/enhancement-resumeable-uploads b/changelog/unreleased/enhancement-resumeable-uploads
new file mode 100644
index 00000000000..a5957628026
--- /dev/null
+++ b/changelog/unreleased/enhancement-resumeable-uploads
@@ -0,0 +1,9 @@
+Enhancement: Resumeable uploads
+
+Draft:
+- Introduced resumeable (depending on backend capabilities)
+- 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..6ebc709d445 100644
--- a/packages/web-app-files/package.json
+++ b/packages/web-app-files/package.json
@@ -4,7 +4,11 @@
   "description": "ownCloud web files",
   "license": "AGPL-3.0",
   "dependencies": {
-    "copy-to-clipboard": "^3.3.1",
-    "vue2-dropzone": "^3.6.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",
+    "copy-to-clipboard": "^3.3.1"
   }
 }
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 704034a1865..a6d6a5c837f 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -70,16 +70,11 @@
         <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
+    <!-- PoC since the components don't get recognized on 
+    initial page rendering as (hidden) OcDrop elements -->
+    <folder-upload />
+    <file-upload />
+    <!-- <oc-button
       id="upload-menu-btn"
       key="upload-menu-btn-enabled"
       v-oc-tooltip="uploadButtonTooltip"
@@ -99,34 +94,25 @@
     >
       <oc-list id="upload-list">
         <li>
-          <folder-upload
-            :root-path="currentPath"
-            :path="currentPath"
-            :headers="headers"
-            @success="onFileSuccess"
-            @error="onFileError"
-            @progress="onFileProgress"
-          />
+          <folder-upload />
         </li>
         <li>
-          <file-upload
-            :path="currentPath"
-            :headers="headers"
-            @success="onFileSuccess"
-            @error="onFileError"
-            @progress="onFileProgress"
-          />
+          <file-upload />
         </li>
       </oc-list>
-    </oc-drop>
+    </oc-drop> -->
   </div>
 </template>
 
 <script>
 import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import pathUtil from 'path'
+import Uppy from '@uppy/core'
+import Tus from '@uppy/tus'
+import XHRUpload from '@uppy/xhr-upload'
+import StatusBar from '@uppy/status-bar'
+import DropTarget from '@uppy/drop-target'
 
-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,17 +121,16 @@ 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'
 
 export default {
   components: {
-    FileDrop,
     FileUpload,
     FolderUpload
   },
-  mixins: [Mixins, MixinFileActions],
+  mixins: [MixinFileActions],
   setup() {
     return {
       isPersonalLocation: useActiveLocation(isLocationSpacesActive, 'files-spaces-personal-home'),
@@ -264,13 +249,142 @@ export default {
       )
     }
   },
+  mounted() {
+    // TODO: Clarify why not to use this.headers
+    const client = this.$client
+    const uppyHeaders = client.helpers.buildHeaders()
+
+    const uploadPath = this.$client.files.getFileUrl(
+      buildWebDavFilesPath(this.user.id, this.currentPath)
+    )
+
+    // might make sense to initialize an Uppy instance in the runtime?
+    // TODO: set debug to false
+    const uppy = new Uppy({ debug: true, autoProceed: true })
+
+    // TODO: Build headers differently in public context?
+    // if (this.publicPage()) { ... maybe use this.headers to obtain token ... }
+
+    // TODO: What about flaky capability loading and its implications?
+    if (this.capabilities.files.tus_support?.max_chunk_size > 0) {
+      const chunkSize =
+        this.capabilities.files.tus_support.max_chunk_size > 0 &&
+        this.configuration.uploadChunkSize !== Infinity
+          ? Math.max(
+              this.capabilities.files.tus_support.max_chunk_size,
+              this.configuration.uploadChunkSize
+            )
+          : this.configuration.uploadChunkSize
+
+      delete uppyHeaders['OCS-APIREQUEST']
+
+      uppy.use(Tus, {
+        endpoint: uploadPath,
+        headers: uppyHeaders,
+        chunkSize: chunkSize,
+        removeFingerprintOnSuccess: true,
+        overridePatchMethod: !!this.capabilities.files.tus_support.http_method_override,
+        retryDelays: [0, 3000, 5000, 10000, 20000]
+      })
+    } else {
+      console.log('uppy on oc10')
+      // for loop on event for multiple endpoints
+      // https://github.com/transloadit/uppy/issues/1790#issuecomment-581402293
+      uppy.use(XHRUpload, {
+        endpoint: uploadPath,
+        method: 'put',
+        headers: uppyHeaders
+      })
+    }
+
+    // upload button handling (files & folders separately)
+    // doesn't recognize elements yet since they're tippy children, maybe use $refs?
+    const uploadInputTarget = document.querySelectorAll('.upload-input-target')
+
+    uploadInputTarget.forEach((item) => {
+      item.addEventListener('change', (event) => {
+        const files = Array.from(event.target.files)
+
+        files.forEach((file) => {
+          try {
+            console.log('beginning upload for file:', file)
+            uppy.addFile({
+              source: 'file input',
+              name: file.name,
+              type: file.type,
+              data: file
+            })
+          } catch (err) {
+            console.error('error upload file:', file)
+            if (err.isRestriction) {
+              // handle restrictions
+              console.log('Restriction error:', err)
+            } else {
+              // handle other errors
+              console.error(err)
+            }
+          }
+        })
+      })
+    })
+
+    // // upload via drag&drop handling
+    uppy.use(DropTarget, {
+      target: '#files-view'
+    })
+
+    uppy.use(StatusBar, {
+      id: 'StatusBar',
+      target: '#files-app-bar',
+      hideAfterFinish: true,
+      showProgressDetails: true,
+      hideUploadButton: false,
+      hideRetryButton: false,
+      hidePauseResumeButton: false,
+      hideCancelButton: false,
+      doneButtonHandler: null,
+      locale: {
+        // TODO: Uppy l10n research
+      }
+    })
+
+    uppy.on('upload-error', (file, error, response) => {
+      console.log('error with file:', file.id)
+      console.log('error message:', error)
+      this.onFileError(error.toString())
+    })
+
+    uppy.on('file-removed', () => {
+      uploadInputTarget.forEach((item) => {
+        item.value = null
+      })
+    })
+
+    uppy.on('complete', (result) => {
+      result.successful.forEach((file) => {
+        this.onFileSuccess(file)
+      })
+      uploadInputTarget.forEach((item) => {
+        item.value = null
+      })
+
+      console.log('successful files:', result.successful)
+      console.log('failed files:', result.failed)
+    })
+  },
+  beforeDestroy() {
+    // maybe bad that we close uppy this early, eventually on rerender even?
+    // currently very brittle, selecting a resource in the table
+    // results in a rerendering that logs an error since uppy is gone before it can close
+    // this.uppy.close()
+  },
   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) {
       try {
         if (file.name) {
           file = file.name
@@ -323,10 +437,6 @@ export default {
       })
     },
 
-    onFileProgress(progress) {
-      this.updateFileProgress(progress)
-    },
-
     showCreateResourceModal(
       isFolder = true,
       ext = 'txt',
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..a9e8eb7796d 100644
--- a/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
@@ -7,41 +7,18 @@
     <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 {}
-      }
-    },
-    requestType: { type: String, default: 'PUT' }
-  },
-  computed: {
-    ...mapState(['user'])
-  },
   methods: {
     triggerUpload() {
       this.$refs.input.click()
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..454040d47b7 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,33 +15,12 @@
       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' }
-  },
   methods: {
     triggerUpload() {
       this.$refs.input.click()
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/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..54420a38a0e 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -11,18 +11,11 @@
       <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>
+          <!-- needs uppy dropzone -->
+          <div id="files-drop-zone" class="uk-flex uk-flex-middle uk-flex-center uk-placeholder">
+            <oc-icon name="file_upload" />
+            <translate>Drop files here to upload or click to select file</translate>
+          </div>
           <div id="previews" hidden />
         </div>
         <div
@@ -74,29 +67,29 @@
 </template>
 
 <script>
-import vue2DropZone from 'vue2-dropzone'
 import { mapGetters } from 'vuex'
-import Mixins from '../mixins.js'
 import { DavProperties, DavProperty } from 'web-pkg/src/constants'
 import { linkRoleUploaderFolder } from '../helpers/share'
 import { createLocationOperations, createLocationPublic } from '../router'
 
+import Uppy from '@uppy/core'
+import Tus from '@uppy/tus'
+import XHRUpload from '@uppy/xhr-upload'
+import StatusBar from '@uppy/status-bar'
+import DropTarget from '@uppy/drop-target'
+
 export default {
-  components: {
-    vueDropzone: vue2DropZone
-  },
-  mixins: [Mixins],
   data() {
     return {
       loading: true,
       errorMessage: null,
-      uploadedFiles: new Map(),
+      uploadedFiles: [],
       uploadedFilesChangeTracker: 0
     }
   },
   computed: {
-    ...mapGetters(['configuration']),
-    ...mapGetters('Files', ['publicLinkPassword']),
+    ...mapGetters(['capabilities', 'configuration', 'newFileHandlers', 'user']),
+    ...mapGetters('Files', ['currentFolder', 'publicLinkPassword']),
     pageTitle() {
       return this.$gettext(this.$route.meta.title)
     },
@@ -120,19 +113,122 @@ export default {
     },
     getUploadedFiles() {
       return this.uploadedFilesChangeTracker && this.uploadedFiles.values()
-    },
-    dropzoneOptions() {
-      return {
-        url: this.url,
-        clickable: true,
-        createImageThumbnails: false,
-        autoQueue: false,
-        previewsContainer: '#previews'
-      }
     }
   },
   mounted() {
     this.resolvePublicLink()
+
+    const client = this.$client
+    const uppyHeaders = client.helpers.buildHeaders()
+
+    // might make sense to initialize an Uppy instance in the runtime?
+    // TODO: set debug to false
+    const uppy = new Uppy({ debug: true, autoProceed: true })
+
+    // TODO: Build headers differently in public context?
+    // if (this.publicPage()) { ... maybe use this.headers to obtain token ... }
+
+    // TODO: What about flaky capability loading and its implications?
+    // if (this.capabilities?.files.tus_support?.max_chunk_size > 0) {
+    //   const chunkSize =
+    //     this.capabilities.files.tus_support.max_chunk_size > 0 &&
+    //     this.configuration.uploadChunkSize !== Infinity
+    //       ? Math.max(
+    //           this.capabilities.files.tus_support.max_chunk_size,
+    //           this.configuration.uploadChunkSize
+    //         )
+    //       : this.configuration.uploadChunkSize
+
+    delete uppyHeaders['OCS-APIREQUEST']
+
+    uppy.use(Tus, {
+      endpoint: this.url,
+      headers: uppyHeaders,
+      chunkSize: this.configuration.uploadChunkSize,
+      removeFingerprintOnSuccess: true,
+      overridePatchMethod: '',
+      retryDelays: [0, 3000, 5000, 10000, 20000]
+    })
+    // } else {
+    // uppy.use(XHRUpload, {
+    //   endpoint: this.url,
+    //   method: 'put',
+    //   headers: uppyHeaders
+    // })
+    // }
+
+    // // upload via drag&drop handling
+    uppy.use(DropTarget, {
+      target: '#files-drop-zone'
+    })
+
+    // upload button handling (files & folders separately)
+    // doesn't recognize elements yet since they're tippy children, maybe use $refs?
+    const uploadInputTarget = document.getElementById('#files-drop-zone')
+
+    uploadInputTarget.addEventListener('change', (event) => {
+      const files = Array.from(event.target.files)
+
+      files.forEach((file) => {
+        try {
+          console.log('beginning upload for file:', file)
+          uppy.addFile({
+            source: 'file input',
+            name: file.name,
+            type: file.type,
+            data: file
+          })
+        } catch (err) {
+          console.error('error upload file:', file)
+          if (err.isRestriction) {
+            // handle restrictions
+            console.log('Restriction error:', err)
+          } else {
+            // handle other errors
+            console.error(err)
+          }
+        }
+      })
+    })
+
+    // uppy.use(StatusBar, {
+    //   id: 'StatusBar',
+    //   target: '#files-app-bar',
+    //   hideAfterFinish: true,
+    //   showProgressDetails: true,
+    //   hideUploadButton: false,
+    //   hideRetryButton: false,
+    //   hidePauseResumeButton: false,
+    //   hideCancelButton: false,
+    //   doneButtonHandler: null,
+    //   locale: {
+    //     // TODO: Uppy l10n research
+    //   }
+    // })
+
+    uppy.on('upload-error', (file, error, response) => {
+      console.log('error with file:', file.id)
+      console.log('error message:', error)
+      this.onFileError(error.toString())
+    })
+
+    uppy.on('file-removed', () => {
+      uploadInputTarget.forEach((item) => {
+        item.value = null
+      })
+    })
+
+    uppy.on('complete', (result) => {
+      result.successful.forEach((file) => {
+        this.uploadedFiles.push(file)
+      })
+      uploadInputTarget.forEach((item) => {
+        item.value = null
+      })
+
+      console.log('successful files:', result.successful)
+      console.log('failed files:', result.failed)
+    })
   },
   methods: {
     resolvePublicLink() {
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/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-runtime/package.json b/packages/web-runtime/package.json
index 8f596afb104..9073e873f6f 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -30,14 +30,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/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/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/yarn.lock b/yarn.lock
index adf6a256120..566fcdba470 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.5
+  resolution: "@uppy/companion-client@npm:2.0.5"
+  dependencies:
+    "@uppy/utils": ^4.0.5
+    namespace-emitter: ^2.0.1
+  checksum: a68bbd4d7bb65b9eb2901ad409e4704662029e7b5f5c4d350cbbfeaf6e4995a0ff66cedfdaa31b1c46806398f446a196f33bab2877222feed0b10627cb539158
+  languageName: node
+  linkType: hard
+
+"@uppy/core@npm:^2.1.7":
+  version: 2.1.7
+  resolution: "@uppy/core@npm:2.1.7"
+  dependencies:
+    "@transloadit/prettier-bytes": 0.0.7
+    "@uppy/store-default": ^2.0.3
+    "@uppy/utils": ^4.0.5
+    lodash.throttle: ^4.1.1
+    mime-match: ^1.0.2
+    namespace-emitter: ^2.0.1
+    nanoid: ^3.1.25
+    preact: ^10.5.13
+  checksum: 161ecf4315fb3ff2db3ad7beceac5b94ca42e766d98658b62da9d10645c1fc9324f8c1949ff00637aef74adaac88a51e1f06cf47fbd47888679a0cc87871fa89
+  languageName: node
+  linkType: hard
+
+"@uppy/drop-target@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@uppy/drop-target@npm:1.1.1"
+  dependencies:
+    "@uppy/utils": ^4.0.3
+  peerDependencies:
+    "@uppy/core": ^2.0.0
+  checksum: 33825bbe77ac780c939886f0a9be91c6ce5a5b8f93b239b27ed428d78ccd57906e934ffcf2b9524fc0d2df1f6e31e353612fe26a56ed82dad4a1a527eca7f664
+  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.3, @uppy/utils@npm:^4.0.4, @uppy/utils@npm:^4.0.5":
+  version: 4.0.5
+  resolution: "@uppy/utils@npm:4.0.5"
+  dependencies:
+    lodash.throttle: ^4.1.1
+  checksum: 55c2522ae1bad09b8bb706c90bdb754e3c74c48738f8cb88437e726d8fe7103380caea8daa7016ce7d4dc73e99862f60a585a052291393a2d76ef67b3d5b44d8
+  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"
@@ -6323,8 +6424,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "files@workspace:packages/web-app-files"
   dependencies:
+    "@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
     copy-to-clipboard: ^3.3.1
-    vue2-dropzone: ^3.6.0
   languageName: unknown
   linkType: soft
 
@@ -9022,6 +9127,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 +9371,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 +10860,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"preact@npm:^10.5.13":
+  version: 10.6.4
+  resolution: "preact@npm:10.6.4"
+  checksum: 09c496bb3cbe231fb6ef218b44d29af53a1f4bf1ae2e5929ef0faf70f9ecffaa475b4459ef72dd8f0f5396c255172c7c26de5c7d2eb6f6849e36e724c7aa86b7
+  languageName: node
+  linkType: hard
+
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"
@@ -13151,7 +13279,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 +13695,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 +13825,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"
@@ -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"

From 093f9f7750c40b88401c49a865aed1e70f3e1a16 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Mon, 11 Apr 2022 15:57:49 +0200
Subject: [PATCH 02/23] WIP uppy

---
 packages/web-app-files/src/App.vue            |  13 +-
 .../src/components/AppBar/CreateAndUpload.vue | 464 ++++++++++++------
 .../components/AppBar/Upload/FileUpload.vue   |  18 +-
 .../web-app-files/src/views/FilesDrop.vue     | 247 ++++------
 packages/web-pkg/src/services/index.ts        |   1 +
 packages/web-pkg/src/services/uppy.ts         | 102 ++++
 packages/web-pkg/src/uppy/customDropTarget.js |  33 ++
 packages/web-pkg/src/uppy/customTus.js        |  15 +
 .../web-runtime/src/components/UploadInfo.vue | 161 ++++++
 .../web-runtime/src/layouts/Application.vue   |   5 +-
 10 files changed, 756 insertions(+), 303 deletions(-)
 create mode 100644 packages/web-pkg/src/services/uppy.ts
 create mode 100644 packages/web-pkg/src/uppy/customDropTarget.js
 create mode 100644 packages/web-pkg/src/uppy/customTus.js
 create mode 100644 packages/web-runtime/src/components/UploadInfo.vue

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index fb8aae9e5fd..efec0633844 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
@@ -62,7 +57,7 @@ export default defineComponent({
   },
 
   methods: {
-    ...mapActions('Files', ['dragOver', 'resetFileSelection']),
+    ...mapActions('Files', ['resetFileSelection']),
     ...mapActions('Files/sidebar', {
       closeSidebar: 'close',
       setActiveSidebarPanel: 'setActivePanel'
@@ -75,10 +70,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 a6d6a5c837f..a5a15520c99 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -70,11 +70,7 @@
         <translate>New folder</translate>
       </oc-button>
     </template>
-    <!-- PoC since the components don't get recognized on 
-    initial page rendering as (hidden) OcDrop elements -->
-    <folder-upload />
-    <file-upload />
-    <!-- <oc-button
+    <oc-button
       id="upload-menu-btn"
       key="upload-menu-btn-enabled"
       v-oc-tooltip="uploadButtonTooltip"
@@ -94,24 +90,19 @@
     >
       <oc-list id="upload-list">
         <li>
-          <folder-upload />
+          <folder-upload ref="folder-upload" />
         </li>
         <li>
-          <file-upload />
+          <file-upload ref="file-upload" btn-class="oc-width-1-1" />
         </li>
       </oc-list>
-    </oc-drop> -->
+    </oc-drop>
   </div>
 </template>
 
 <script>
 import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import pathUtil from 'path'
-import Uppy from '@uppy/core'
-import Tus from '@uppy/tus'
-import XHRUpload from '@uppy/xhr-upload'
-import StatusBar from '@uppy/status-bar'
-import DropTarget from '@uppy/drop-target'
 
 import MixinFileActions, { EDITOR_MODE_CREATE } from '../../mixins/fileActions'
 import { buildResource, buildWebDavFilesPath, buildWebDavSpacesPath } from '../../helpers/resources'
@@ -124,6 +115,9 @@ import { DavProperties, DavProperty } from 'web-pkg/src/constants'
 // TODO: Simplify to one UploadButton component and fill from here
 import FileUpload from './Upload/FileUpload.vue'
 import FolderUpload from './Upload/FolderUpload.vue'
+import CustomDropTarget from 'web-pkg/src/uppy/customDropTarget'
+import CustomTus from 'web-pkg/src/uppy/customTus'
+import { uppyService } from 'web-pkg/src/services'
 
 export default {
   components: {
@@ -145,7 +139,8 @@ export default {
   data: () => ({
     newFileAction: null,
     path: '',
-    fileFolderCreationLoading: false
+    fileFolderCreationLoading: false,
+    uppy: null
   }),
   computed: {
     ...mapGetters(['getToken', 'capabilities', 'configuration', 'newFileHandlers', 'user']),
@@ -247,130 +242,47 @@ export default {
           this.currentFolder.permissions.indexOf('M') >= 0) ||
         this.isPublicLocation
       )
-    }
-  },
-  mounted() {
-    // TODO: Clarify why not to use this.headers
-    const client = this.$client
-    const uppyHeaders = client.helpers.buildHeaders()
-
-    const uploadPath = this.$client.files.getFileUrl(
-      buildWebDavFilesPath(this.user.id, this.currentPath)
-    )
-
-    // might make sense to initialize an Uppy instance in the runtime?
-    // TODO: set debug to false
-    const uppy = new Uppy({ debug: true, autoProceed: true })
-
-    // TODO: Build headers differently in public context?
-    // if (this.publicPage()) { ... maybe use this.headers to obtain token ... }
-
-    // TODO: What about flaky capability loading and its implications?
-    if (this.capabilities.files.tus_support?.max_chunk_size > 0) {
-      const chunkSize =
-        this.capabilities.files.tus_support.max_chunk_size > 0 &&
-        this.configuration.uploadChunkSize !== Infinity
-          ? Math.max(
-              this.capabilities.files.tus_support.max_chunk_size,
-              this.configuration.uploadChunkSize
-            )
-          : this.configuration.uploadChunkSize
-
-      delete uppyHeaders['OCS-APIREQUEST']
+    },
 
-      uppy.use(Tus, {
-        endpoint: uploadPath,
-        headers: uppyHeaders,
-        chunkSize: chunkSize,
-        removeFingerprintOnSuccess: true,
-        overridePatchMethod: !!this.capabilities.files.tus_support.http_method_override,
-        retryDelays: [0, 3000, 5000, 10000, 20000]
-      })
-    } else {
-      console.log('uppy on oc10')
-      // for loop on event for multiple endpoints
-      // https://github.com/transloadit/uppy/issues/1790#issuecomment-581402293
-      uppy.use(XHRUpload, {
-        endpoint: uploadPath,
-        method: 'put',
-        headers: uppyHeaders
-      })
-    }
+    uploadPath() {
+      if (this.isPublicLocation) {
+        return this.$client.publicFiles.getFileUrl(this.currentPath)
+      }
 
-    // upload button handling (files & folders separately)
-    // doesn't recognize elements yet since they're tippy children, maybe use $refs?
-    const uploadInputTarget = document.querySelectorAll('.upload-input-target')
+      if (this.isSpacesProjectLocation) {
+        const path = buildWebDavSpacesPath(this.$route.params.storageId, this.currentPath)
+        return this.$client.files.getFileUrl(path)
+      }
 
-    uploadInputTarget.forEach((item) => {
-      item.addEventListener('change', (event) => {
-        const files = Array.from(event.target.files)
+      return this.$client.files.getFileUrl(buildWebDavFilesPath(this.user.id, this.currentPath))
+    }
+  },
+  watch: {
+    currentFolder: {
+      handler: async function (currentFolder) {
+        await this.$nextTick()
+        if (!currentFolder || !this.showActions) {
+          return
+        }
 
-        files.forEach((file) => {
-          try {
-            console.log('beginning upload for file:', file)
-            uppy.addFile({
-              source: 'file input',
-              name: file.name,
-              type: file.type,
-              data: file
-            })
-          } catch (err) {
-            console.error('error upload file:', file)
-            if (err.isRestriction) {
-              // handle restrictions
-              console.log('Restriction error:', err)
-            } else {
-              // handle other errors
-              console.error(err)
+        if (this.uppy) {
+          const uploadInputs = this.getUploadInputs()
+          uploadInputs.forEach((el) => {
+            const listenerRegistered = el.getAttribute('listener')
+            if (!listenerRegistered) {
+              this.addNewFileEventListener(el)
             }
-          }
-        })
-      })
-    })
-
-    // // upload via drag&drop handling
-    uppy.use(DropTarget, {
-      target: '#files-view'
-    })
-
-    uppy.use(StatusBar, {
-      id: 'StatusBar',
-      target: '#files-app-bar',
-      hideAfterFinish: true,
-      showProgressDetails: true,
-      hideUploadButton: false,
-      hideRetryButton: false,
-      hidePauseResumeButton: false,
-      hideCancelButton: false,
-      doneButtonHandler: null,
-      locale: {
-        // TODO: Uppy l10n research
-      }
-    })
-
-    uppy.on('upload-error', (file, error, response) => {
-      console.log('error with file:', file.id)
-      console.log('error message:', error)
-      this.onFileError(error.toString())
-    })
-
-    uppy.on('file-removed', () => {
-      uploadInputTarget.forEach((item) => {
-        item.value = null
-      })
-    })
-
-    uppy.on('complete', (result) => {
-      result.successful.forEach((file) => {
-        this.onFileSuccess(file)
-      })
-      uploadInputTarget.forEach((item) => {
-        item.value = null
-      })
-
-      console.log('successful files:', result.successful)
-      console.log('failed files:', result.failed)
-    })
+          })
+        } else {
+          this.initializeUppy()
+        }
+      }
+    }
+  },
+  mounted() {
+    if (this.showActions && !this.uppy) {
+      this.initializeUppy()
+    }
   },
   beforeDestroy() {
     // maybe bad that we close uppy this early, eventually on rerender even?
@@ -386,13 +298,21 @@ export default {
 
     async onFileSuccess(file) {
       try {
+        let pathFileWasUploadedTo = file.meta.currentPath
+        if (file.meta.relativePath) {
+          pathFileWasUploadedTo += file.meta.relativePath
+        }
+
+        const fileRoute = file.meta.route
+        const fileIsInCurrentPath = pathFileWasUploadedTo === this.currentPath
+
         if (file.name) {
           file = file.name
         }
 
         await this.$nextTick()
 
-        let path = pathUtil.join(this.currentPath, file)
+        let path = pathUtil.join(pathFileWasUploadedTo, file)
         let resource
 
         if (this.isPersonalLocation) {
@@ -410,15 +330,19 @@ export default {
         }
 
         resource = buildResource(resource)
+        this.$root.$emit('fileUploadedSuccessfully', resource, fileRoute)
 
-        this.UPSERT_RESOURCE(resource)
+        // 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
-          })
+          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)
@@ -733,6 +657,264 @@ export default {
       }
 
       return null
+    },
+
+    async addFilesToUppy(files) {
+      const conflicts = []
+      for (const file of files) {
+        const relativeFilePath = file.webkitRelativePath || file.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(files, conflicts)
+      } else {
+        await this.createDirectoryTree(files)
+        this.startUppyUpload(files)
+      }
+    },
+
+    async createDirectoryTree(files) {
+      const basePath = this.currentPath
+      const createdFolders = []
+      for (const file of files) {
+        const relativeFilePath = file.webkitRelativePath || file.relativePath || ''
+        const directory = relativeFilePath.substring(0, relativeFilePath.lastIndexOf('/'))
+        if (!directory || createdFolders.includes(directory)) {
+          continue
+        }
+
+        const relativeParts = directory.replace(/^\/+/, '').split('/')
+        // No need to load folder when it is either deep nested or the user changed paths in between
+        const buildFolderResource = relativeParts.length === 1 || basePath !== this.currentPath
+
+        if (this.publicPage()) {
+          await this.$client.publicFiles.createFolder(basePath, directory, this.publicLinkPassword)
+          if (buildFolderResource) {
+            let resource = await this.$client.publicFiles.getFileInfo(
+              `${basePath}${directory}`,
+              this.publicLinkPassword,
+              DavProperties.PublicLink
+            )
+            resource = buildResource(resource)
+            this.UPSERT_RESOURCE(resource)
+          }
+        } else {
+          const storageId = this.$route.params.storageId
+          const path = storageId
+            ? buildWebDavSpacesPath(storageId, `${basePath}${directory}`)
+            : buildWebDavFilesPath(this.user?.id, `${basePath}${directory}`)
+          await this.$client.files.createFolder(path)
+
+          if (buildFolderResource) {
+            let resource = await this.$client.files.fileInfo(path, DavProperties.Default)
+            resource = buildResource(resource)
+            this.UPSERT_RESOURCE(resource)
+          }
+        }
+
+        createdFolders.push(directory)
+      }
+    },
+
+    startUppyUpload(files) {
+      files.forEach((file) => {
+        const relativeFilePath = file.webkitRelativePath || file.relativePath || null
+        const directory = relativeFilePath
+          ? relativeFilePath.substring(0, relativeFilePath.lastIndexOf('/'))
+          : ''
+
+        let tusEndpoint
+        if (directory) {
+          tusEndpoint = `${this.uploadPath.replace(/\/+$/, '')}/${directory.replace(/^\/+/, '')}`
+        } else {
+          tusEndpoint = this.uploadPath
+        }
+
+        const item = this.$route.params.item ? `${this.$route.params.item}/${directory}` : directory
+        const route = {
+          ...this.$route,
+          params: { ...this.$route.params, item }
+        }
+
+        try {
+          this.uppy.addFile({
+            source: 'file input',
+            name: file.name,
+            type: file.type,
+            data: file,
+            meta: {
+              currentPath: this.currentPath,
+              relativePath: directory,
+              route,
+              tusEndpoint
+            }
+          })
+        } 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)
+          }
+        }
+      })
+    },
+
+    addNewFileEventListener(el) {
+      el.setAttribute('listener', true)
+      el.addEventListener('change', (event) => {
+        const files = Array.from(event.target.files)
+        this.addFilesToUppy(files)
+      })
+    },
+
+    getUploadInputs() {
+      const uploadInputs = []
+
+      if (this.$refs['file-upload']) {
+        uploadInputs.push(this.$refs['file-upload'].$refs.input)
+      }
+      if (this.$refs['folder-upload']) {
+        uploadInputs.push(this.$refs['folder-upload'].$refs.input)
+      }
+
+      return uploadInputs
+    },
+
+    initializeUppy() {
+      const uploadInputs = this.getUploadInputs()
+
+      this.uppy = uppyService.getUppyInstance({
+        uploadPath: this.uploadPath,
+        capabilities: this.capabilities,
+        configuration: this.configuration,
+        headers: this.headers,
+        $gettext: this.$gettext,
+        customTus: CustomTus
+      })
+
+      uploadInputs.forEach((el) => {
+        this.addNewFileEventListener(el)
+      })
+
+      this.uppy.use(CustomDropTarget, {
+        target: '#files-view',
+        addFilesToUppy: this.addFilesToUppy
+      })
+
+      this.uppy.on('file-added', (file) => {
+        if (this.uppy.getPlugin('XHRUpload')) {
+          const relativeFilePath = file.data.webkitRelativePath || file.data.relativePath || null
+          const filePath = relativeFilePath || file.name
+          this.uppy.setFileState(file.id, {
+            xhrUpload: {
+              endpoint: `${this.uploadPath.replace(/\/+$/, '')}/${filePath.replace(/^\/+/, '')}`
+            }
+          })
+        }
+      })
+
+      this.uppy.on('upload', ({ id, fileIDs }) => {
+        if (fileIDs.length) {
+          this.$root.$emit('fileUploadStarted')
+        }
+      })
+
+      this.uppy.on('upload-error', (file, error, response) => {
+        this.onFileError(error.toString())
+      })
+
+      this.uppy.on('file-removed', () => {
+        uploadInputs.forEach((item) => {
+          item.value = null
+        })
+      })
+
+      this.uppy.on('cancel-all', () => {
+        this.$root.$emit('fileUploadsCancelled')
+      })
+
+      this.uppy.on('complete', (result) => {
+        this.$root.$emit('fileUploadCompleted')
+
+        result.successful.forEach((file) => {
+          this.onFileSuccess(file)
+          this.uppy.removeFile(file.id)
+        })
+        uploadInputs.forEach((item) => {
+          item.value = null
+        })
+      })
+    },
+
+    displayOverwriteDialog(files, 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: async () => {
+          this.hideModal()
+          await this.createDirectoryTree(files)
+          this.startUppyUpload(files)
+        }
+      }
+
+      this.createModal(modal)
     }
   }
 }
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 a9e8eb7796d..83ffe588882 100644
--- a/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
@@ -1,8 +1,8 @@
 <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"
@@ -19,6 +19,20 @@
 
 <script>
 export default {
+  props: {
+    btnLabel: {
+      type: String,
+      required: false,
+      default: function () {
+        return this.$gettext('Files')
+      }
+    },
+    btnClass: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
   methods: {
     triggerUpload() {
       this.$refs.input.click()
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index 54420a38a0e..37d6edb64d8 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -11,11 +11,12 @@
       <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" />
-          <!-- needs uppy dropzone -->
-          <div id="files-drop-zone" class="uk-flex uk-flex-middle uk-flex-center uk-placeholder">
-            <oc-icon name="file_upload" />
-            <translate>Drop files here to upload or click to select file</translate>
-          </div>
+          <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
@@ -67,18 +68,20 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import { DavProperties, DavProperty } from 'web-pkg/src/constants'
 import { linkRoleUploaderFolder } from '../helpers/share'
 import { createLocationOperations, createLocationPublic } from '../router'
 
-import Uppy from '@uppy/core'
-import Tus from '@uppy/tus'
-import XHRUpload from '@uppy/xhr-upload'
-import StatusBar from '@uppy/status-bar'
+import { uppyService } from 'web-pkg/src/services'
+import FileUpload from '../components/AppBar/Upload/FileUpload.vue'
+import CustomTus from 'web-pkg/src/uppy/customTus'
 import DropTarget from '@uppy/drop-target'
 
 export default {
+  components: {
+    FileUpload
+  },
   data() {
     return {
       loading: true,
@@ -115,122 +118,98 @@ export default {
       return this.uploadedFilesChangeTracker && this.uploadedFiles.values()
     }
   },
-  mounted() {
-    this.resolvePublicLink()
+  watch: {
+    loading: {
+      handler: async function (value) {
+        if (!value) {
+          await this.$nextTick()
 
-    const client = this.$client
-    const uppyHeaders = client.helpers.buildHeaders()
+          const uppy = uppyService.getUppyInstance({
+            uploadPath: this.url,
+            capabilities: this.capabilities,
+            configuration: this.configuration,
+            headers: this.$client.helpers.buildHeaders(),
+            $gettext: this.$gettext,
+            customTus: CustomTus
+          })
 
-    // might make sense to initialize an Uppy instance in the runtime?
-    // TODO: set debug to false
-    const uppy = new Uppy({ debug: true, autoProceed: true })
+          this.$refs.fileUpload.$refs.input.addEventListener('change', (event) => {
+            const files = Array.from(event.target.files)
 
-    // TODO: Build headers differently in public context?
-    // if (this.publicPage()) { ... maybe use this.headers to obtain token ... }
+            files.forEach((file) => {
+              try {
+                uppy.addFile({
+                  source: 'file input',
+                  name: file.name,
+                  type: file.type,
+                  data: file
+                })
+              } catch (err) {
+                console.error('error upload file:', file)
+                if (err.isRestriction) {
+                  // handle restrictions
+                  console.log('Restriction error:', err)
+                } else {
+                  // handle other errors
+                  console.error(err)
+                }
+              }
+            })
+          })
 
-    // TODO: What about flaky capability loading and its implications?
-    // if (this.capabilities?.files.tus_support?.max_chunk_size > 0) {
-    //   const chunkSize =
-    //     this.capabilities.files.tus_support.max_chunk_size > 0 &&
-    //     this.configuration.uploadChunkSize !== Infinity
-    //       ? Math.max(
-    //           this.capabilities.files.tus_support.max_chunk_size,
-    //           this.configuration.uploadChunkSize
-    //         )
-    //       : this.configuration.uploadChunkSize
+          uppy.use(DropTarget, {
+            target: '#files-drop-container'
+          })
 
-    delete uppyHeaders['OCS-APIREQUEST']
+          uppy.on('file-added', (file) => {
+            if (uppy.getPlugin('XHRUpload')) {
+              const filePath = file.name
+              uppy.setFileState(file.id, {
+                xhrUpload: {
+                  endpoint: `${this.url.replace(/\/+$/, '')}/${filePath.replace(/^\/+/, '')}`
+                }
+              })
+            }
+          })
 
-    uppy.use(Tus, {
-      endpoint: this.url,
-      headers: uppyHeaders,
-      chunkSize: this.configuration.uploadChunkSize,
-      removeFingerprintOnSuccess: true,
-      overridePatchMethod: '',
-      retryDelays: [0, 3000, 5000, 10000, 20000]
-    })
-    // } else {
-    // uppy.use(XHRUpload, {
-    //   endpoint: this.url,
-    //   method: 'put',
-    //   headers: uppyHeaders
-    // })
-    // }
+          uppy.on('upload-error', (file, error, response) => {
+            console.error(error)
+            this.showMessage({
+              title: this.$gettext('Failed to upload'),
+              status: 'danger'
+            })
+          })
 
-    // // upload via drag&drop handling
-    uppy.use(DropTarget, {
-      target: '#files-drop-zone'
-    })
+          uppy.on('upload', ({ id, fileIDs }) => {
+            if (fileIDs.length) {
+              this.$root.$emit('fileUploadStarted')
+            }
+          })
 
-    // upload button handling (files & folders separately)
-    // doesn't recognize elements yet since they're tippy children, maybe use $refs?
-    const uploadInputTarget = document.getElementById('#files-drop-zone')
+          uppy.on('cancel-all', () => {
+            this.$root.$emit('fileUploadsCancelled')
+          })
 
-    uploadInputTarget.addEventListener('change', (event) => {
-      const files = Array.from(event.target.files)
+          uppy.on('complete', (result) => {
+            this.$root.$emit('fileUploadCompleted')
 
-      files.forEach((file) => {
-        try {
-          console.log('beginning upload for file:', file)
-          uppy.addFile({
-            source: 'file input',
-            name: file.name,
-            type: file.type,
-            data: file
+            result.successful.forEach((file) => {
+              this.$root.$emit('fileUploadedSuccessfully', file)
+              this.uploadedFiles.push(file)
+              uppy.removeFile(file.id)
+            })
           })
-        } catch (err) {
-          console.error('error upload file:', file)
-          if (err.isRestriction) {
-            // handle restrictions
-            console.log('Restriction error:', err)
-          } else {
-            // handle other errors
-            console.error(err)
-          }
         }
-      })
-    })
-
-    // uppy.use(StatusBar, {
-    //   id: 'StatusBar',
-    //   target: '#files-app-bar',
-    //   hideAfterFinish: true,
-    //   showProgressDetails: true,
-    //   hideUploadButton: false,
-    //   hideRetryButton: false,
-    //   hidePauseResumeButton: false,
-    //   hideCancelButton: false,
-    //   doneButtonHandler: null,
-    //   locale: {
-    //     // TODO: Uppy l10n research
-    //   }
-    // })
-
-    uppy.on('upload-error', (file, error, response) => {
-      console.log('error with file:', file.id)
-      console.log('error message:', error)
-      this.onFileError(error.toString())
-    })
-
-    uppy.on('file-removed', () => {
-      uploadInputTarget.forEach((item) => {
-        item.value = null
-      })
-    })
-
-    uppy.on('complete', (result) => {
-      result.successful.forEach((file) => {
-        this.uploadedFiles.push(file)
-      })
-      uploadInputTarget.forEach((item) => {
-        item.value = null
-      })
-
-      console.log('successful files:', result.successful)
-      console.log('failed files:', result.failed)
-    })
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.resolvePublicLink()
   },
   methods: {
+    ...mapActions(['showMessage']),
+
     resolvePublicLink() {
       this.loading = true
 
@@ -267,46 +246,14 @@ 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' })
-        })
-    },
 
     $_ocUploadingFileMessage(fileName) {
       const translated = this.$gettext('Uploading file "%{fileName}"')
       return this.$gettextInterpolate(translated, { fileName }, true)
+    },
+
+    triggerUpload() {
+      this.$refs.fileInput.click()
     }
   }
 }
@@ -320,4 +267,8 @@ export default {
     padding: var(--oc-space-xlarge);
   }
 }
+#fileUploadInput {
+  position: absolute;
+  left: -99999px;
+}
 </style>
diff --git a/packages/web-pkg/src/services/index.ts b/packages/web-pkg/src/services/index.ts
index 83dae7638cc..784b3ad68eb 100644
--- a/packages/web-pkg/src/services/index.ts
+++ b/packages/web-pkg/src/services/index.ts
@@ -1 +1,2 @@
 export * from './client'
+export * from './uppy'
diff --git a/packages/web-pkg/src/services/uppy.ts b/packages/web-pkg/src/services/uppy.ts
new file mode 100644
index 00000000000..70cb802f286
--- /dev/null
+++ b/packages/web-pkg/src/services/uppy.ts
@@ -0,0 +1,102 @@
+import XHRUpload from '@uppy/xhr-upload'
+import Uppy from '@uppy/core'
+import StatusBar from '@uppy/status-bar'
+
+// @TODO Initialize uppy globally with capabilities and configuration
+export class UppyService {
+  public getUppyInstance({
+    uploadPath,
+    configuration,
+    capabilities,
+    headers,
+    $gettext,
+    customTus // @FIXME Remove here, import the plugin instead... is not working for some reason
+  }): Uppy {
+    const uppy = new Uppy({
+      debug: true,
+      autoProceed: true
+    })
+
+    const tusSupport = UppyService.tusSupport(capabilities)
+
+    // TODO: What about flaky capability loading and its implications?
+    if (tusSupport) {
+      const chunkSize =
+        tusSupport && configuration.uploadChunkSize !== Infinity
+          ? Math.max(capabilities.files.tus_support.max_chunk_size, configuration.uploadChunkSize)
+          : configuration.uploadChunkSize
+
+      uppy.use(customTus, {
+        endpoint: uploadPath,
+        headers,
+        chunkSize: chunkSize,
+        removeFingerprintOnSuccess: true,
+        overridePatchMethod: !!capabilities.files.tus_support.http_method_override,
+        retryDelays: [0, 3000, 5000, 10000, 20000]
+      })
+    } else {
+      uppy.use(XHRUpload, {
+        endpoint: uploadPath,
+        method: 'put',
+        headers,
+        getResponseData() {
+          return {}
+        }
+      })
+    }
+
+    uppy.use(StatusBar, {
+      id: 'StatusBar',
+      target: '.upload-info-status-bar',
+      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')
+        }
+      }
+    })
+
+    return uppy
+  }
+
+  private static tusSupport(capabilities) {
+    return capabilities.files?.tus_support?.max_chunk_size > 0
+  }
+}
+
+export const uppyService = new UppyService()
diff --git a/packages/web-pkg/src/uppy/customDropTarget.js b/packages/web-pkg/src/uppy/customDropTarget.js
new file mode 100644
index 00000000000..e065e50c8d5
--- /dev/null
+++ b/packages/web-pkg/src/uppy/customDropTarget.js
@@ -0,0 +1,33 @@
+const DropTarget = require('@uppy/drop-target')
+
+/**
+ * Custom Drop Target plugin
+ *
+ * It adds the possibility to have a custom method for adding files to uppy.
+ */
+module.exports = class CustomDropTarget extends DropTarget {
+  addFiles = (files) => {
+    if (this.opts.addFilesToUppy) {
+      this.opts.addFilesToUppy(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 {
+      this.uppy.addFiles(descriptors)
+    } catch (err) {
+      this.uppy.log(err)
+    }
+  }
+}
diff --git a/packages/web-pkg/src/uppy/customTus.js b/packages/web-pkg/src/uppy/customTus.js
new file mode 100644
index 00000000000..7c34a208dbb
--- /dev/null
+++ b/packages/web-pkg/src/uppy/customTus.js
@@ -0,0 +1,15 @@
+const Tus = require('@uppy/tus')
+
+/**
+ * Custom Tus plugin
+ *
+ * It can set the upload endpoint dynamically per file.
+ */
+module.exports = class CustomTus extends Tus {
+  upload(file) {
+    if (file.meta.tusEndpoint) {
+      this.opts.endpoint = file.meta.tusEndpoint
+    }
+    return super.upload(file)
+  }
+}
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
new file mode 100644
index 00000000000..f5c5dc6bedb
--- /dev/null
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -0,0 +1,161 @@
+<template>
+  <div
+    id="upload-info"
+    class="oc-p-m oc-rounded oc-box-shadow-medium"
+    :class="{ 'oc-hidden': !showInfo }"
+  >
+    <div class="upload-info-title oc-flex oc-flex-between oc-flex-middle oc-mb-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 appearance="raw" @click="closeInfo">
+        <oc-icon name="close" />
+      </oc-button>
+    </div>
+    <div class="upload-info-status-bar" />
+    <div class="upload-info-successful-uploads">
+      <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="true"
+            :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'
+
+export default {
+  setup() {
+    return {
+      hasSpaces: useCapabilitySpacesEnabled()
+    }
+  },
+  data: () => ({
+    showInfo: false,
+    filesUploading: 0,
+    uploadCancelled: false,
+    successfulUploads: []
+  }),
+  computed: {
+    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')
+    }
+  },
+  created() {
+    this.$root.$on('fileUploadStarted', () => {
+      this.showInfo = true
+      this.filesUploading = this.filesUploading + 1
+      this.uploadCancelled = false
+    })
+    this.$root.$on('fileUploadCompleted', () => {
+      this.filesUploading = this.filesUploading - 1
+    })
+    this.$root.$on('fileUploadsCancelled', () => {
+      this.filesUploading = 0
+      this.uploadCancelled = true
+    })
+    this.$root.$on('fileUploadedSuccessfully', (file, route) => {
+      this.successfulUploads.push({ ...file, targetRoute: 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 {}
+      }
+
+      return {
+        name: targetRoute.name,
+        query: targetRoute.query,
+        params: {
+          item: path.replace(/^\//, ''),
+          ...targetRoute.params,
+          ...(storageId && { storageId })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#upload-info {
+  position: absolute;
+  right: 20px;
+  background: #fff;
+  bottom: 20px;
+  width: 300px;
+}
+</style>
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

From 2475b9394097a6696c8582bc4922efef82be4f1c Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 13 Apr 2022 15:29:33 +0200
Subject: [PATCH 03/23] Refactor uppy code

---
 .../src/components/AppBar/CreateAndUpload.vue | 321 +++---------------
 .../components/AppBar/Upload/FileUpload.vue   |   6 +
 .../components/AppBar/Upload/FolderUpload.vue |   6 +
 .../src/composables/upload/index.ts           |   1 +
 .../composables/upload/useUploadHelpers.ts    | 169 +++++++++
 .../web-app-files/src/helpers/user/types.ts   |   1 +
 .../web-app-files/src/views/FilesDrop.vue     | 203 ++++-------
 .../composables/capability/useCapability.ts   |   8 +
 packages/web-pkg/src/services/index.ts        |   1 -
 packages/web-pkg/src/services/uppy.ts         | 102 ------
 packages/web-pkg/src/uppy/customTus.js        |  15 -
 .../web-runtime/src/components/UploadInfo.vue |  28 +-
 .../src/composables/upload/index.ts           |   1 +
 .../upload/uppyPlugins/customDropTarget.ts}   |  14 +-
 .../upload/uppyPlugins/customTus.ts           |  14 +
 .../src/composables/upload/useUpload.ts       | 132 +++++++
 .../web-runtime/src/container/bootstrap.ts    |  10 +
 packages/web-runtime/src/index.ts             |   4 +-
 .../web-runtime/src/services/uppyService.ts   | 225 ++++++++++++
 19 files changed, 716 insertions(+), 545 deletions(-)
 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-pkg/src/services/uppy.ts
 delete mode 100644 packages/web-pkg/src/uppy/customTus.js
 create mode 100644 packages/web-runtime/src/composables/upload/index.ts
 rename packages/{web-pkg/src/uppy/customDropTarget.js => web-runtime/src/composables/upload/uppyPlugins/customDropTarget.ts} (53%)
 create mode 100644 packages/web-runtime/src/composables/upload/uppyPlugins/customTus.ts
 create mode 100644 packages/web-runtime/src/composables/upload/useUpload.ts
 create mode 100644 packages/web-runtime/src/services/uppyService.ts

diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index a5a15520c99..9c61a69dceb 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -100,7 +100,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import pathUtil from 'path'
 
@@ -115,18 +115,42 @@ import { DavProperties, DavProperty } from 'web-pkg/src/constants'
 // TODO: Simplify to one UploadButton component and fill from here
 import FileUpload from './Upload/FileUpload.vue'
 import FolderUpload from './Upload/FolderUpload.vue'
-import CustomDropTarget from 'web-pkg/src/uppy/customDropTarget'
-import CustomTus from 'web-pkg/src/uppy/customTus'
-import { uppyService } from 'web-pkg/src/services'
+import { defineComponent, getCurrentInstance, onMounted, onUnmounted } from '@vue/composition-api'
+import { UppyResource, useUpload } from 'web-runtime/src/composables/upload'
+import { useUploadHelpers } from '../../composables/upload/useUploadHelpers'
 
-export default {
+export default defineComponent({
   components: {
     FileUpload,
     FolderUpload
   },
   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)
+    })
+
     return {
+      ...useUpload({
+        uppyService
+      }),
+      ...useUploadHelpers(),
       isPersonalLocation: useActiveLocation(isLocationSpacesActive, 'files-spaces-personal-home'),
       isPublicLocation: useActiveLocation(isLocationPublicActive, 'files-public-files'),
       isSpacesProjectsLocation: useActiveLocation(isLocationSpacesActive, 'files-spaces-projects'),
@@ -139,8 +163,7 @@ export default {
   data: () => ({
     newFileAction: null,
     path: '',
-    fileFolderCreationLoading: false,
-    uppy: null
+    fileFolderCreationLoading: false
   }),
   computed: {
     ...mapGetters(['getToken', 'capabilities', 'configuration', 'newFileHandlers', 'user']),
@@ -156,29 +179,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)
     },
@@ -242,77 +242,27 @@ export default {
           this.currentFolder.permissions.indexOf('M') >= 0) ||
         this.isPublicLocation
       )
-    },
-
-    uploadPath() {
-      if (this.isPublicLocation) {
-        return this.$client.publicFiles.getFileUrl(this.currentPath)
-      }
-
-      if (this.isSpacesProjectLocation) {
-        const path = buildWebDavSpacesPath(this.$route.params.storageId, this.currentPath)
-        return this.$client.files.getFileUrl(path)
-      }
-
-      return this.$client.files.getFileUrl(buildWebDavFilesPath(this.user.id, this.currentPath))
-    }
-  },
-  watch: {
-    currentFolder: {
-      handler: async function (currentFolder) {
-        await this.$nextTick()
-        if (!currentFolder || !this.showActions) {
-          return
-        }
-
-        if (this.uppy) {
-          const uploadInputs = this.getUploadInputs()
-          uploadInputs.forEach((el) => {
-            const listenerRegistered = el.getAttribute('listener')
-            if (!listenerRegistered) {
-              this.addNewFileEventListener(el)
-            }
-          })
-        } else {
-          this.initializeUppy()
-        }
-      }
     }
   },
-  mounted() {
-    if (this.showActions && !this.uppy) {
-      this.initializeUppy()
-    }
-  },
-  beforeDestroy() {
-    // maybe bad that we close uppy this early, eventually on rerender even?
-    // currently very brittle, selecting a resource in the table
-    // results in a rerendering that logs an error since uppy is gone before it can close
-    // this.uppy.close()
-  },
   methods: {
     ...mapActions('Files', ['loadPreview', 'loadIndicators']),
     ...mapActions(['openFile', 'showMessage', 'createModal', 'setModalInputErrorMessage']),
     ...mapMutations('Files', ['UPSERT_RESOURCE']),
     ...mapMutations(['SET_QUOTA']),
 
-    async onFileSuccess(file) {
+    async onFileSuccess(file: UppyResource) {
       try {
-        let pathFileWasUploadedTo = file.meta.currentPath
-        if (file.meta.relativePath) {
-          pathFileWasUploadedTo += file.meta.relativePath
+        let pathFileWasUploadedTo = file.meta.currentFolder
+        if (file.meta.relativeFolder) {
+          pathFileWasUploadedTo += file.meta.relativeFolder
         }
 
         const fileRoute = file.meta.route
         const fileIsInCurrentPath = pathFileWasUploadedTo === this.currentPath
 
-        if (file.name) {
-          file = file.name
-        }
-
         await this.$nextTick()
 
-        let path = pathUtil.join(pathFileWasUploadedTo, file)
+        let path = pathUtil.join(pathFileWasUploadedTo, file.name)
         let resource
 
         if (this.isPersonalLocation) {
@@ -330,7 +280,7 @@ export default {
         }
 
         resource = buildResource(resource)
-        this.$root.$emit('fileUploadedSuccessfully', resource, fileRoute)
+        this.$uppyService.$emit('fileUploadedSuccessfully', resource, fileRoute)
 
         // Update table only if the file was uploaded to the current directory
         if (fileIsInCurrentPath) {
@@ -659,10 +609,11 @@ export default {
       return null
     },
 
-    async addFilesToUppy(files) {
+    onFilesSelected(files: File[]) {
       const conflicts = []
-      for (const file of files) {
-        const relativeFilePath = file.webkitRelativePath || file.relativePath || ''
+      const uppyResources: UppyResource[] = this.inputFilesToUppyFiles(files)
+      for (const file of uppyResources) {
+        const relativeFilePath = file.meta.relativeFilePath
         if (relativeFilePath) {
           const rootFolder = relativeFilePath.replace(/^\/+/, '').split('/')[0]
           const exists = this.files.find((f) => f.name === rootFolder)
@@ -688,190 +639,19 @@ export default {
       }
 
       if (conflicts.length) {
-        this.displayOverwriteDialog(files, conflicts)
+        this.displayOverwriteDialog(uppyResources, conflicts)
       } else {
-        await this.createDirectoryTree(files)
-        this.startUppyUpload(files)
+        this.handleUppyFileUpload(uppyResources)
       }
     },
 
-    async createDirectoryTree(files) {
-      const basePath = this.currentPath
-      const createdFolders = []
-      for (const file of files) {
-        const relativeFilePath = file.webkitRelativePath || file.relativePath || ''
-        const directory = relativeFilePath.substring(0, relativeFilePath.lastIndexOf('/'))
-        if (!directory || createdFolders.includes(directory)) {
-          continue
-        }
-
-        const relativeParts = directory.replace(/^\/+/, '').split('/')
-        // No need to load folder when it is either deep nested or the user changed paths in between
-        const buildFolderResource = relativeParts.length === 1 || basePath !== this.currentPath
-
-        if (this.publicPage()) {
-          await this.$client.publicFiles.createFolder(basePath, directory, this.publicLinkPassword)
-          if (buildFolderResource) {
-            let resource = await this.$client.publicFiles.getFileInfo(
-              `${basePath}${directory}`,
-              this.publicLinkPassword,
-              DavProperties.PublicLink
-            )
-            resource = buildResource(resource)
-            this.UPSERT_RESOURCE(resource)
-          }
-        } else {
-          const storageId = this.$route.params.storageId
-          const path = storageId
-            ? buildWebDavSpacesPath(storageId, `${basePath}${directory}`)
-            : buildWebDavFilesPath(this.user?.id, `${basePath}${directory}`)
-          await this.$client.files.createFolder(path)
-
-          if (buildFolderResource) {
-            let resource = await this.$client.files.fileInfo(path, DavProperties.Default)
-            resource = buildResource(resource)
-            this.UPSERT_RESOURCE(resource)
-          }
-        }
-
-        createdFolders.push(directory)
-      }
+    async handleUppyFileUpload(files: UppyResource[]) {
+      await this.createDirectoryTree(files)
+      await this.updateStoreForCreatedFolders(files)
+      this.$uppyService.uploadFiles(files)
     },
 
-    startUppyUpload(files) {
-      files.forEach((file) => {
-        const relativeFilePath = file.webkitRelativePath || file.relativePath || null
-        const directory = relativeFilePath
-          ? relativeFilePath.substring(0, relativeFilePath.lastIndexOf('/'))
-          : ''
-
-        let tusEndpoint
-        if (directory) {
-          tusEndpoint = `${this.uploadPath.replace(/\/+$/, '')}/${directory.replace(/^\/+/, '')}`
-        } else {
-          tusEndpoint = this.uploadPath
-        }
-
-        const item = this.$route.params.item ? `${this.$route.params.item}/${directory}` : directory
-        const route = {
-          ...this.$route,
-          params: { ...this.$route.params, item }
-        }
-
-        try {
-          this.uppy.addFile({
-            source: 'file input',
-            name: file.name,
-            type: file.type,
-            data: file,
-            meta: {
-              currentPath: this.currentPath,
-              relativePath: directory,
-              route,
-              tusEndpoint
-            }
-          })
-        } 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)
-          }
-        }
-      })
-    },
-
-    addNewFileEventListener(el) {
-      el.setAttribute('listener', true)
-      el.addEventListener('change', (event) => {
-        const files = Array.from(event.target.files)
-        this.addFilesToUppy(files)
-      })
-    },
-
-    getUploadInputs() {
-      const uploadInputs = []
-
-      if (this.$refs['file-upload']) {
-        uploadInputs.push(this.$refs['file-upload'].$refs.input)
-      }
-      if (this.$refs['folder-upload']) {
-        uploadInputs.push(this.$refs['folder-upload'].$refs.input)
-      }
-
-      return uploadInputs
-    },
-
-    initializeUppy() {
-      const uploadInputs = this.getUploadInputs()
-
-      this.uppy = uppyService.getUppyInstance({
-        uploadPath: this.uploadPath,
-        capabilities: this.capabilities,
-        configuration: this.configuration,
-        headers: this.headers,
-        $gettext: this.$gettext,
-        customTus: CustomTus
-      })
-
-      uploadInputs.forEach((el) => {
-        this.addNewFileEventListener(el)
-      })
-
-      this.uppy.use(CustomDropTarget, {
-        target: '#files-view',
-        addFilesToUppy: this.addFilesToUppy
-      })
-
-      this.uppy.on('file-added', (file) => {
-        if (this.uppy.getPlugin('XHRUpload')) {
-          const relativeFilePath = file.data.webkitRelativePath || file.data.relativePath || null
-          const filePath = relativeFilePath || file.name
-          this.uppy.setFileState(file.id, {
-            xhrUpload: {
-              endpoint: `${this.uploadPath.replace(/\/+$/, '')}/${filePath.replace(/^\/+/, '')}`
-            }
-          })
-        }
-      })
-
-      this.uppy.on('upload', ({ id, fileIDs }) => {
-        if (fileIDs.length) {
-          this.$root.$emit('fileUploadStarted')
-        }
-      })
-
-      this.uppy.on('upload-error', (file, error, response) => {
-        this.onFileError(error.toString())
-      })
-
-      this.uppy.on('file-removed', () => {
-        uploadInputs.forEach((item) => {
-          item.value = null
-        })
-      })
-
-      this.uppy.on('cancel-all', () => {
-        this.$root.$emit('fileUploadsCancelled')
-      })
-
-      this.uppy.on('complete', (result) => {
-        this.$root.$emit('fileUploadCompleted')
-
-        result.successful.forEach((file) => {
-          this.onFileSuccess(file)
-          this.uppy.removeFile(file.id)
-        })
-        uploadInputs.forEach((item) => {
-          item.value = null
-        })
-      })
-    },
-
-    displayOverwriteDialog(files, conflicts) {
+    displayOverwriteDialog(files: UppyResource[], conflicts) {
       const title = this.$ngettext(
         'File already exists',
         'Some files already exist',
@@ -907,17 +687,16 @@ export default {
         cancelText: this.$gettext('Cancel'),
         confirmText: isVersioningEnabled ? this.$gettext('Create') : this.$gettext('Overwrite'),
         onCancel: this.hideModal,
-        onConfirm: async () => {
+        onConfirm: () => {
           this.hideModal()
-          await this.createDirectoryTree(files)
-          this.startUppyUpload(files)
+          this.handleUppyFileUpload(files)
         }
       }
 
       this.createModal(modal)
     }
   }
-}
+})
 </script>
 <style lang="scss" scoped>
 #create-list {
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 83ffe588882..7c2d67a1e2f 100644
--- a/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
@@ -33,6 +33,12 @@ export default {
       default: ''
     }
   },
+  mounted() {
+    this.$uppyService.registerUploadInput(this.$refs.input)
+  },
+  beforeDestroy() {
+    this.$uppyService.removeUploadInput(this.$refs.input.id)
+  },
   methods: {
     triggerUpload() {
       this.$refs.input.click()
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 454040d47b7..4712415c67b 100644
--- a/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue
@@ -21,6 +21,12 @@
 
 <script>
 export default {
+  mounted() {
+    this.$uppyService.registerUploadInput(this.$refs.input)
+  },
+  beforeDestroy() {
+    this.$uppyService.removeUploadInput(this.$refs.input.id)
+  },
   methods: {
     triggerUpload() {
       this.$refs.input.click()
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..7e3692274ba
--- /dev/null
+++ b/packages/web-app-files/src/composables/upload/index.ts
@@ -0,0 +1 @@
+export * from './useUpload'
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..026c4d1b8eb
--- /dev/null
+++ b/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
@@ -0,0 +1,169 @@
+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) {
+      const currentFolder = file.meta.currentFolder
+      const directory = file.meta.relativeFolder
+
+      if (!directory || fetchedFolders.includes(directory)) {
+        continue
+      }
+
+      const relativeParts = directory.replace(/^\/+/, '').split('/')
+      // No need to load folder when it is either deep nested or the user changed paths in between
+      const buildFolderResource = relativeParts.length === 1
+
+      if (buildFolderResource) {
+        let resource
+
+        if (unref(isPublicLocation)) {
+          resource = await client.publicFiles.getFileInfo(
+            `${currentFolder}${directory}`,
+            unref(publicLinkPassword),
+            DavProperties.PublicLink
+          )
+        } else {
+          resource = await client.files.fileInfo(file.meta.webDavPath, DavProperties.Default)
+        }
+        resource = buildResource(resource)
+        store.commit('Files/UPSERT_RESOURCE', resource)
+        fetchedFolders.push(directory)
+      }
+    }
+  }
+}
+
+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) {
+      const relativeFilePath = file.webkitRelativePath || (file as any).relativePath || null
+      const directory = relativeFilePath
+        ? relativeFilePath.substring(0, relativeFilePath.lastIndexOf('/'))
+        : ''
+
+      let tusEndpoint
+      if (directory) {
+        tusEndpoint = `${unref(uploadPath).replace(/\/+$/, '')}/${directory.replace(/^\/+/, '')}`
+      } else {
+        tusEndpoint = unref(uploadPath)
+      }
+
+      const item = params.item ? `${params.item}/${directory}` : directory
+      const fileRoute = {
+        ...unref(route),
+        params: { ...params, item }
+      }
+
+      const storageId = params.storageId
+      const webDavPath = storageId
+        ? buildWebDavSpacesPath(storageId, `${currentFolder}${directory}`)
+        : buildWebDavFilesPath(unref(user)?.id, `${currentFolder}${directory}`)
+
+      uppyFiles.push({
+        source: 'file input',
+        name: file.name,
+        type: file.type,
+        data: file,
+        meta: {
+          currentFolder,
+          relativeFolder: directory,
+          relativeFilePath,
+          route: fileRoute,
+          tusEndpoint,
+          webDavPath
+        }
+      })
+    }
+
+    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/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index 37d6edb64d8..3106f1ffc61 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -19,40 +19,6 @@
           />
           <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>
@@ -73,21 +39,49 @@ import { DavProperties, DavProperty } from 'web-pkg/src/constants'
 import { linkRoleUploaderFolder } from '../helpers/share'
 import { createLocationOperations, createLocationPublic } from '../router'
 
-import { uppyService } from 'web-pkg/src/services'
 import FileUpload from '../components/AppBar/Upload/FileUpload.vue'
-import CustomTus from 'web-pkg/src/uppy/customTus'
-import DropTarget from '@uppy/drop-target'
+import {
+  getCurrentInstance,
+  onMounted,
+  onUnmounted
+} from '@vue/composition-api/dist/vue-composition-api'
+import { useUpload } from 'web-runtime/src/composables/upload'
 
 export default {
   components: {
     FileUpload
   },
+  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-drop-container',
+        uppyService
+      })
+    })
+
+    onUnmounted(() => {
+      uppyService.$off('filesSelected', instance.onFilesSelected)
+      uppyService.$off('uploadSuccess', instance.onFileSuccess)
+      uppyService.$off('uploadError', instance.onFileError)
+    })
+
+    return {
+      ...useUpload({
+        uppyService
+      })
+    }
+  },
   data() {
     return {
       loading: true,
-      errorMessage: null,
-      uploadedFiles: [],
-      uploadedFilesChangeTracker: 0
+      errorMessage: null
     }
   },
   computed: {
@@ -113,95 +107,6 @@ export default {
     },
     url() {
       return this.$client.publicFiles.getFileUrl(this.publicLinkToken) + '/'
-    },
-    getUploadedFiles() {
-      return this.uploadedFilesChangeTracker && this.uploadedFiles.values()
-    }
-  },
-  watch: {
-    loading: {
-      handler: async function (value) {
-        if (!value) {
-          await this.$nextTick()
-
-          const uppy = uppyService.getUppyInstance({
-            uploadPath: this.url,
-            capabilities: this.capabilities,
-            configuration: this.configuration,
-            headers: this.$client.helpers.buildHeaders(),
-            $gettext: this.$gettext,
-            customTus: CustomTus
-          })
-
-          this.$refs.fileUpload.$refs.input.addEventListener('change', (event) => {
-            const files = Array.from(event.target.files)
-
-            files.forEach((file) => {
-              try {
-                uppy.addFile({
-                  source: 'file input',
-                  name: file.name,
-                  type: file.type,
-                  data: file
-                })
-              } catch (err) {
-                console.error('error upload file:', file)
-                if (err.isRestriction) {
-                  // handle restrictions
-                  console.log('Restriction error:', err)
-                } else {
-                  // handle other errors
-                  console.error(err)
-                }
-              }
-            })
-          })
-
-          uppy.use(DropTarget, {
-            target: '#files-drop-container'
-          })
-
-          uppy.on('file-added', (file) => {
-            if (uppy.getPlugin('XHRUpload')) {
-              const filePath = file.name
-              uppy.setFileState(file.id, {
-                xhrUpload: {
-                  endpoint: `${this.url.replace(/\/+$/, '')}/${filePath.replace(/^\/+/, '')}`
-                }
-              })
-            }
-          })
-
-          uppy.on('upload-error', (file, error, response) => {
-            console.error(error)
-            this.showMessage({
-              title: this.$gettext('Failed to upload'),
-              status: 'danger'
-            })
-          })
-
-          uppy.on('upload', ({ id, fileIDs }) => {
-            if (fileIDs.length) {
-              this.$root.$emit('fileUploadStarted')
-            }
-          })
-
-          uppy.on('cancel-all', () => {
-            this.$root.$emit('fileUploadsCancelled')
-          })
-
-          uppy.on('complete', (result) => {
-            this.$root.$emit('fileUploadCompleted')
-
-            result.successful.forEach((file) => {
-              this.$root.$emit('fileUploadedSuccessfully', file)
-              this.uploadedFiles.push(file)
-              uppy.removeFile(file.id)
-            })
-          })
-        }
-      },
-      immediate: true
     }
   },
   mounted() {
@@ -247,13 +152,31 @@ export default {
         })
     },
 
-    $_ocUploadingFileMessage(fileName) {
-      const translated = this.$gettext('Uploading file "%{fileName}"')
-      return this.$gettextInterpolate(translated, { fileName }, true)
+    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)
     },
 
-    triggerUpload() {
-      this.$refs.fileInput.click()
+    onFileSuccess(file) {
+      this.$uppyService.$emit('fileUploadedSuccessfully', file)
+    },
+
+    onFileError(error) {
+      console.error(error)
+      this.showMessage({
+        title: this.$gettext('Failed to upload'),
+        status: 'danger'
+      })
     }
   }
 }
@@ -261,14 +184,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);
-  }
-}
-#fileUploadInput {
-  position: absolute;
-  left: -99999px;
+  background: transparent;
+  border: 1px dashed var(--oc-color-input-border);
+  margin: var(--oc-space-xlarge);
 }
 </style>
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-pkg/src/services/index.ts b/packages/web-pkg/src/services/index.ts
index 784b3ad68eb..83dae7638cc 100644
--- a/packages/web-pkg/src/services/index.ts
+++ b/packages/web-pkg/src/services/index.ts
@@ -1,2 +1 @@
 export * from './client'
-export * from './uppy'
diff --git a/packages/web-pkg/src/services/uppy.ts b/packages/web-pkg/src/services/uppy.ts
deleted file mode 100644
index 70cb802f286..00000000000
--- a/packages/web-pkg/src/services/uppy.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import XHRUpload from '@uppy/xhr-upload'
-import Uppy from '@uppy/core'
-import StatusBar from '@uppy/status-bar'
-
-// @TODO Initialize uppy globally with capabilities and configuration
-export class UppyService {
-  public getUppyInstance({
-    uploadPath,
-    configuration,
-    capabilities,
-    headers,
-    $gettext,
-    customTus // @FIXME Remove here, import the plugin instead... is not working for some reason
-  }): Uppy {
-    const uppy = new Uppy({
-      debug: true,
-      autoProceed: true
-    })
-
-    const tusSupport = UppyService.tusSupport(capabilities)
-
-    // TODO: What about flaky capability loading and its implications?
-    if (tusSupport) {
-      const chunkSize =
-        tusSupport && configuration.uploadChunkSize !== Infinity
-          ? Math.max(capabilities.files.tus_support.max_chunk_size, configuration.uploadChunkSize)
-          : configuration.uploadChunkSize
-
-      uppy.use(customTus, {
-        endpoint: uploadPath,
-        headers,
-        chunkSize: chunkSize,
-        removeFingerprintOnSuccess: true,
-        overridePatchMethod: !!capabilities.files.tus_support.http_method_override,
-        retryDelays: [0, 3000, 5000, 10000, 20000]
-      })
-    } else {
-      uppy.use(XHRUpload, {
-        endpoint: uploadPath,
-        method: 'put',
-        headers,
-        getResponseData() {
-          return {}
-        }
-      })
-    }
-
-    uppy.use(StatusBar, {
-      id: 'StatusBar',
-      target: '.upload-info-status-bar',
-      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')
-        }
-      }
-    })
-
-    return uppy
-  }
-
-  private static tusSupport(capabilities) {
-    return capabilities.files?.tus_support?.max_chunk_size > 0
-  }
-}
-
-export const uppyService = new UppyService()
diff --git a/packages/web-pkg/src/uppy/customTus.js b/packages/web-pkg/src/uppy/customTus.js
deleted file mode 100644
index 7c34a208dbb..00000000000
--- a/packages/web-pkg/src/uppy/customTus.js
+++ /dev/null
@@ -1,15 +0,0 @@
-const Tus = require('@uppy/tus')
-
-/**
- * Custom Tus plugin
- *
- * It can set the upload endpoint dynamically per file.
- */
-module.exports = class CustomTus extends Tus {
-  upload(file) {
-    if (file.meta.tusEndpoint) {
-      this.opts.endpoint = file.meta.tusEndpoint
-    }
-    return super.upload(file)
-  }
-}
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index f5c5dc6bedb..70b8c8ff550 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -91,20 +91,26 @@ export default {
       return this.$gettext('Upload completed')
     }
   },
+  mounted() {
+    this.$uppyService.useStatusBar({
+      targetSelector: '.upload-info-status-bar',
+      getText: this.$gettext
+    })
+  },
   created() {
-    this.$root.$on('fileUploadStarted', () => {
+    this.$uppyService.$on('uploadStarted', () => {
       this.showInfo = true
       this.filesUploading = this.filesUploading + 1
       this.uploadCancelled = false
     })
-    this.$root.$on('fileUploadCompleted', () => {
+    this.$uppyService.$on('uploadCompleted', () => {
       this.filesUploading = this.filesUploading - 1
     })
-    this.$root.$on('fileUploadsCancelled', () => {
+    this.$uppyService.$on('uploadCancelled', () => {
       this.filesUploading = 0
       this.uploadCancelled = true
     })
-    this.$root.$on('fileUploadedSuccessfully', (file, route) => {
+    this.$uppyService.$on('fileUploadedSuccessfully', (file, route) => {
       this.successfulUploads.push({ ...file, targetRoute: route })
     })
   },
@@ -136,15 +142,21 @@ export default {
         return {}
       }
 
-      return {
+      const strippedPath = path.replace(/^\//, '')
+      const route = {
         name: targetRoute.name,
         query: targetRoute.query,
         params: {
-          item: path.replace(/^\//, ''),
-          ...targetRoute.params,
-          ...(storageId && { storageId })
+          ...(storageId && path && { storageId })
         }
       }
+
+      if (strippedPath) {
+        route.params = { ...targetRoute.params }
+        route.params.item = strippedPath
+      }
+
+      return route
     }
   }
 }
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-pkg/src/uppy/customDropTarget.js b/packages/web-runtime/src/composables/upload/uppyPlugins/customDropTarget.ts
similarity index 53%
rename from packages/web-pkg/src/uppy/customDropTarget.js
rename to packages/web-runtime/src/composables/upload/uppyPlugins/customDropTarget.ts
index e065e50c8d5..79591547abe 100644
--- a/packages/web-pkg/src/uppy/customDropTarget.js
+++ b/packages/web-runtime/src/composables/upload/uppyPlugins/customDropTarget.ts
@@ -1,14 +1,18 @@
-const DropTarget = require('@uppy/drop-target')
+import DropTarget from '@uppy/drop-target'
 
 /**
  * Custom Drop Target plugin
  *
  * It adds the possibility to have a custom method for adding files to uppy.
  */
-module.exports = class CustomDropTarget extends DropTarget {
+export class CustomDropTarget extends DropTarget {
   addFiles = (files) => {
-    if (this.opts.addFilesToUppy) {
-      this.opts.addFilesToUppy(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
     }
 
@@ -25,6 +29,8 @@ module.exports = class CustomDropTarget extends DropTarget {
     })
 
     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..798c35f042b
--- /dev/null
+++ b/packages/web-runtime/src/composables/upload/useUpload.ts
@@ -0,0 +1,132 @@
+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'
+
+// FIXME: properly extend type from AddFileOptions<TMeta extends IndexedObject<any> = Record<string, unknown>>
+export interface UppyResource {
+  id?: string
+  source: string
+  name: string
+  type: string
+  data: Blob
+  meta: {
+    currentFolder: string
+    relativeFolder: string
+    relativeFilePath: string
+    route: Route
+    tusEndpoint: string
+    webDavPath: 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 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)) {
+      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,
+    () => {
+      if (unref(uppyOptions).isTusSupported) {
+        options.uppyService.useTus(unref(uppyOptions) as any)
+        return
+      }
+      options.uppyService.useXhr(unref(uppyOptions).headers 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
+
+      // @TODO check common prefixes
+      if (!directory || createdFolders.includes(directory)) {
+        continue
+      }
+
+      if (unref(isPublicLocation)) {
+        await client.publicFiles.createFolder(currentFolder, directory, unref(publicLinkPassword))
+      } else {
+        await client.files.createFolder(file.meta.webDavPath)
+      }
+
+      createdFolders.push(directory)
+    }
+  }
+}
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/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/services/uppyService.ts b/packages/web-runtime/src/services/uppyService.ts
new file mode 100644
index 00000000000..0ec9002032b
--- /dev/null
+++ b/packages/web-runtime/src/services/uppyService.ts
@@ -0,0 +1,225 @@
+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({
+      debug: true, // @TODO
+      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, 3000, 5000, 10000, 20000]
+    }
+
+    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,
+      getResponseData() {
+        return {}
+      }
+    }
+
+    const tusPlugin = this.uppy.getPlugin('XHRUpload')
+    if (tusPlugin) {
+      tusPlugin.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
+    })
+  }
+
+  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')
+        }
+      }
+    })
+  }
+
+  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)
+        console.log('SUCCESS FOR: ', file.name)
+        this.uppy.removeFile(file.id)
+      })
+
+      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')) {
+        this.uppy.setFileState(addedFile.id, {
+          xhrUpload: {
+            endpoint: `${addedFile.meta.tusEndpoint.replace(/\/+$/, '')}/${addedFile.name}`
+          }
+        })
+      }
+    })
+    this.uppy.on('upload-error', () => {
+      this.$emit('uploadError')
+    })
+  }
+
+  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(elementId: string) {
+    this.uploadInputs = this.uploadInputs.filter((el) => el.id !== elementId)
+  }
+
+  uploadFiles(files: UppyResource[]) {
+    files.forEach((file) => {
+      try {
+        console.log('START UPLOAD FOR: ', file.name)
+        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)
+        }
+      }
+    })
+  }
+}

From b75b450b936e6d0d7f0d62c20deebb8efb7012d8 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 13 Apr 2022 15:43:45 +0200
Subject: [PATCH 04/23] Update changelog item, move uppy dependencies to
 web-runtime package

---
 .../unreleased/enhancement-resumeable-uploads | 11 ++--
 packages/web-app-files/package.json           |  5 --
 packages/web-runtime/package.json             |  5 ++
 yarn.lock                                     | 50 +++++++++----------
 4 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/changelog/unreleased/enhancement-resumeable-uploads b/changelog/unreleased/enhancement-resumeable-uploads
index a5957628026..df429090a42 100644
--- a/changelog/unreleased/enhancement-resumeable-uploads
+++ b/changelog/unreleased/enhancement-resumeable-uploads
@@ -1,9 +1,12 @@
-Enhancement: Resumeable uploads
+Enhancement: Resumable uploads
 
-Draft:
-- Introduced resumeable (depending on backend capabilities)
+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.
+- 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 6ebc709d445..c8acbc83df6 100644
--- a/packages/web-app-files/package.json
+++ b/packages/web-app-files/package.json
@@ -4,11 +4,6 @@
   "description": "ownCloud web files",
   "license": "AGPL-3.0",
   "dependencies": {
-    "@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",
     "copy-to-clipboard": "^3.3.1"
   }
 }
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index 9073e873f6f..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",
diff --git a/yarn.lock b/yarn.lock
index 566fcdba470..39745305292 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2747,39 +2747,39 @@ __metadata:
   linkType: hard
 
 "@uppy/companion-client@npm:^2.0.4, @uppy/companion-client@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "@uppy/companion-client@npm:2.0.5"
+  version: 2.0.6
+  resolution: "@uppy/companion-client@npm:2.0.6"
   dependencies:
-    "@uppy/utils": ^4.0.5
+    "@uppy/utils": ^4.0.6
     namespace-emitter: ^2.0.1
-  checksum: a68bbd4d7bb65b9eb2901ad409e4704662029e7b5f5c4d350cbbfeaf6e4995a0ff66cedfdaa31b1c46806398f446a196f33bab2877222feed0b10627cb539158
+  checksum: 2a60c70a280b4c7d898d5c0b4b58b0088dc4dc2937b7cf426c6a29a9a404a9db218fa6b909f892eb8a886106882943e2ccfc05b309fa760d90bef76039bc7b52
   languageName: node
   linkType: hard
 
 "@uppy/core@npm:^2.1.7":
-  version: 2.1.7
-  resolution: "@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.5
+    "@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: 161ecf4315fb3ff2db3ad7beceac5b94ca42e766d98658b62da9d10645c1fc9324f8c1949ff00637aef74adaac88a51e1f06cf47fbd47888679a0cc87871fa89
+  checksum: 2c4e1febef1cd7ef841aa9634773fa7eccc9737b34412152964ff384a0ced32b85cadc3532de7de7c74ae7da8887d2e8accd7e5b9f1df40cdec72e65441f3aff
   languageName: node
   linkType: hard
 
 "@uppy/drop-target@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "@uppy/drop-target@npm:1.1.1"
+  version: 1.1.2
+  resolution: "@uppy/drop-target@npm:1.1.2"
   dependencies:
-    "@uppy/utils": ^4.0.3
+    "@uppy/utils": ^4.0.5
   peerDependencies:
-    "@uppy/core": ^2.0.0
-  checksum: 33825bbe77ac780c939886f0a9be91c6ce5a5b8f93b239b27ed428d78ccd57906e934ffcf2b9524fc0d2df1f6e31e353612fe26a56ed82dad4a1a527eca7f664
+    "@uppy/core": ^2.1.6
+  checksum: fc237303e0377182ec72288ade6fca9b3a6ee4344ff4930844efb460d3768b6273be3982c28726c8b134fc2966ea98d129e003ffaa96f1254d0f004d75726b2a
   languageName: node
   linkType: hard
 
@@ -2818,12 +2818,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@uppy/utils@npm:^4.0.3, @uppy/utils@npm:^4.0.4, @uppy/utils@npm:^4.0.5":
-  version: 4.0.5
-  resolution: "@uppy/utils@npm:4.0.5"
+"@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: 55c2522ae1bad09b8bb706c90bdb754e3c74c48738f8cb88437e726d8fe7103380caea8daa7016ce7d4dc73e99862f60a585a052291393a2d76ef67b3d5b44d8
+  checksum: 8773c4b1d742d65237c48c0575f1a933a20ffdcd8da462141b19649c027b0b88e4aa5dcb26ead1e830c967b904e51315fb61ea72ee0273614b463122d2b63066
   languageName: node
   linkType: hard
 
@@ -6424,11 +6424,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "files@workspace:packages/web-app-files"
   dependencies:
-    "@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
     copy-to-clipboard: ^3.3.1
   languageName: unknown
   linkType: soft
@@ -10861,9 +10856,9 @@ __metadata:
   linkType: hard
 
 "preact@npm:^10.5.13":
-  version: 10.6.4
-  resolution: "preact@npm:10.6.4"
-  checksum: 09c496bb3cbe231fb6ef218b44d29af53a1f4bf1ae2e5929ef0faf70f9ecffaa475b4459ef72dd8f0f5396c255172c7c26de5c7d2eb6f6849e36e724c7aa86b7
+  version: 10.7.1
+  resolution: "preact@npm:10.7.1"
+  checksum: e99d08bd38372e78ce1c84e68685cad66adf076bd95069bc8bcd32c9903a4df09c01d5b04aad849527362b67cc2c09446b647f72de4e67d0578fdea0f904f28f
   languageName: node
   linkType: hard
 
@@ -13928,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

From c885318b659a68e16ae3f9adf19761dd7d94bfbb Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 13 Apr 2022 16:12:00 +0200
Subject: [PATCH 05/23] Fix unit tests

---
 .../src/composables/upload/index.ts           |   2 +-
 .../components/AppBar/Upload/FileDrop.spec.js | 110 -------------
 .../AppBar/Upload/FileUpload.spec.js          |  32 +---
 .../AppBar/Upload/FolderUpload.spec.js        |  31 +---
 .../web-app-files/tests/unit/mixins.spec.js   |  37 -----
 .../tests/unit/views/FilesDrop.spec.js        | 130 +++------------
 .../__snapshots__/FilesDrop.spec.js.snap      | 151 +-----------------
 7 files changed, 39 insertions(+), 454 deletions(-)
 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

diff --git a/packages/web-app-files/src/composables/upload/index.ts b/packages/web-app-files/src/composables/upload/index.ts
index 7e3692274ba..a0ccc7142e7 100644
--- a/packages/web-app-files/src/composables/upload/index.ts
+++ b/packages/web-app-files/src/composables/upload/index.ts
@@ -1 +1 @@
-export * from './useUpload'
+export * from './useUploadHelpers'
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/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>

From 640f23645aa44bbe054c7d1b3ef043c74e213e60 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 13 Apr 2022 16:43:34 +0200
Subject: [PATCH 06/23] Remove logs and unnecessary events

---
 .../src/components/AppBar/CreateAndUpload.vue             | 1 -
 packages/web-app-files/src/views/FilesDrop.vue            | 6 ------
 packages/web-runtime/src/components/UploadInfo.vue        | 8 ++++++--
 packages/web-runtime/src/services/uppyService.ts          | 2 --
 4 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 9c61a69dceb..030eea7670b 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -280,7 +280,6 @@ export default defineComponent({
         }
 
         resource = buildResource(resource)
-        this.$uppyService.$emit('fileUploadedSuccessfully', resource, fileRoute)
 
         // Update table only if the file was uploaded to the current directory
         if (fileIsInCurrentPath) {
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index 3106f1ffc61..0053429af68 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -57,7 +57,6 @@ export default {
 
     onMounted(() => {
       uppyService.$on('filesSelected', instance.onFilesSelected)
-      uppyService.$on('uploadSuccess', instance.onFileSuccess)
       uppyService.$on('uploadError', instance.onFileError)
 
       uppyService.useDropTarget({
@@ -68,7 +67,6 @@ export default {
 
     onUnmounted(() => {
       uppyService.$off('filesSelected', instance.onFilesSelected)
-      uppyService.$off('uploadSuccess', instance.onFileSuccess)
       uppyService.$off('uploadError', instance.onFileError)
     })
 
@@ -167,10 +165,6 @@ export default {
       this.$uppyService.uploadFiles(uppyResources)
     },
 
-    onFileSuccess(file) {
-      this.$uppyService.$emit('fileUploadedSuccessfully', file)
-    },
-
     onFileError(error) {
       console.error(error)
       this.showMessage({
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index 70b8c8ff550..032b49ad004 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -110,8 +110,12 @@ export default {
       this.filesUploading = 0
       this.uploadCancelled = true
     })
-    this.$uppyService.$on('fileUploadedSuccessfully', (file, route) => {
-      this.successfulUploads.push({ ...file, targetRoute: route })
+    this.$uppyService.$on('uploadSuccess', (file) => {
+      this.successfulUploads.push({
+        ...file,
+        path: `${file.meta.relativeFolder}/${file.name}`,
+        targetRoute: file.meta.route
+      })
     })
   },
   methods: {
diff --git a/packages/web-runtime/src/services/uppyService.ts b/packages/web-runtime/src/services/uppyService.ts
index 0ec9002032b..7665b109fe2 100644
--- a/packages/web-runtime/src/services/uppyService.ts
+++ b/packages/web-runtime/src/services/uppyService.ts
@@ -158,7 +158,6 @@ export class UppyService extends Vue {
       this.$emit('uploadCompleted')
       result.successful.forEach((file) => {
         this.$emit('uploadSuccess', file)
-        console.log('SUCCESS FOR: ', file.name)
         this.uppy.removeFile(file.id)
       })
 
@@ -208,7 +207,6 @@ export class UppyService extends Vue {
   uploadFiles(files: UppyResource[]) {
     files.forEach((file) => {
       try {
-        console.log('START UPLOAD FOR: ', file.name)
         this.uppy.addFile(file)
       } catch (err) {
         console.error('error upload file:', file)

From 5951d9d39554ab4bdbcd316ad8b72b6c40e28b6c Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 14 Apr 2022 11:23:53 +0200
Subject: [PATCH 07/23] Minor fixes and improvements

---
 .../src/components/AppBar/CreateAndUpload.vue  |  3 +--
 .../components/AppBar/Upload/FileUpload.vue    |  2 +-
 .../components/AppBar/Upload/FolderUpload.vue  |  2 +-
 .../src/composables/upload/useUploadHelpers.ts |  7 ++++++-
 packages/web-app-files/src/views/FilesDrop.vue |  4 ++--
 .../web-runtime/src/components/UploadInfo.vue  | 18 ++++++++++++++++--
 .../src/composables/upload/useUpload.ts        |  5 ++---
 .../web-runtime/src/services/uppyService.ts    |  6 +++---
 8 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 030eea7670b..1a58461154e 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -257,7 +257,6 @@ export default defineComponent({
           pathFileWasUploadedTo += file.meta.relativeFolder
         }
 
-        const fileRoute = file.meta.route
         const fileIsInCurrentPath = pathFileWasUploadedTo === this.currentPath
 
         await this.$nextTick()
@@ -612,7 +611,7 @@ export default defineComponent({
       const conflicts = []
       const uppyResources: UppyResource[] = this.inputFilesToUppyFiles(files)
       for (const file of uppyResources) {
-        const relativeFilePath = file.meta.relativeFilePath
+        const relativeFilePath = file.meta.relativePath
         if (relativeFilePath) {
           const rootFolder = relativeFilePath.replace(/^\/+/, '').split('/')[0]
           const exists = this.files.find((f) => f.name === rootFolder)
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 7c2d67a1e2f..1a22d1217a0 100644
--- a/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
@@ -37,7 +37,7 @@ export default {
     this.$uppyService.registerUploadInput(this.$refs.input)
   },
   beforeDestroy() {
-    this.$uppyService.removeUploadInput(this.$refs.input.id)
+    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 4712415c67b..e28b78f1f2c 100644
--- a/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue
@@ -25,7 +25,7 @@ export default {
     this.$uppyService.registerUploadInput(this.$refs.input)
   },
   beforeDestroy() {
-    this.$uppyService.removeUploadInput(this.$refs.input.id)
+    this.$uppyService.removeUploadInput(this.$refs.input)
   },
   methods: {
     triggerUpload() {
diff --git a/packages/web-app-files/src/composables/upload/useUploadHelpers.ts b/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
index 026c4d1b8eb..a7b4733c96f 100644
--- a/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
+++ b/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
@@ -125,11 +125,15 @@ const inputFilesToUppyFiles = ({ route, uploadPath, currentPath, user }: inputFi
     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(/^\/+/, '')}`
@@ -137,6 +141,7 @@ const inputFilesToUppyFiles = ({ route, uploadPath, currentPath, user }: inputFi
         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),
@@ -156,7 +161,7 @@ const inputFilesToUppyFiles = ({ route, uploadPath, currentPath, user }: inputFi
         meta: {
           currentFolder,
           relativeFolder: directory,
-          relativeFilePath,
+          relativePath: relativeFilePath, // uppy needs this property to be named relativePath
           route: fileRoute,
           tusEndpoint,
           webDavPath
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index 0053429af68..b47abc8fbf4 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -83,8 +83,8 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['capabilities', 'configuration', 'newFileHandlers', 'user']),
-    ...mapGetters('Files', ['currentFolder', 'publicLinkPassword']),
+    ...mapGetters(['configuration']),
+    ...mapGetters('Files', ['publicLinkPassword']),
     pageTitle() {
       return this.$gettext(this.$route.meta.title)
     },
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index 032b49ad004..7a511962c77 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -33,7 +33,7 @@
             :key="item.path"
             :resource="item"
             :is-path-displayed="true"
-            :is-thumbnail-displayed="true"
+            :is-thumbnail-displayed="displayThumbnails"
             :is-resource-clickable="false"
             :parent-folder-name-default="defaultParentFolderName(item)"
             :folder-link="folderLink(item)"
@@ -60,6 +60,7 @@ 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() {
@@ -74,6 +75,8 @@ export default {
     successfulUploads: []
   }),
   computed: {
+    ...mapGetters(['configuration']),
+
     uploadInfoTitle() {
       if (this.filesUploading) {
         return this.$gettextInterpolate(
@@ -89,6 +92,9 @@ export default {
         return this.$gettext('Upload cancelled')
       }
       return this.$gettext('Upload completed')
+    },
+    displayThumbnails() {
+      return !this.configuration.options.disablePreviews
     }
   },
   mounted() {
@@ -111,9 +117,17 @@ export default {
       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: `${file.meta.relativeFolder}/${file.name}`,
+        path,
         targetRoute: file.meta.route
       })
     })
diff --git a/packages/web-runtime/src/composables/upload/useUpload.ts b/packages/web-runtime/src/composables/upload/useUpload.ts
index 798c35f042b..51a1bb81ec4 100644
--- a/packages/web-runtime/src/composables/upload/useUpload.ts
+++ b/packages/web-runtime/src/composables/upload/useUpload.ts
@@ -11,7 +11,6 @@ import { useActiveLocation } from 'files/src/composables'
 import { isLocationPublicActive } from 'files/src/router'
 import { UppyService } from '../../services/uppyService'
 
-// FIXME: properly extend type from AddFileOptions<TMeta extends IndexedObject<any> = Record<string, unknown>>
 export interface UppyResource {
   id?: string
   source: string
@@ -21,7 +20,7 @@ export interface UppyResource {
   meta: {
     currentFolder: string
     relativeFolder: string
-    relativeFilePath: string
+    relativePath: string
     route: Route
     tusEndpoint: string
     webDavPath: string
@@ -85,7 +84,7 @@ export function useUpload(options: UploadOptions): UploadResult {
         options.uppyService.useTus(unref(uppyOptions) as any)
         return
       }
-      options.uppyService.useXhr(unref(uppyOptions).headers as any)
+      options.uppyService.useXhr(unref(uppyOptions) as any)
     },
     { immediate: true }
   )
diff --git a/packages/web-runtime/src/services/uppyService.ts b/packages/web-runtime/src/services/uppyService.ts
index 7665b109fe2..3bbc49fb1fd 100644
--- a/packages/web-runtime/src/services/uppyService.ts
+++ b/packages/web-runtime/src/services/uppyService.ts
@@ -147,7 +147,7 @@ export class UppyService extends Vue {
     })
   }
 
-  setUpEvents() {
+  private setUpEvents() {
     this.uppy.on('upload', () => {
       this.$emit('uploadStarted')
     })
@@ -200,8 +200,8 @@ export class UppyService extends Vue {
     }
   }
 
-  removeUploadInput(elementId: string) {
-    this.uploadInputs = this.uploadInputs.filter((el) => el.id !== elementId)
+  removeUploadInput(el: HTMLInputElement) {
+    this.uploadInputs = this.uploadInputs.filter((input) => input !== el)
   }
 
   uploadFiles(files: UppyResource[]) {

From 648da581acf0e7297b7ed091de88ca1da6daca0d Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 14 Apr 2022 14:16:21 +0200
Subject: [PATCH 08/23] Fix ocis e2e tests

---
 packages/web-runtime/src/components/UploadInfo.vue      | 2 +-
 tests/e2e/support/objects/app-files/resource/actions.ts | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index 7a511962c77..597b5b93f70 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -16,7 +16,7 @@
         <span v-text="uploadInfoTitle" />
       </span>
 
-      <oc-button appearance="raw" @click="closeInfo">
+      <oc-button id="close-upload-info-btn" appearance="raw" @click="closeInfo">
         <oc-icon name="close" />
       </oc-button>
     </div>
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))

From 39f8ff4e970c14e723afcc22c23eb4923ad044d7 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 14 Apr 2022 14:33:18 +0200
Subject: [PATCH 09/23] Fix more e2e tests

---
 tests/e2e/support/objects/app-files/page/public.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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))
   }
 }

From 7f1b2ea8b0d61ef998b7bf3c7cbf8c55fff30a1b Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Mon, 25 Apr 2022 10:57:16 +0200
Subject: [PATCH 10/23] Prevent form fields from being added to uploaded file
 contents

---
 packages/web-runtime/src/services/uppyService.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-runtime/src/services/uppyService.ts b/packages/web-runtime/src/services/uppyService.ts
index 3bbc49fb1fd..5491b7d1e0a 100644
--- a/packages/web-runtime/src/services/uppyService.ts
+++ b/packages/web-runtime/src/services/uppyService.ts
@@ -57,6 +57,7 @@ export class UppyService extends Vue {
       endpoint: '',
       method: 'put',
       headers,
+      formData: false,
       getResponseData() {
         return {}
       }

From 435ad36179bcda03ba31419392b9c2c162b44b12 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Mon, 25 Apr 2022 12:45:41 +0200
Subject: [PATCH 11/23] Properly encode file name for XHR uploads

---
 packages/web-runtime/src/services/uppyService.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/web-runtime/src/services/uppyService.ts b/packages/web-runtime/src/services/uppyService.ts
index 5491b7d1e0a..891a939c2e4 100644
--- a/packages/web-runtime/src/services/uppyService.ts
+++ b/packages/web-runtime/src/services/uppyService.ts
@@ -176,9 +176,10 @@ export class UppyService extends Vue {
       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(/\/+$/, '')}/${addedFile.name}`
+            endpoint: `${addedFile.meta.tusEndpoint.replace(/\/+$/, '')}/${escapedName}`
           }
         })
       }

From c1620022d8ab9f253726822f636ab0e579cc4326 Mon Sep 17 00:00:00 2001
From: saw-jan <saw.jan.grg3e@gmail.com>
Date: Mon, 25 Apr 2022 15:07:13 +0545
Subject: [PATCH 12/23] update fileDrop acceptance tests

---
 .../shareByPublicLinkDifferentRoles.feature                 | 4 ++--
 tests/acceptance/pageObjects/filesDropPage.js               | 6 +++---
 tests/acceptance/pageObjects/personalPage.js                | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

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,

From fedb11b3c05e671221144756af29bbdc0781a112 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Mon, 25 Apr 2022 13:20:25 +0200
Subject: [PATCH 13/23] Remove Uppy drop target plugin on unmount

---
 .../src/components/AppBar/CreateAndUpload.vue              | 3 ++-
 packages/web-runtime/src/services/uppyService.ts           | 7 +++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 1a58461154e..7cf25f07138 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -117,7 +117,7 @@ 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/useUploadHelpers'
+import { useUploadHelpers } from '../../composables/upload'
 
 export default defineComponent({
   components: {
@@ -144,6 +144,7 @@ export default defineComponent({
       uppyService.$off('filesSelected', instance.onFilesSelected)
       uppyService.$off('uploadSuccess', instance.onFileSuccess)
       uppyService.$off('uploadError', instance.onFileError)
+      uppyService.removeDropTarget()
     })
 
     return {
diff --git a/packages/web-runtime/src/services/uppyService.ts b/packages/web-runtime/src/services/uppyService.ts
index 891a939c2e4..f3326b8af0a 100644
--- a/packages/web-runtime/src/services/uppyService.ts
+++ b/packages/web-runtime/src/services/uppyService.ts
@@ -90,6 +90,13 @@ export class UppyService extends Vue {
     })
   }
 
+  removeDropTarget() {
+    const dropTargetPlugin = this.uppy.getPlugin('DropTarget')
+    if (dropTargetPlugin) {
+      this.uppy.removePlugin(dropTargetPlugin)
+    }
+  }
+
   useStatusBar({
     targetSelector,
     getText

From 0684dff20d2a734e922635bdbf65134f2b6316ac Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Mon, 25 Apr 2022 16:26:59 +0200
Subject: [PATCH 14/23] Fix issues when uploading nested folders

---
 .../composables/upload/useUploadHelpers.ts    | 46 +++++++++----------
 .../src/composables/upload/useUpload.ts       | 35 ++++++++++----
 2 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/packages/web-app-files/src/composables/upload/useUploadHelpers.ts b/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
index a7b4733c96f..dcc4fd2218f 100644
--- a/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
+++ b/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
@@ -86,33 +86,29 @@ const updateStoreForCreatedFolders = ({
     const { owncloudSdk: client } = clientService
     const fetchedFolders = []
     for (const file of files) {
-      const currentFolder = file.meta.currentFolder
       const directory = file.meta.relativeFolder
+      // Only care about the root folders, no need to fetch nested folders
+      const rootFolder = file.meta.relativeFolder.split('/').slice(0, 2).join('/')
+      const rootFolderPath = `${file.meta.webDavBasePath}${rootFolder}`
 
-      if (!directory || fetchedFolders.includes(directory)) {
+      if (!directory || fetchedFolders.includes(rootFolderPath)) {
         continue
       }
 
-      const relativeParts = directory.replace(/^\/+/, '').split('/')
-      // No need to load folder when it is either deep nested or the user changed paths in between
-      const buildFolderResource = relativeParts.length === 1
-
-      if (buildFolderResource) {
-        let resource
-
-        if (unref(isPublicLocation)) {
-          resource = await client.publicFiles.getFileInfo(
-            `${currentFolder}${directory}`,
-            unref(publicLinkPassword),
-            DavProperties.PublicLink
-          )
-        } else {
-          resource = await client.files.fileInfo(file.meta.webDavPath, DavProperties.Default)
-        }
-        resource = buildResource(resource)
-        store.commit('Files/UPSERT_RESOURCE', resource)
-        fetchedFolders.push(directory)
+      let resource
+      if (unref(isPublicLocation)) {
+        const rootFolder = directory.split('/').slice(0, 2).join('/')
+        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)
     }
   }
 }
@@ -149,9 +145,9 @@ const inputFilesToUppyFiles = ({ route, uploadPath, currentPath, user }: inputFi
       }
 
       const storageId = params.storageId
-      const webDavPath = storageId
-        ? buildWebDavSpacesPath(storageId, `${currentFolder}${directory}`)
-        : buildWebDavFilesPath(unref(user)?.id, `${currentFolder}${directory}`)
+      const webDavBasePath = storageId
+        ? buildWebDavSpacesPath(storageId, currentFolder)
+        : buildWebDavFilesPath(unref(user)?.id, currentFolder)
 
       uppyFiles.push({
         source: 'file input',
@@ -164,7 +160,7 @@ const inputFilesToUppyFiles = ({ route, uploadPath, currentPath, user }: inputFi
           relativePath: relativeFilePath, // uppy needs this property to be named relativePath
           route: fileRoute,
           tusEndpoint,
-          webDavPath
+          webDavBasePath // WebDAV base path where the files will be uploaded to
         }
       })
     }
diff --git a/packages/web-runtime/src/composables/upload/useUpload.ts b/packages/web-runtime/src/composables/upload/useUpload.ts
index 51a1bb81ec4..1101e16053b 100644
--- a/packages/web-runtime/src/composables/upload/useUpload.ts
+++ b/packages/web-runtime/src/composables/upload/useUpload.ts
@@ -23,7 +23,7 @@ export interface UppyResource {
     relativePath: string
     route: Route
     tusEndpoint: string
-    webDavPath: string
+    webDavBasePath: string
   }
 }
 
@@ -114,18 +114,37 @@ const createDirectoryTree = ({
       const currentFolder = file.meta.currentFolder
       const directory = file.meta.relativeFolder
 
-      // @TODO check common prefixes
       if (!directory || createdFolders.includes(directory)) {
         continue
       }
 
-      if (unref(isPublicLocation)) {
-        await client.publicFiles.createFolder(currentFolder, directory, unref(publicLinkPassword))
-      } else {
-        await client.files.createFolder(file.meta.webDavPath)
+      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)
       }
-
-      createdFolders.push(directory)
     }
   }
 }

From 5182cba23f4ac5d8ba3f991ab895bc7d10d98941 Mon Sep 17 00:00:00 2001
From: Florian Schade <f.schade@icloud.com>
Date: Mon, 25 Apr 2022 16:57:48 +0200
Subject: [PATCH 15/23] change rollup plugin order to apply injections for ts
 files also

---
 rollup.config.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

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
                 })
 

From 52934d6e9030e0fa791d8c45e2e865727c8cc582 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Tue, 26 Apr 2022 09:01:28 +0200
Subject: [PATCH 16/23] Fix issue with missing slashes when uploading

---
 .../src/composables/upload/useUploadHelpers.ts         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-files/src/composables/upload/useUploadHelpers.ts b/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
index dcc4fd2218f..47a04ee1654 100644
--- a/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
+++ b/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
@@ -86,18 +86,17 @@ const updateStoreForCreatedFolders = ({
     const { owncloudSdk: client } = clientService
     const fetchedFolders = []
     for (const file of files) {
-      const directory = file.meta.relativeFolder
+      const relativeFolder = `/${file.meta.relativeFolder.replace(/^\/+/, '')}`
       // Only care about the root folders, no need to fetch nested folders
-      const rootFolder = file.meta.relativeFolder.split('/').slice(0, 2).join('/')
-      const rootFolderPath = `${file.meta.webDavBasePath}${rootFolder}`
+      const rootFolder = relativeFolder.split('/').slice(0, 2).join('/')
+      const rootFolderPath = `${file.meta.webDavBasePath}/${rootFolder}`
 
-      if (!directory || fetchedFolders.includes(rootFolderPath)) {
+      if (fetchedFolders.includes(rootFolderPath)) {
         continue
       }
 
       let resource
       if (unref(isPublicLocation)) {
-        const rootFolder = directory.split('/').slice(0, 2).join('/')
         resource = await client.publicFiles.getFileInfo(
           `${file.meta.currentFolder}${rootFolder}`,
           unref(publicLinkPassword),
@@ -106,6 +105,7 @@ const updateStoreForCreatedFolders = ({
       } else {
         resource = await client.files.fileInfo(rootFolderPath, DavProperties.Default)
       }
+
       resource = buildResource(resource)
       store.commit('Files/UPSERT_RESOURCE', resource)
       fetchedFolders.push(rootFolderPath)

From 99aba33b9117d2a59720057c804b17f7cab0c77f Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Tue, 26 Apr 2022 09:07:40 +0200
Subject: [PATCH 17/23] Ensure that uppy uses only one upload plugin at a time

---
 packages/web-runtime/src/services/uppyService.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/web-runtime/src/services/uppyService.ts b/packages/web-runtime/src/services/uppyService.ts
index f3326b8af0a..14288d2ff97 100644
--- a/packages/web-runtime/src/services/uppyService.ts
+++ b/packages/web-runtime/src/services/uppyService.ts
@@ -43,6 +43,11 @@ export class UppyService extends Vue {
       retryDelays: [0, 3000, 5000, 10000, 20000]
     }
 
+    const xhrPlugin = this.uppy.getPlugin('XHRUpload')
+    if (xhrPlugin) {
+      this.uppy.removePlugin(xhrPlugin)
+    }
+
     const tusPlugin = this.uppy.getPlugin('Tus')
     if (tusPlugin) {
       tusPlugin.setOptions(tusPluginOptions)
@@ -63,9 +68,14 @@ export class UppyService extends Vue {
       }
     }
 
-    const tusPlugin = this.uppy.getPlugin('XHRUpload')
+    const tusPlugin = this.uppy.getPlugin('Tus')
     if (tusPlugin) {
-      tusPlugin.setOptions(xhrPluginOptions)
+      this.uppy.removePlugin(tusPlugin)
+    }
+
+    const xhrPlugin = this.uppy.getPlugin('XHRUpload')
+    if (xhrPlugin) {
+      xhrPlugin.setOptions(xhrPluginOptions)
       return
     }
 

From 495aa91353d0db93acefdbab9517b0ebd364ac01 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Tue, 26 Apr 2022 10:02:00 +0200
Subject: [PATCH 18/23] Fix issue when updating the store for newly created
 folders

---
 .../web-app-files/src/composables/upload/useUploadHelpers.ts  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/web-app-files/src/composables/upload/useUploadHelpers.ts b/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
index 47a04ee1654..5a248e7802b 100644
--- a/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
+++ b/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
@@ -86,6 +86,10 @@ const updateStoreForCreatedFolders = ({
     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('/')

From ae25b614a297648a0541f751766c3b2a3e788563 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 27 Apr 2022 10:29:59 +0200
Subject: [PATCH 19/23] Remove Uppy debug state

---
 packages/web-runtime/src/services/uppyService.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-runtime/src/services/uppyService.ts b/packages/web-runtime/src/services/uppyService.ts
index 14288d2ff97..785075e7345 100644
--- a/packages/web-runtime/src/services/uppyService.ts
+++ b/packages/web-runtime/src/services/uppyService.ts
@@ -13,7 +13,6 @@ export class UppyService extends Vue {
   constructor() {
     super()
     this.uppy = new Uppy({
-      debug: true, // @TODO
       autoProceed: true
     })
     this.setUpEvents()

From f887105e10f4c002235be867ed3707eafec583e5 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 27 Apr 2022 13:11:00 +0200
Subject: [PATCH 20/23] Small fixes and polishing

---
 packages/web-app-files/src/App.vue            |  3 +--
 .../components/AppBar/CreateAndUpload.spec.js |  3 +--
 .../web-runtime/src/components/UploadInfo.vue | 25 +++++++++++--------
 .../src/composables/upload/useUpload.ts       |  3 ++-
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index efec0633844..b9e1d445c57 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -20,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'
 
@@ -30,7 +30,6 @@ export default defineComponent({
   },
   mixins: [Mixins],
   computed: {
-    ...mapGetters('Files', ['dropzone']),
     ...mapState('Files/sidebar', {
       sidebarClosed: 'closed',
       sidebarActivePanel: 'activePanel'
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-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index 597b5b93f70..1f743264f9a 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -1,10 +1,6 @@
 <template>
-  <div
-    id="upload-info"
-    class="oc-p-m oc-rounded oc-box-shadow-medium"
-    :class="{ 'oc-hidden': !showInfo }"
-  >
-    <div class="upload-info-title oc-flex oc-flex-between oc-flex-middle oc-mb-m">
+  <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-px-m oc-pt-m">
       <span class="oc-flex oc-flex-middle">
         <oc-icon
           v-if="!filesUploading && !uploadCancelled"
@@ -16,12 +12,17 @@
         <span v-text="uploadInfoTitle" />
       </span>
 
-      <oc-button id="close-upload-info-btn" appearance="raw" @click="closeInfo">
+      <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" />
-    <div class="upload-info-successful-uploads">
+    <div class="upload-info-status-bar oc-px-m" />
+    <div class="upload-info-successful-uploads oc-p-m">
       <ul id="files-collaborators-list" class="oc-list">
         <li
           v-for="(item, idx) in successfulUploads"
@@ -184,8 +185,12 @@ export default {
 #upload-info {
   position: absolute;
   right: 20px;
-  background: #fff;
+  background-color: var(--oc-color-background-secondary);
   bottom: 20px;
   width: 300px;
 }
+.upload-info-successful-uploads {
+  max-height: 50vh;
+  overflow-y: auto;
+}
 </style>
diff --git a/packages/web-runtime/src/composables/upload/useUpload.ts b/packages/web-runtime/src/composables/upload/useUpload.ts
index 1101e16053b..63ed41ce7c1 100644
--- a/packages/web-runtime/src/composables/upload/useUpload.ts
+++ b/packages/web-runtime/src/composables/upload/useUpload.ts
@@ -80,7 +80,8 @@ export function useUpload(options: UploadOptions): UploadResult {
   watch(
     uppyOptions,
     () => {
-      if (unref(uppyOptions).isTusSupported) {
+      // @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
       }

From af1bc4b4c3034833769deffbab12a91a48fd6b0b Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 27 Apr 2022 14:39:33 +0200
Subject: [PATCH 21/23] Fix tests, polishing

---
 .../src/components/AppBar/CreateAndUpload.vue |  3 +-
 .../web-runtime/src/components/UploadInfo.vue | 35 ++++++++++++++++---
 .../src/composables/upload/useUpload.ts       |  4 +--
 .../web-runtime/src/services/uppyService.ts   |  9 +++--
 .../Folder,With,Comma/sunday,monday.txt       |  1 +
 5 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 7cf25f07138..794ad4992d4 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -302,8 +302,7 @@ export default defineComponent({
       }
     },
 
-    onFileError(error) {
-      console.error(error)
+    onFileError(file) {
       this.showMessage({
         title: this.$gettext('Failed to upload'),
         status: 'danger'
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index 1f743264f9a..8c2894fcb09 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -1,6 +1,6 @@
 <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-px-m oc-pt-m">
+    <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"
@@ -21,8 +21,11 @@
         <oc-icon name="close" />
       </oc-button>
     </div>
-    <div class="upload-info-status-bar oc-px-m" />
-    <div class="upload-info-successful-uploads oc-p-m">
+    <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"
@@ -181,7 +184,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 #upload-info {
   position: absolute;
   right: 20px;
@@ -193,4 +196,28 @@ export default {
   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/useUpload.ts b/packages/web-runtime/src/composables/upload/useUpload.ts
index 63ed41ce7c1..b425717a652 100644
--- a/packages/web-runtime/src/composables/upload/useUpload.ts
+++ b/packages/web-runtime/src/composables/upload/useUpload.ts
@@ -39,6 +39,7 @@ 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)
 
@@ -47,9 +48,8 @@ export function useUpload(options: UploadOptions): UploadResult {
   const uploadChunkSize = computed((): number => store.getters.configuration.uploadChunkSize)
 
   const headers = computed((): { [key: string]: string } => {
-    if (unref(isPublicLocation)) {
+    if (unref(isPublicLocation) || unref(isPublicDropLocation)) {
       const password = unref(publicLinkPassword)
-
       if (password) {
         return { Authorization: 'Basic ' + Buffer.from('public:' + password).toString('base64') }
       }
diff --git a/packages/web-runtime/src/services/uppyService.ts b/packages/web-runtime/src/services/uppyService.ts
index 785075e7345..74e2f342571 100644
--- a/packages/web-runtime/src/services/uppyService.ts
+++ b/packages/web-runtime/src/services/uppyService.ts
@@ -39,7 +39,7 @@ export class UppyService extends Vue {
       chunkSize: chunkSize,
       removeFingerprintOnSuccess: true,
       overridePatchMethod: !!tusHttpMethodOverride,
-      retryDelays: [0, 3000, 5000, 10000, 20000]
+      retryDelays: [0]
     }
 
     const xhrPlugin = this.uppy.getPlugin('XHRUpload')
@@ -177,7 +177,9 @@ export class UppyService extends Vue {
         this.$emit('uploadSuccess', file)
         this.uppy.removeFile(file.id)
       })
-
+      result.failed.forEach((file) => {
+        this.$emit('uploadError', file)
+      })
       this.uploadInputs.forEach((item) => {
         item.value = null
       })
@@ -200,9 +202,6 @@ export class UppyService extends Vue {
         })
       }
     })
-    this.uppy.on('upload-error', () => {
-      this.$emit('uploadError')
-    })
   }
 
   registerUploadInput(el: HTMLInputElement) {
diff --git a/tests/e2e/filesForUpload/Folder,With,Comma/sunday,monday.txt b/tests/e2e/filesForUpload/Folder,With,Comma/sunday,monday.txt
index e69de29bb2d..7305cfdd379 100644
--- a/tests/e2e/filesForUpload/Folder,With,Comma/sunday,monday.txt
+++ b/tests/e2e/filesForUpload/Folder,With,Comma/sunday,monday.txt
@@ -0,0 +1 @@
+sunday,monday

From e38c3a2bc2d28eaccbc87d35b6238cc588637434 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 27 Apr 2022 16:19:19 +0200
Subject: [PATCH 22/23] Undo change in sunday,monday.txt file

---
 tests/e2e/filesForUpload/Folder,With,Comma/sunday,monday.txt | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/e2e/filesForUpload/Folder,With,Comma/sunday,monday.txt b/tests/e2e/filesForUpload/Folder,With,Comma/sunday,monday.txt
index 7305cfdd379..e69de29bb2d 100644
--- a/tests/e2e/filesForUpload/Folder,With,Comma/sunday,monday.txt
+++ b/tests/e2e/filesForUpload/Folder,With,Comma/sunday,monday.txt
@@ -1 +0,0 @@
-sunday,monday

From 9198b0751d23f173fb412f9ce4a3d0bc8e00251d Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 27 Apr 2022 16:22:58 +0200
Subject: [PATCH 23/23] Bump owncloud-test-middleware docker image version to
 1.5.0

---
 .drone.star | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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"