diff --git a/changelog/unreleased/enhancement-refactor-upload-inputs b/changelog/unreleased/enhancement-refactor-upload-inputs
new file mode 100644
index 00000000000..a132ab8975d
--- /dev/null
+++ b/changelog/unreleased/enhancement-refactor-upload-inputs
@@ -0,0 +1,6 @@
+Enhancement: Refactor upload input components
+
+We've refactored the upload input components for files and folders into one component.
+
+https://github.com/owncloud/web/pull/6859
+https://github.com/owncloud/web/issues/6819
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 81296331da3..ea8b7624ccc 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -90,10 +90,10 @@
     >
       <oc-list id="upload-list">
         <li>
-          <folder-upload ref="folder-upload" />
+          <resource-upload ref="folder-upload" btn-class="oc-width-1-1" />
         </li>
         <li>
-          <file-upload ref="file-upload" btn-class="oc-width-1-1" />
+          <resource-upload ref="file-upload" btn-class="oc-width-1-1" :is-folder="true" />
         </li>
       </oc-list>
     </oc-drop>
@@ -112,17 +112,14 @@ import { useAppDefaults } from 'web-pkg/src/composables'
 
 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 ResourceUpload from './Upload/ResourceUpload.vue'
 import { defineComponent, getCurrentInstance, onMounted } from '@vue/composition-api'
 import { UppyResource, useUpload } from 'web-runtime/src/composables/upload'
 import { useUploadHelpers } from '../../composables/upload'
 
 export default defineComponent({
   components: {
-    FileUpload,
-    FolderUpload
+    ResourceUpload
   },
   mixins: [MixinFileActions],
   setup() {
diff --git a/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue b/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
deleted file mode 100644
index 1a22d1217a0..00000000000
--- a/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div>
-    <oc-button :class="btnClass" justify-content="left" appearance="raw" @click="triggerUpload">
-      <oc-resource-icon :resource="{ extension: '' }" />
-      <span id="files-file-upload-button">{{ btnLabel }}</span>
-    </oc-button>
-    <input
-      id="fileUploadInput"
-      ref="input"
-      class="upload-input-target"
-      type="file"
-      aria-labelledby="files-file-upload-button"
-      name="file"
-      multiple
-      tabindex="-1"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    btnLabel: {
-      type: String,
-      required: false,
-      default: function () {
-        return this.$gettext('Files')
-      }
-    },
-    btnClass: {
-      type: String,
-      required: false,
-      default: ''
-    }
-  },
-  mounted() {
-    this.$uppyService.registerUploadInput(this.$refs.input)
-  },
-  beforeDestroy() {
-    this.$uppyService.removeUploadInput(this.$refs.input)
-  },
-  methods: {
-    triggerUpload() {
-      this.$refs.input.click()
-    }
-  }
-}
-</script>
-
-<style scoped="true">
-#fileUploadInput {
-  position: absolute;
-  left: -99999px;
-}
-</style>
diff --git a/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue b/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue
deleted file mode 100644
index e28b78f1f2c..00000000000
--- a/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div>
-    <oc-button class="oc-width-1-1" justify-content="left" appearance="raw" @click="triggerUpload">
-      <oc-resource-icon :resource="{ isFolder: true, extension: '' }" />
-      <span id="files-folder-upload-button" v-translate>Folder</span>
-    </oc-button>
-    <input
-      id="folderUploadInput"
-      ref="input"
-      class="upload-input-target"
-      type="file"
-      name="folder"
-      aria-labelledby="files-folder-upload-button"
-      webkitdirectory
-      mozdirectory
-      allowdirs
-      tabindex="-1"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  mounted() {
-    this.$uppyService.registerUploadInput(this.$refs.input)
-  },
-  beforeDestroy() {
-    this.$uppyService.removeUploadInput(this.$refs.input)
-  },
-  methods: {
-    triggerUpload() {
-      this.$refs.input.click()
-    }
-  }
-}
-</script>
-
-<style scoped="true">
-#folderUploadInput {
-  position: absolute;
-  left: -99999px;
-}
-</style>
diff --git a/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue b/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue
new file mode 100644
index 00000000000..7390d19c991
--- /dev/null
+++ b/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <oc-button :class="btnClass" justify-content="left" appearance="raw" @click="triggerUpload">
+      <oc-resource-icon :resource="{ extension: '', isFolder }" />
+      <span :id="uploadLabelId">{{ buttonLabel }}</span>
+    </oc-button>
+    <input
+      :id="inputId"
+      ref="input"
+      v-bind="inputAttrs"
+      class="upload-input-target"
+      type="file"
+      :aria-labelledby="uploadLabelId"
+      :name="isFolder ? 'file' : 'folder'"
+      tabindex="-1"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    btnLabel: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    btnClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    isFolder: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    inputId() {
+      if (this.isFolder) {
+        return 'files-folder-upload-input'
+      }
+      return 'files-file-upload-input'
+    },
+    uploadLabelId() {
+      if (this.isFolder) {
+        return 'files-folder-upload-button'
+      }
+      return 'files-file-upload-button'
+    },
+    buttonLabel() {
+      if (this.btnLabel) {
+        return this.btnLabel
+      }
+      if (this.isFolder) {
+        return this.$gettext('Folder')
+      }
+      return this.$gettext('Files')
+    },
+    inputAttrs() {
+      if (this.isFolder) {
+        return {
+          webkitdirectory: true,
+          mozdirectory: true,
+          allowdirs: true
+        }
+      }
+      return { multiple: true }
+    }
+  },
+  mounted() {
+    this.$uppyService.registerUploadInput(this.$refs.input)
+  },
+  beforeDestroy() {
+    this.$uppyService.removeUploadInput(this.$refs.input)
+  },
+  methods: {
+    triggerUpload() {
+      this.$refs.input.click()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.upload-input-target {
+  position: absolute;
+  left: -99999px;
+}
+</style>
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index 73e398f5908..3d821550044 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -11,10 +11,10 @@
       <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" />
-          <file-upload
+          <resource-upload
             id="files-drop-zone"
             ref="fileUpload"
-            class="uk-flex uk-flex-middle uk-flex-center uk-placeholder"
+            class="oc-flex oc-flex-middle oc-flex-center oc-placeholder"
             :btn-label="$gettext('Drop files here to upload or click to select file')"
           />
           <div id="previews" hidden />
@@ -39,13 +39,13 @@ import { DavProperties, DavProperty } from 'web-pkg/src/constants'
 import { linkRoleUploaderFolder } from '../helpers/share'
 import { createLocationOperations, createLocationPublic } from '../router'
 
-import FileUpload from '../components/AppBar/Upload/FileUpload.vue'
+import ResourceUpload from '../components/AppBar/Upload/ResourceUpload.vue'
 import { getCurrentInstance, onMounted } from '@vue/composition-api/dist/vue-composition-api'
 import { useUpload } from 'web-runtime/src/composables/upload'
 
 export default {
   components: {
-    FileUpload
+    ResourceUpload
   },
   setup() {
     const instance = getCurrentInstance().proxy
diff --git a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.js b/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.js
index 262b95af006..9d563722165 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.js
+++ b/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.js
@@ -22,8 +22,8 @@ const elSelector = {
   uploadButton: '#upload-menu-btn',
   uploadDrop: 'oc-drop-stub #upload-menu-drop',
   uploadMenuList: '#upload-list > li',
-  fileUpload: 'file-upload-stub',
-  folderUpload: 'folder-upload-stub',
+  fileUpload: 'resource-upload-stub',
+  folderUpload: 'resource-upload-stub',
   newFolderBtn: '#new-folder-btn',
   newTextFileBtn: '.new-file-btn-txt',
   newMdFileBtn: '.new-file-btn-md',
@@ -196,8 +196,7 @@ function getWrapper(route = {}, store = {}) {
     stubs: {
       ...stubs,
       'oc-button': false,
-      'file-upload': true,
-      'folder-upload': true
+      'resource-upload': true
     },
     store
   })
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
deleted file mode 100644
index 940d0f15427..00000000000
--- a/packages/web-app-files/tests/unit/components/AppBar/Upload/FolderUpload.spec.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { mount, createLocalVue } from '@vue/test-utils'
-import FolderUpload from '@files/src/components/AppBar/Upload/FolderUpload.vue'
-import DesignSystem from 'owncloud-design-system'
-
-const localVue = createLocalVue()
-localVue.use(DesignSystem)
-
-const selector = {
-  uploadInput: '#folderUploadInput',
-  uploadButton: 'button'
-}
-
-describe('FolderUpload Component', () => {
-  const mountOptions = {
-    propsData: {
-      rootPath: '/',
-      path: '/'
-    },
-    localVue,
-    directives: { translate: jest.fn() },
-    mocks: {
-      $uppyService: {
-        registerUploadInput: jest.fn(),
-        removeUploadInput: jest.fn()
-      }
-    }
-  }
-
-  describe('when upload folder button is clicked', () => {
-    it('should call "triggerUpload"', async () => {
-      const spyTriggerUpload = jest.spyOn(FolderUpload.methods, 'triggerUpload')
-      const wrapper = mount(FolderUpload, mountOptions)
-
-      const uploadButton = wrapper.find(selector.uploadButton)
-      const folderUploadInput = wrapper.find(selector.uploadInput)
-      const spyClickUploadInput = jest.spyOn(folderUploadInput.element, 'click')
-
-      await uploadButton.trigger('click')
-
-      expect(spyTriggerUpload).toHaveBeenCalledTimes(1)
-      expect(spyClickUploadInput).toHaveBeenCalledTimes(1)
-    })
-  })
-})
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/ResourceUpload.spec.js
similarity index 56%
rename from packages/web-app-files/tests/unit/components/AppBar/Upload/FileUpload.spec.js
rename to packages/web-app-files/tests/unit/components/AppBar/Upload/ResourceUpload.spec.js
index 5000efd3932..0fd21d7d091 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/Upload/FileUpload.spec.js
+++ b/packages/web-app-files/tests/unit/components/AppBar/Upload/ResourceUpload.spec.js
@@ -1,19 +1,29 @@
 import { mount, createLocalVue } from '@vue/test-utils'
-import FileUpload from '../../../../../src/components/AppBar/Upload/FileUpload.vue'
+import ResourceUpload from '../../../../../src/components/AppBar/Upload/ResourceUpload.vue'
 import DesignSystem from 'owncloud-design-system'
 
 const Translate = jest.fn()
 
-describe('File Upload Component', () => {
-  it('should render component', () => {
-    const wrapper = mount(FileUpload, getOptions())
+describe('Resource Upload Component', () => {
+  describe('file upload', () => {
+    it('should render component', () => {
+      const wrapper = mount(ResourceUpload, getOptions())
+      expect(wrapper.exists()).toBeTruthy()
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
 
-    expect(wrapper.exists()).toBeTruthy()
+  describe('folder upload', () => {
+    it('should render component', () => {
+      const wrapper = mount(ResourceUpload, getOptions({ isFolder: true }))
+      expect(wrapper.exists()).toBeTruthy()
+      expect(wrapper).toMatchSnapshot()
+    })
   })
 
   describe('when upload file button is clicked', () => {
     it('should call "triggerUpload"', async () => {
-      const wrapper = mount(FileUpload, {
+      const wrapper = mount(ResourceUpload, {
         ...getOptions(),
         stubs: {
           'oc-icon': true,
@@ -23,7 +33,7 @@ describe('File Upload Component', () => {
 
       const spyTriggerUpload = jest.spyOn(wrapper.vm, 'triggerUpload')
       const uploadButton = wrapper.find('button')
-      const fileUploadInput = wrapper.find('#fileUploadInput')
+      const fileUploadInput = wrapper.find('#files-file-upload-input')
       fileUploadInput.element.click = jest.fn()
       await wrapper.vm.$forceUpdate()
 
@@ -35,13 +45,11 @@ describe('File Upload Component', () => {
   })
 })
 
-function getOptions() {
+function getOptions(propsData = {}) {
   const localVue = createLocalVue()
   localVue.use(DesignSystem)
   return {
-    propsData: {
-      path: ''
-    },
+    propsData,
     localVue,
     directives: { Translate },
     mocks: {
diff --git a/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.js.snap b/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.js.snap
new file mode 100644
index 00000000000..2f04bb6f3fb
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.js.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Resource Upload Component file upload should render component 1`] = `<div><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file"><!----></span> <span id="files-file-upload-button">Files</span></button> <input id="files-file-upload-input" type="file" aria-labelledby="files-file-upload-button" name="folder" tabindex="-1" multiple="multiple" class="upload-input-target"></div>`;
+
+exports[`Resource Upload Component folder upload should render component 1`] = `<div><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-folder"><!----></span> <span id="files-folder-upload-button">Folder</span></button> <input id="files-folder-upload-input" type="file" aria-labelledby="files-folder-upload-button" name="file" tabindex="-1" webkitdirectory="true" mozdirectory="true" allowdirs="true" class="upload-input-target"></div>`;
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 69b0ef58120..617511bd48f 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,7 +7,7 @@ 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>
-        <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>
+        <resource-upload-stub btnlabel="Drop files here to upload or click to select file" btnclass="" id="files-drop-zone" class="oc-flex oc-flex-middle oc-flex-center oc-placeholder"></resource-upload-stub>
         <div id="previews" hidden="hidden"></div>
       </div>
       <!---->
@@ -43,7 +43,7 @@ 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>
-        <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>
+        <resource-upload-stub btnlabel="Drop files here to upload or click to select file" btnclass="" id="files-drop-zone" class="oc-flex oc-flex-middle oc-flex-center oc-placeholder"></resource-upload-stub>
         <div id="previews" hidden="hidden"></div>
       </div>
       <div class="oc-text-center">
@@ -67,7 +67,7 @@ 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>
-        <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>
+        <resource-upload-stub btnlabel="Drop files here to upload or click to select file" btnclass="" id="files-drop-zone" class="oc-flex oc-flex-middle oc-flex-center oc-placeholder"></resource-upload-stub>
         <div id="previews" hidden="hidden"></div>
       </div>
       <!---->
diff --git a/tests/acceptance/pageObjects/personalPage.js b/tests/acceptance/pageObjects/personalPage.js
index 1b67d535f50..dad7db7c0c1 100644
--- a/tests/acceptance/pageObjects/personalPage.js
+++ b/tests/acceptance/pageObjects/personalPage.js
@@ -404,10 +404,10 @@ module.exports = {
       selector: '#files-file-upload-button'
     },
     fileUploadInput: {
-      selector: '#fileUploadInput'
+      selector: '#files-file-upload-input'
     },
     folderUploadInput: {
-      selector: '#folderUploadInput'
+      selector: '#files-folder-upload-input'
     },
     fileUploadProgress: {
       selector: '#upload-info'
diff --git a/tests/e2e/support/objects/app-files/page/public.ts b/tests/e2e/support/objects/app-files/page/public.ts
index 0bf0e9f7b87..efb4e315f2b 100644
--- a/tests/e2e/support/objects/app-files/page/public.ts
+++ b/tests/e2e/support/objects/app-files/page/public.ts
@@ -27,7 +27,7 @@ export class Public {
     const startUrl = this.#page.url()
     const resourceSelector = `[data-test-resource-name="%s"]`
     await this.#page
-      .locator('//input[@id="fileUploadInput"]')
+      .locator('//input[@id="files-file-upload-input"]')
       .setInputFiles(resources.map((file) => file.path))
     const names = resources.map((file) => path.basename(file.name))
     await Promise.all(
diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index 80b16c213df..3d16c1ad9e8 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -77,7 +77,7 @@ export const uploadResource = async (args: uploadResourceArgs): Promise<void> =>
   }
 
   await page.locator('#upload-menu-btn').click()
-  await page.locator('#fileUploadInput').setInputFiles(resources.map((file) => file.path))
+  await page.locator('#files-file-upload-input').setInputFiles(resources.map((file) => file.path))
 
   if (createVersion) {
     await page.locator('.oc-modal-body-actions-confirm').click()