From a0e8e353d23372332cf50df9b59b99a944f7371d Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Tue, 29 Mar 2022 09:28:05 +0200
Subject: [PATCH] Rebase&refactor

---
 packages/web-app-files/package.json           |   8 +-
 packages/web-app-files/src/App.vue            |   7 +-
 .../src/components/AppBar/CreateAndUpload.vue | 166 ++++++--
 .../src/components/AppBar/Upload/FileDrop.vue | 129 ------
 .../components/AppBar/Upload/FileUpload.vue   |  25 +-
 .../components/AppBar/Upload/FolderUpload.vue |  22 +-
 packages/web-app-files/src/mixins.js          | 403 ------------------
 packages/web-app-files/src/store/actions.js   |  16 +-
 packages/web-app-files/src/store/getters.js   |   3 -
 packages/web-app-files/src/store/mutations.js |  48 ---
 packages/web-app-files/src/store/state.js     |   1 -
 .../web-app-files/src/views/FilesDrop.vue     |  23 +-
 packages/web-runtime/src/defaults/vue.js      |   2 -
 packages/web-runtime/src/plugins/upload.js    |  65 ---
 yarn.lock                                     | 170 +++++++-
 15 files changed, 299 insertions(+), 789 deletions(-)
 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/packages/web-app-files/package.json b/packages/web-app-files/package.json
index efc2da258ab..7d8f915ae98 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.4",
+    "@uppy/drop-target": "^1.1.1",
+    "@uppy/status-bar": "^2.1.2",
+    "@uppy/tus": "^2.1.2",
+    "@uppy/xhr-upload": "^2.0.7",
+    "copy-to-clipboard": "^3.3.1"
   }
 }
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 013ce80a55b..0fcac4a356d 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -22,7 +22,7 @@
 </template>
 <script>
 import Mixins from './mixins'
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 import SideBar from './components/SideBar/SideBar.vue'
 
 export default {
@@ -31,7 +31,6 @@ export default {
   },
   mixins: [Mixins],
   computed: {
-    ...mapGetters('Files', ['dropzone']),
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
 
     showSidebar() {
@@ -104,8 +103,4 @@ main {
   grid-area: main;
   z-index: 0;
 }
-
-#files-upload-progress {
-  grid-area: upload;
-}
 </style>
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index d13f35fe63c..56ef3af08e3 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -70,15 +70,10 @@
         <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"
-    />
+    <!-- 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"
@@ -99,23 +94,10 @@
     >
       <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>
@@ -125,8 +107,12 @@
 <script>
 import { mapActions, mapGetters, mapState, 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 Mixins from '../../mixins'
 import MixinFileActions, { EDITOR_MODE_CREATE } from '../../mixins/fileActions'
 import { buildResource, buildWebDavFilesPath, buildWebDavSpacesPath } from '../../helpers/resources'
 import { isLocationPublicActive, isLocationSpacesActive } from '../../router'
@@ -134,17 +120,16 @@ import { useActiveLocation } from '../../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'),
@@ -256,17 +241,136 @@ export default {
       )
     }
   },
+  mounted() {
+    const chunkSize = this.configuration.uploadChunkSize
+    // if (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
+    //     }
+    //   }
+    // }
+
+    const client = this.$client
+    // might make sense to initialize an Uppy instance in the runtime?
+    // todo: set debug to false
+    const uppy = new Uppy({ debug: true, autoProceed: true })
+    const uploadPath = client.files.getFileUrl(this.currentPath)
+    const headers = client.helpers.buildHeaders()
+
+    if (this.capabilities.files.tus_support) {
+      delete headers['OCS-APIREQUEST']
+      uppy.use(Tus, {
+        endpoint: uploadPath,
+        headers: headers,
+        chunkSize: chunkSize || Infinity,
+        removeFingerprintOnSuccess: true,
+        overridePatchMethod: !!this.capabilities.files.tus_support.http_method_override,
+        retryDelays: [0, 3000, 5000, 10000, 20000]
+      })
+    } else {
+      uppy.use(XHRUpload, {
+        endpoint: uploadPath,
+        method: 'put',
+        headers: headers
+      })
+    }
+
+    // upload button handling (files & folders separately)
+    // doesn't recognize elements yet since they're tippy children
+    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('file', file)
+            uppy.addFile({
+              source: 'file input',
+              name: file.name,
+              type: file.type,
+              data: file
+            })
+          } catch (err) {
+            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.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 = ''
+      })
+    })
+
+    uppy.on('complete', (result) => {
+      result.successful.forEach((file) => {
+        this.onFileSuccess(file.data)
+      })
+      uploadInputTarget.forEach((item) => {
+        item.value = ''
+      })
+
+      console.log('successful files:', result.successful)
+      console.log('failed files:', result.failed)
+    })
+
+    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
+      }
+    })
+  },
+
+  beforeDestroy() {
+    // maybe bad that we close uppy this early,
+    // eventually on rerender even?
+    this.uppy.close()
+  },
   methods: {
     ...mapActions('Files', [
       'loadPreview',
       'updateFileProgress',
-      'removeFilesFromTrashbin',
-      'loadIndicators'
+      'loadIndicators',
+      'setFileSelection'
     ]),
     ...mapActions(['openFile', 'showMessage', 'createModal', 'setModalInputErrorMessage']),
     ...mapMutations('Files', [
       'UPSERT_RESOURCE',
-      'SET_HIDDEN_FILES_VISIBILITY',
       'REMOVE_FILE',
       'REMOVE_FILE_FROM_SEARCHED',
       'SET_FILE_SELECTION',
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 83ac8a903a1..00000000000
--- a/packages/web-app-files/src/components/AppBar/Upload/FileDrop.vue
+++ /dev/null
@@ -1,129 +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'
-
-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 {
-      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.publicPage()) {
-        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/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 e872d199f23..dffa2eadd30 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)
   },
@@ -639,6 +625,7 @@ export default {
       .catch((e) => context.commit('CURRENT_FILE_OUTGOING_SHARES_ERROR', e.message))
   },
 
+  // pretty sure actions below are obsolete
   addActionToProgress({ commit }, item) {
     commit('ADD_ACTION_TO_PROGRESS', item)
   },
@@ -646,6 +633,7 @@ export default {
   removeActionFromProgress({ commit }, item) {
     commit('REMOVE_ACTION_FROM_PROGRESS', item)
   },
+  // pretty sure actions above are obsolete
 
   pushResourcesToDeleteList({ commit }, resources) {
     commit('PUSH_RESOURCES_TO_DELETE_LIST', resources)
diff --git a/packages/web-app-files/src/store/getters.js b/packages/web-app-files/src/store/getters.js
index 5a978dfb3ea..2c53214e42e 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])
diff --git a/packages/web-app-files/src/store/mutations.js b/packages/web-app-files/src/store/mutations.js
index 5c03d85323a..a2b0fb79464 100644
--- a/packages/web-app-files/src/store/mutations.js
+++ b/packages/web-app-files/src/store/mutations.js
@@ -7,51 +7,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
@@ -112,9 +67,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 b4b667b0558..bcaad4267a3 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: [],
 
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index ccd7980b11f..728705ae07c 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 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,18 +67,12 @@
 </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'
 
 export default {
-  components: {
-    vueDropzone: vue2DropZone
-  },
-  mixins: [Mixins],
   data() {
     return {
       loading: true,
diff --git a/packages/web-runtime/src/defaults/vue.js b/packages/web-runtime/src/defaults/vue.js
index fa86623564f..cb72a0eba00 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'
@@ -29,7 +28,6 @@ Vue.use(VueResize)
 Vue.use(VueMeta, {
   refreshOnceOnNavigation: true
 })
-Vue.use(ChunkedUpload)
 Vue.use(PortalVue)
 Vue.use(AsyncComputed)
 
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 bcba927eeb9..9b4357a4e6f 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":
+  version: 2.0.4
+  resolution: "@uppy/companion-client@npm:2.0.4"
+  dependencies:
+    "@uppy/utils": ^4.0.4
+    namespace-emitter: ^2.0.1
+  checksum: 6626a152bb84ce065890b0ff49097c20c8efb91a06f74f5c2efd857b0fb366e548104020fbbffe296845f330f01a3ac2ce6085c181f85473179152cfdb438819
+  languageName: node
+  linkType: hard
+
+"@uppy/core@npm:^2.1.4":
+  version: 2.1.4
+  resolution: "@uppy/core@npm:2.1.4"
+  dependencies:
+    "@transloadit/prettier-bytes": 0.0.7
+    "@uppy/store-default": ^2.0.3
+    "@uppy/utils": ^4.0.4
+    lodash.throttle: ^4.1.1
+    mime-match: ^1.0.2
+    namespace-emitter: ^2.0.1
+    nanoid: ^3.1.25
+    preact: ^10.5.13
+  checksum: 6dd08bd2ad895c702b6349e32d758ad5030e5e6d2ee4952337e923116e85aaf27f52820e4ebbe487ac5076cab0ddc88d7c452d0ce1d600d71a8949daeaf18501
+  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.2":
+  version: 2.1.2
+  resolution: "@uppy/status-bar@npm:2.1.2"
+  dependencies:
+    "@transloadit/prettier-bytes": 0.0.7
+    "@uppy/utils": ^4.0.4
+    classnames: ^2.2.6
+    lodash.throttle: ^4.1.1
+    preact: ^10.5.13
+  peerDependencies:
+    "@uppy/core": ^2.1.3
+  checksum: 5a8fda6952506a6e7ffcaa61f5dfc2811d85cfe1d2afc9cfd0ea3995c0fc530673031684b810e78473612a9bb56c4b648b5e37a81607098e131ab8e2b75c1ce4
+  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.1.2":
+  version: 2.1.2
+  resolution: "@uppy/tus@npm:2.1.2"
+  dependencies:
+    "@uppy/companion-client": ^2.0.4
+    "@uppy/utils": ^4.0.4
+    tus-js-client: ^2.1.1
+  peerDependencies:
+    "@uppy/core": ^2.1.3
+  checksum: 94131a633855330667932d9fc89c271a4e1b0d26c2c1a91404f3bcf97141f12faaf384edff401a5b02a21d186db66186ebe1d0f4e42cc4067ea2743a14076b8d
+  languageName: node
+  linkType: hard
+
+"@uppy/utils@npm:^4.0.3, @uppy/utils@npm:^4.0.4":
+  version: 4.0.4
+  resolution: "@uppy/utils@npm:4.0.4"
+  dependencies:
+    lodash.throttle: ^4.1.1
+  checksum: 5c6924e18456ca60d3241868d06fbc3e59d34504b792f2faccb8d5081cb28d0586521ae84b11494ab6f2eaa05ff7850ee7db24d79a57ac30a298580b59183fae
+  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"
@@ -4214,6 +4315,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"
@@ -5336,13 +5444,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"
@@ -6292,8 +6393,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "files@workspace:packages/web-app-files"
   dependencies:
+    "@uppy/core": ^2.1.4
+    "@uppy/drop-target": ^1.1.1
+    "@uppy/status-bar": ^2.1.2
+    "@uppy/tus": ^2.1.2
+    "@uppy/xhr-upload": ^2.0.7
     copy-to-clipboard: ^3.3.1
-    vue2-dropzone: ^3.6.0
   languageName: unknown
   linkType: soft
 
@@ -8966,6 +9071,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"
@@ -9192,12 +9306,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
 
@@ -10655,6 +10776,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"
@@ -12936,7 +13064,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tus-js-client@npm:^2.3.1":
+"tus-js-client@npm:^2.1.1, tus-js-client@npm:^2.3.1":
   version: 2.3.1
   resolution: "tus-js-client@npm:2.3.1"
   dependencies:
@@ -13472,15 +13600,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"
@@ -13753,6 +13872,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"