diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 57036b40034..bdeed570116 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 e5dfd6a219f..28a5944e362 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 } 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'
@@ -123,6 +114,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: {
@@ -141,7 +135,8 @@ export default {
   data: () => ({
     newFileAction: null,
     path: '',
-    fileFolderCreationLoading: false
+    fileFolderCreationLoading: false,
+    uppy: null
   }),
   computed: {
     ...mapGetters(['getToken', 'capabilities', 'configuration', 'newFileHandlers', 'user']),
@@ -242,130 +237,49 @@ 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
-      })
-    }
+    },
 
-    // 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')
+    uploadPath() {
+      if (this.isPublicLocation) {
+        return this.$client.publicFiles.getFileUrl(this.currentPath)
+      }
 
-    uploadInputTarget.forEach((item) => {
-      item.addEventListener('change', (event) => {
-        const files = Array.from(event.target.files)
+      if (this.isSpacesProjectLocation) {
+        const path = buildWebDavSpacesPath(this.$route.params.storageId, this.currentPath)
+        return this.$client.files.getFileUrl(path)
+      }
 
-        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
-      })
-    })
+      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
+        }
 
-    uppy.on('complete', (result) => {
-      result.successful.forEach((file) => {
-        this.onFileSuccess(file)
-      })
-      uploadInputTarget.forEach((item) => {
-        item.value = null
-      })
+        if (this.uppy) {
+          const uploadInputs = this.getUploadInputs()
+          // uppyService.changeUppyEndpoint(this.uppy, this.uploadPath, this.capabilities)
 
-      console.log('successful files:', result.successful)
-      console.log('failed files:', result.failed)
-    })
+          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?
@@ -381,13 +295,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) {
@@ -405,15 +327,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)
@@ -737,6 +663,257 @@ 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
+        }
+
+        if (this.publicPage()) {
+          await this.$client.publicFiles.createFolder(basePath, directory, this.publicLinkPassword)
+        } 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)
+
+          const relativeParts = directory.replace(/^\/+/, '').split('/')
+
+          // No need to load folder when it is either deep nested or the user changed paths in between
+          if (relativeParts.length === 1 || basePath !== this.currentPath) {
+            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}`
+        } 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,
+        $root: this.$root,
+        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.capabilities.files?.tus_support?.max_chunk_size > 0) {
+          const relativeFilePath = file.webkitRelativePath || file.relativePath || null
+          const filePath = relativeFilePath || file.name
+          this.uppy.setFileState(file.id, {
+            xhrUpload: {
+              endpoint: `${this.uploadPath.replace(/\/+$/, '')}/${filePath}`
+            }
+          })
+        }
+      })
+
+      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) => {
+          console.log('FILE SUCCESS', 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..b84292f6dbb 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,19 @@
 </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 DropTarget from '@uppy/drop-target'
+import { uppyService } from 'web-pkg/src/services'
+import FileUpload from '../components/AppBar/Upload/FileUpload.vue'
 
 export default {
+  components: {
+    FileUpload
+  },
   data() {
     return {
       loading: true,
@@ -115,122 +117,93 @@ 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
+          })
 
-    // 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('upload-error', (file, error, response) => {
+            console.error(error)
+            this.showMessage({
+              title: this.$gettext('Failed to upload'),
+              status: 'danger'
+            })
+          })
 
-    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('file-added', (file) => {
+            if (!this.capabilities.files?.tus_support?.max_chunk_size > 0) {
+              uppy.setFileState(file.id, {
+                xhrUpload: {
+                  endpoint: `${this.url.replace(/\/+$/, '')}/${file.name}`
+                }
+              })
+            }
+          })
 
-    // // upload via drag&drop handling
-    uppy.use(DropTarget, {
-      target: '#files-drop-zone'
-    })
+          uppy.on('upload', () => {
+            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)
+            })
           })
-        } 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 +240,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 +261,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..259fb5bb268
--- /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
+  }): 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