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>
diff --git a/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap b/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
index 91eada5a065..16cffa535a8 100644
--- a/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
@@ -37,7 +37,7 @@ exports[`SharedWithOthers view when the wrapper is not loading anymore when leng
           <oc-avatars-stub items="[object Object]" stacked="true" istooltipdisplayed="true" maxdisplayed="3" accessibledescription=" This folder is shared via 1 link" class="resource-table-people"></oc-avatars-stub>
         </oc-button-stub>
       </td>
-      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-sdate" aria-label="9 months ago (June 9, 2021, 12:44 PM UTC)"><span tabindex="0">9 months ago</span></td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-sdate" aria-label="10 months ago (June 9, 2021, 12:44 PM UTC)"><span tabindex="0">10 months ago</span></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
         <div class="resource-table-actions">
           <oc-button-stub type="button" size="medium" arialabel="Show context menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="context-menu-trigger-38" class="resource-table-btn-action-dropdown"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></oc-button-stub>
@@ -60,7 +60,7 @@ exports[`SharedWithOthers view when the wrapper is not loading anymore when leng
           <oc-avatars-stub items="[object Object]" stacked="true" istooltipdisplayed="true" maxdisplayed="3" accessibledescription=" This folder is shared via 1 link" class="resource-table-people"></oc-avatars-stub>
         </oc-button-stub>
       </td>
-      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-sdate" aria-label="9 months ago (June 9, 2021, 12:44 PM UTC)"><span tabindex="0">9 months ago</span></td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-sdate" aria-label="10 months ago (June 9, 2021, 12:44 PM UTC)"><span tabindex="0">10 months ago</span></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
         <div class="resource-table-actions">
           <oc-button-stub type="button" size="medium" arialabel="Show context menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="context-menu-trigger-64" class="resource-table-btn-action-dropdown"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></oc-button-stub>
@@ -83,7 +83,7 @@ exports[`SharedWithOthers view when the wrapper is not loading anymore when leng
           <oc-avatars-stub items="[object Object]" stacked="true" istooltipdisplayed="true" maxdisplayed="3" accessibledescription=" This folder is shared via 1 link" class="resource-table-people"></oc-avatars-stub>
         </oc-button-stub>
       </td>
-      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-sdate" aria-label="9 months ago (June 9, 2021, 12:44 PM UTC)"><span tabindex="0">9 months ago</span></td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-sdate" aria-label="10 months ago (June 9, 2021, 12:44 PM UTC)"><span tabindex="0">10 months ago</span></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
         <div class="resource-table-actions">
           <oc-button-stub type="button" size="medium" arialabel="Show context menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="context-menu-trigger-39" class="resource-table-btn-action-dropdown"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></oc-button-stub>
@@ -106,7 +106,7 @@ exports[`SharedWithOthers view when the wrapper is not loading anymore when leng
           <oc-avatars-stub items="[object Object],[object Object]" stacked="true" istooltipdisplayed="true" maxdisplayed="3" accessibledescription="This file is shared via 1 invite This file is shared via 1 link" class="resource-table-people"></oc-avatars-stub>
         </oc-button-stub>
       </td>
-      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-sdate" aria-label="9 months ago (June 9, 2021, 12:37 PM UTC)"><span tabindex="0">9 months ago</span></td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-sdate" aria-label="10 months ago (June 9, 2021, 12:37 PM UTC)"><span tabindex="0">10 months ago</span></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
         <div class="resource-table-actions">
           <oc-button-stub type="button" size="medium" arialabel="Show context menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="context-menu-trigger-30" class="resource-table-btn-action-dropdown"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></oc-button-stub>