diff --git a/__tests__/setup.ts b/__tests__/setup.ts
new file mode 100644
index 00000000..9887e310
--- /dev/null
+++ b/__tests__/setup.ts
@@ -0,0 +1,2 @@
+// Missing is jsdom, ref: https://github.com/jsdom/jsdom/issues/2555
+import 'blob-polyfill'
diff --git a/__tests__/utils/fileTree.spec.ts b/__tests__/utils/fileTree.spec.ts
new file mode 100644
index 00000000..eca9dbb1
--- /dev/null
+++ b/__tests__/utils/fileTree.spec.ts
@@ -0,0 +1,167 @@
+import { describe, expect, it } from 'vitest'
+import { Directory } from '../../lib/utils/fileTree.ts'
+
+describe('file tree utils', () => {
+	it('Can create a directory', () => {
+		const dir = new Directory('base')
+		// expected no exception
+		expect(dir.name).toBe(dir.webkitRelativePath)
+		expect(dir.name).toBe('base')
+	})
+
+	it('Can create a virtual root directory', () => {
+		const dir = new Directory('')
+		// expected no exception
+		expect(dir.name).toBe(dir.webkitRelativePath)
+		expect(dir.name).toBe('')
+	})
+
+	it('Can create a nested directory', () => {
+		const dir = new Directory('base/name')
+		// expected no exception
+		expect(dir.name).toBe('name')
+		expect(dir.webkitRelativePath).toBe('base/name')
+	})
+
+	it('Can create a directory with content', () => {
+		const dir = new Directory('base', [new File(['a'.repeat(1024)], 'my-file')])
+		// expected no exception
+		expect(dir.name).toBe('base')
+		expect(dir.children).toHaveLength(1)
+		expect(dir.children[0].name).toBe('my-file')
+	})
+
+	it('Can create a virtual root with content', async () => {
+		const dir = new Directory('', [new File(['I am bar.txt'], 'a/bar.txt')])
+		expect(dir.name).toBe('')
+
+		expect(dir.children).toHaveLength(1)
+		expect(dir.children[0]).toBeInstanceOf(Directory)
+		expect(dir.children[0].name).toBe('a')
+		expect(dir.children[0].webkitRelativePath).toBe('a')
+
+		const dirA = dir.children[0] as Directory
+		expect(dirA.children).toHaveLength(1)
+		expect(await dirA.children[0].text()).toBe('I am bar.txt')
+	})
+
+	it('Reads the size from the content', () => {
+		const dir = new Directory('base', [new File(['a'.repeat(1024)], 'my-file')])
+		// expected no exception
+		expect(dir.children).toHaveLength(1)
+		expect(dir.size).toBe(1024)
+	})
+
+	it('Reads the lastModified from the content', () => {
+		const dir = new Directory('base', [new File(['a'.repeat(1024)], 'my-file', { lastModified: 999 })])
+		// expected no exception
+		expect(dir.children).toHaveLength(1)
+		expect(dir.lastModified).toBe(999)
+	})
+
+	it('Keeps its orginal name', () => {
+		// The conflict picker will force-overwrite the name attribute so we emulate this
+		const dir = new Directory('base')
+		expect(dir.name).toBe('base')
+		expect(dir.originalName).toBe('base')
+
+		Object.defineProperty(dir, 'name', { value: 'other-base' })
+		expect(dir.name).toBe('other-base')
+		expect(dir.originalName).toBe('base')
+	})
+
+	it('can add a child', async () => {
+		const dir = new Directory('base')
+		expect(dir.children).toHaveLength(0)
+
+		await dir.addChild(new File(['a'.repeat(1024)], 'my-file'))
+		expect(dir.children).toHaveLength(1)
+		expect(dir.children[0].name).toBe('my-file')
+	})
+
+	it('can add a child to existing ones', async () => {
+		const dir = new Directory('base', [new File(['a'.repeat(1024)], 'my-file')])
+		expect(dir.children).toHaveLength(1)
+
+		await dir.addChild(new File(['a'.repeat(1024)], 'my-other-file'))
+		expect(dir.children).toHaveLength(2)
+		expect(dir.children[0].name).toBe('my-file')
+		expect(dir.children[1].name).toBe('my-other-file')
+	})
+
+	it('Can detect invalid children added', async () => {
+		const dir = new Directory('base/valid')
+
+		await expect(() => dir.addChild(new File([], 'base/invalid/foo.txt'))).rejects.toThrowError(/File .+ is not a child of .+/)
+	})
+
+	it('Can get a child', async () => {
+		const dir = new Directory('base', [new File([], 'base/file')])
+
+		expect(dir.getChild('file')).toBeInstanceOf(File)
+	})
+
+	it('returns null if child is not found', async () => {
+		const dir = new Directory('base/valid')
+
+		expect(dir.getChild('foo')).toBeNull()
+	})
+
+	it('Can add nested children', async () => {
+		const dir = new Directory('a')
+		dir.addChild(new File(['I am file D'], 'a/b/c/d.txt'))
+
+		expect(dir.children).toHaveLength(1)
+		expect(dir.children[0]).toBeInstanceOf(Directory)
+		const dirB = dir.children[0] as Directory
+		expect(dirB.webkitRelativePath).toBe('a/b')
+		expect(dirB.name).toBe('b')
+
+		expect(dirB.children).toHaveLength(1)
+		expect(dirB.children[0]).toBeInstanceOf(Directory)
+		const dirC = dirB.children[0] as Directory
+		expect(dirC.name).toBe('c')
+		expect(dirC.webkitRelativePath).toBe('a/b/c')
+
+		expect(dirC.children).toHaveLength(1)
+		expect(await dirC.children[0].text()).toBe('I am file D')
+	})
+
+	it('Can add to existing nested children', async () => {
+		// First we start like the "can add nested" test
+		const dir = new Directory('a')
+		dir.addChild(new File(['I am file D'], 'a/b/c/d.txt'))
+
+		// But now we add a second file
+		dir.addChild(new File(['I am file E'], 'a/b/e.txt'))
+
+		expect(dir.children).toHaveLength(1)
+		expect(dir.children[0]).toBeInstanceOf(Directory)
+		const dirB = dir.children[0] as Directory
+		expect(dirB.webkitRelativePath).toBe('a/b')
+		expect(dirB.name).toBe('b')
+
+		expect(dirB.children).toHaveLength(2)
+		expect(dirB.getChild('c')).toBeInstanceOf(Directory)
+		expect(dirB.getChild('e.txt')).toBeInstanceOf(File)
+		expect(await dirB.getChild('e.txt')!.text()).toBe('I am file E')
+	})
+
+	it('updates the stats when adding new children', async () => {
+		const dir = new Directory('base')
+
+		expect(dir.size).toBe(0)
+
+		await dir.addChild(new File(['a'.repeat(1024)], 'my-file', { lastModified: 999 }))
+		expect(dir.size).toBe(1024)
+		expect(dir.lastModified).toBe(999)
+
+		await dir.addChild(new File(['a'.repeat(1024)], 'my-other-file', { lastModified: 8888 }))
+		expect(dir.size).toBe(2048)
+		expect(dir.lastModified).toBe(8888)
+
+		await dir.addChild(new File(['a'.repeat(1024)], 'my-older-file', { lastModified: 500 }))
+		expect(dir.size).toBe(3072)
+		expect(dir.lastModified).toBe(8888)
+	})
+})
diff --git a/cypress/components/UploadPicker.cy.ts b/cypress/components/UploadPicker.cy.ts
index 38110166..eadcb25c 100644
--- a/cypress/components/UploadPicker.cy.ts
+++ b/cypress/components/UploadPicker.cy.ts
@@ -4,6 +4,7 @@
 import { Folder, Permission, addNewFileMenuEntry, type Entry } from '@nextcloud/files'
 import { generateRemoteUrl } from '@nextcloud/router'
 import { UploadPicker, getUploader } from '../../lib/index.ts'
+import { basename } from 'path'
 
 describe('UploadPicker rendering', () => {
 	afterEach(() => {
@@ -106,6 +107,10 @@ describe('UploadPicker valid uploads', () => {
 
 describe('UploadPicker invalid uploads', () => {
 
+	// Cypress shares the module state between tests, we need to reset it
+	// ref: https://github.com/cypress-io/cypress/issues/25441
+	beforeEach(() => getUploader(true))
+
 	afterEach(() => {
 		// Make sure we clear the body
 		cy.window().then((win) => {
@@ -171,7 +176,82 @@ describe('UploadPicker invalid uploads', () => {
 		cy.wait('@upload')
 		// Should not have been called more than once as the first file is invalid
 		cy.get('@upload.all').should('have.length', 1)
-		cy.get('body').should('contain', '"$" is not allowed inside a file name.')
+		cy.contains('[role="dialog"]', 'Invalid file name')
+			.should('be.visible')
+	})
+
+	it('Can rename invalid files', () => {
+		// Make sure we reset the destination
+		// so other tests do not interfere
+		const propsData = {
+			destination: new Folder({
+				id: 56,
+				owner: 'user',
+				source: generateRemoteUrl('dav/files/user'),
+				permissions: Permission.ALL,
+				root: '/files/user',
+			}),
+			forbiddenCharacters: ['$', '#', '~', '&'],
+		}
+
+		// Mount picker
+		cy.mount(UploadPicker, { propsData }).as('uploadPicker')
+
+		// Label is displayed before upload
+		cy.get('[data-cy-upload-picker]').contains('New').should('be.visible')
+
+		// Check and init aliases
+		cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
+		cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
+
+		// Intercept single upload
+		cy.intercept('PUT', '/remote.php/dav/files/*/*', (req) => {
+			req.reply({
+				statusCode: 201,
+				delay: 2000,
+			})
+		}).as('upload')
+
+		// Upload 2 files
+		cy.get('@input').attachFile({
+			// Fake file of 5 MB
+			fileContent: new Blob([new ArrayBuffer(2 * 1024 * 1024)]),
+			fileName: 'invalid-image$.jpg',
+			mimeType: 'image/jpeg',
+			encoding: 'utf8',
+			lastModified: new Date().getTime(),
+		})
+
+		cy.get('@input').attachFile({
+			// Fake file of 5 MB
+			fileContent: new Blob([new ArrayBuffer(2 * 1024 * 1024)]),
+			fileName: 'valid-image.jpg',
+			mimeType: 'image/jpeg',
+			encoding: 'utf8',
+			lastModified: new Date().getTime(),
+		})
+
+		cy.get('[data-cy-upload-picker] .upload-picker__progress')
+			.as('progress')
+			.should('not.be.visible')
+
+		cy.contains('[role="dialog"]', 'Invalid file name')
+			.should('be.visible')
+			.contains('button', 'Rename')
+			.click()
+
+		cy.wait('@upload')
+		// Should have been called two times with an valid name now
+		cy.get('@upload.all').should('have.length', 2).then((array): void => {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			const requests = (array as unknown as any[]).map(({ request }) => basename(request.url))
+			// The valid one is included
+			expect(requests).to.contain('valid-image.jpg')
+			// The invalid is NOT included
+			expect(requests).to.not.contain('invalid-image$.jpg')
+			// The invalid was made valid
+			expect(requests).to.contain('invalid-image-.jpg')
+		})
 	})
 })
 
diff --git a/l10n/messages.pot b/l10n/messages.pot
index 701d92ad..4753d7ff 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -2,6 +2,9 @@ msgid ""
 msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 
+msgid "\"{filename}\" contains invalid characters, how do you want to continue?"
+msgstr ""
+
 msgid "{count} file conflict"
 msgid_plural "{count} files conflict"
 msgstr[0] ""
@@ -34,6 +37,9 @@ msgstr ""
 msgid "Continue"
 msgstr ""
 
+msgid "Create new"
+msgstr ""
+
 msgid "estimating time left"
 msgstr ""
 
@@ -43,6 +49,9 @@ msgstr ""
 msgid "If you select both versions, the incoming file will have a number added to its name."
 msgstr ""
 
+msgid "Invalid file name"
+msgstr ""
+
 msgid "Last modified date unknown"
 msgstr ""
 
@@ -58,6 +67,9 @@ msgstr ""
 msgid "Preview image"
 msgstr ""
 
+msgid "Rename"
+msgstr ""
+
 msgid "Select all checkboxes"
 msgstr ""
 
@@ -67,6 +79,9 @@ msgstr ""
 msgid "Select all new files"
 msgstr ""
 
+msgid "Skip"
+msgstr ""
+
 msgid "Skip this file"
 msgid_plural "Skip {count} files"
 msgstr[0] ""
@@ -75,10 +90,16 @@ msgstr[1] ""
 msgid "Unknown size"
 msgstr ""
 
-msgid "Upload cancelled"
+msgid "Upload files"
 msgstr ""
 
-msgid "Upload files"
+msgid "Upload folders"
+msgstr ""
+
+msgid "Upload from device"
+msgstr ""
+
+msgid "Upload has been cancelled"
 msgstr ""
 
 msgid "Upload progress"
diff --git a/lib/components/ConflictPicker.vue b/lib/components/ConflictPicker.vue
index 3cf52f7d..809e4a63 100644
--- a/lib/components/ConflictPicker.vue
+++ b/lib/components/ConflictPicker.vue
@@ -101,7 +101,6 @@ import type { Node } from '@nextcloud/files'
 import type { PropType } from 'vue'
 import type { ConflictResolutionResult } from '../index.ts'
 
-import { basename, extname } from 'path'
 import { defineComponent } from 'vue'
 import { showError } from '@nextcloud/dialogs'
 
@@ -112,6 +111,7 @@ import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 import { isFileSystemEntry } from '../utils/filesystem.ts'
+import { getUniqueName } from '../utils/uniqueName.ts'
 import { n, t } from '../utils/l10n.ts'
 import logger from '../utils/logger.ts'
 import NodesPicker from './NodesPicker.vue'
@@ -285,7 +285,7 @@ export default defineComponent({
 			this.$emit('submit', {
 				selected: [],
 				renamed: [],
-			} as ConflictResolutionResult)
+			} as ConflictResolutionResult<File>)
 		},
 
 		onSubmit() {
@@ -313,7 +313,7 @@ export default defineComponent({
 			if (toRename.length > 0) {
 				toRename.forEach(file => {
 					const name = (file instanceof File || isFileSystemEntry(file)) ? file.name : file.basename
-					const newName = this.getUniqueName(name, directoryContent)
+					const newName = getUniqueName(name, directoryContent)
 					// If File, create a new one with the new name
 					if (file instanceof File || isFileSystemEntry(file)) {
 						// Keep the original file object and force rename
@@ -340,25 +340,7 @@ export default defineComponent({
 			this.$emit('submit', {
 				selected,
 				renamed,
-			} as ConflictResolutionResult)
-		},
-
-		/**
-		 * Get a unique name for a file based
-		 * on the existing directory content.
-		 * @param {string} name The original file name with extension
-		 * @param {string} names The existing directory content names
-		 * @return {string} A unique name
-		 * TODO: migrate to @nextcloud/files
-		 */
-		getUniqueName(name: string, names: string[]): string {
-			let newName = name
-			let i = 1
-			while (names.includes(newName)) {
-				const ext = extname(name)
-				newName = `${basename(name, ext)} (${i++})${ext}`
-			}
-			return newName
+			} as ConflictResolutionResult<File|Node|FileSystemEntry>)
 		},
 
 		/**
diff --git a/lib/components/UploadPicker.vue b/lib/components/UploadPicker.vue
index 08f70d36..d9e312af 100644
--- a/lib/components/UploadPicker.vue
+++ b/lib/components/UploadPicker.vue
@@ -9,25 +9,41 @@
 			:disabled="disabled"
 			data-cy-upload-picker-add
 			type="secondary"
-			@click="onClick">
+			@click="onTriggerPick()">
 			<template #icon>
-				<Plus title="" :size="20" decorative />
+				<IconPlus :size="20" />
 			</template>
 			{{ buttonName }}
 		</NcButton>
 		<NcActions v-else
 			:menu-name="buttonName"
-			:menu-title="addLabel"
+			:menu-title="t('New')"
 			type="secondary">
 			<template #icon>
-				<Plus title="" :size="20" decorative />
+				<IconPlus :size="20" />
 			</template>
-			<NcActionButton data-cy-upload-picker-add :close-after-click="true" @click="onClick">
+
+			<NcActionCaption :name="t('Upload from device')" />
+
+			<NcActionButton data-cy-upload-picker-add :close-after-click="true" @click="onTriggerPick()">
 				<template #icon>
-					<Upload title="" :size="20" decorative />
+					<IconUpload :size="20" />
 				</template>
-				{{ uploadLabel }}
+				{{ t('Upload files') }}
 			</NcActionButton>
+			<NcActionButton v-if="canUploadFolders"
+				close-after-click
+				data-cy-upload-picker-add-folders
+				@click="onTriggerPick(true)">
+				<template #icon>
+					<IconFolderUpload style="color: var(--color-primary-element)" :size="20" />
+				</template>
+				{{ t('Upload folders') }}
+			</NcActionButton>
+
+			<NcActionSeparator v-if="newFileMenuEntries.length > 0" />
+
+			<NcActionCaption v-if="newFileMenuEntries.length > 0" :name="t('Create new')" />
 
 			<!-- Custom new file entries -->
 			<NcActionButton v-for="entry in newFileMenuEntries"
@@ -35,7 +51,7 @@
 				:icon="entry.iconClass"
 				:close-after-click="true"
 				class="upload-picker__menu-entry"
-				@click="entry.handler(destination, content)">
+				@click="entry.handler(destination, currentContent)">
 				<template v-if="entry.iconSvgInline" #icon>
 					<NcIconSvgWrapper :svg="entry.iconSvgInline" />
 				</template>
@@ -45,7 +61,7 @@
 
 		<!-- Progressbar and status -->
 		<div v-show="isUploading" class="upload-picker__progress">
-			<NcProgressBar :aria-label="progressLabel"
+			<NcProgressBar :aria-label="t('Upload progress')"
 				:aria-describedby="progressTimeId"
 				:error="hasFailure"
 				:value="progress"
@@ -59,22 +75,21 @@
 		<NcButton v-if="isUploading"
 			class="upload-picker__cancel"
 			type="tertiary"
-			:aria-label="cancelLabel"
+			:aria-label="t('Cancel uploads')"
 			data-cy-upload-picker-cancel
 			@click="onCancel">
 			<template #icon>
-				<Cancel title=""
-					:size="20" />
+				<IconCancel :size="20" />
 			</template>
 		</NcButton>
 
 		<!-- Hidden files picker input -->
-		<input v-show="false"
-			ref="input"
-			type="file"
+		<input ref="input"
 			:accept="accept?.join?.(', ')"
 			:multiple="multiple"
+			class="hidden-visually"
 			data-cy-upload-picker-input
+			type="file"
 			@change="onPick">
 	</form>
 </template>
@@ -82,40 +97,50 @@
 <script lang="ts">
 import type { Entry, Node } from '@nextcloud/files'
 import type { PropType } from 'vue'
+import type { Upload } from '../upload.ts'
+import type { Directory } from '../utils/fileTree'
 
+import { DialogBuilder, showWarning } from '@nextcloud/dialogs'
 import { getNewFileMenuEntries, Folder } from '@nextcloud/files'
-import { showError } from '@nextcloud/dialogs'
 import makeEta from 'simple-eta'
 import Vue from 'vue'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionCaption from '@nextcloud/vue/dist/Components/NcActionCaption.js'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
 
-import Cancel from 'vue-material-design-icons/Cancel.vue'
-import Plus from 'vue-material-design-icons/Plus.vue'
-import Upload from 'vue-material-design-icons/Upload.vue'
+import IconCancel from 'vue-material-design-icons/Cancel.vue'
+import IconFolderUpload from 'vue-material-design-icons/FolderUpload.vue'
+import IconPlus from 'vue-material-design-icons/Plus.vue'
+import IconUpload from 'vue-material-design-icons/Upload.vue'
 
-import { getUploader, openConflictPicker, hasConflict } from '../index.ts'
+import { getUploader, openConflictPicker, getConflicts } from '../index.ts'
 import { Status } from '../uploader.ts'
 import { Status as UploadStatus } from '../upload.ts'
+import { getUniqueName } from '../utils/uniqueName'
 import { t } from '../utils/l10n.ts'
 import logger from '../utils/logger.ts'
+import PCancelable from 'p-cancelable'
 
 export default Vue.extend({
 	name: 'UploadPicker',
 
 	components: {
-		Cancel,
+		IconCancel,
+		IconFolderUpload,
+		IconPlus,
+		IconUpload,
 		NcActionButton,
+		NcActionCaption,
+		NcActionSeparator,
 		NcActions,
 		NcButton,
 		NcIconSvgWrapper,
 		NcProgressBar,
-		Plus,
-		Upload,
 	},
 
 	props: {
@@ -135,11 +160,17 @@ export default Vue.extend({
 			type: Folder,
 			default: undefined,
 		},
+		allowFolders: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * List of file present in the destination folder
+		 * It is also possible to provide a function that takes a relative path to the current directory and returns the content of it
+		 * Note: If a function is passed it should return the current base directory when no path or an empty is passed
 		 */
 		content: {
-			type: Array as PropType<Node[]>,
+			type: [Array, Function] as PropType<Node[]|((relativePath?: string) => Node[]|PromiseLike<Node[]>)>,
 			default: () => [],
 		},
 		forbiddenCharacters: {
@@ -148,29 +179,43 @@ export default Vue.extend({
 		},
 	},
 
-	data() {
+	setup() {
 		return {
-			addLabel: t('New'),
-			cancelLabel: t('Cancel uploads'),
-			uploadLabel: t('Upload files'),
-			progressLabel: t('Upload progress'),
+			t,
+
+			// non reactive data / properties
 			progressTimeId: `nc-uploader-progress-${Math.random().toString(36).slice(7)}`,
+		}
+	},
 
+	data() {
+		return {
 			eta: null,
 			timeLeft: '',
 
+			currentContent: [] as Node[],
 			newFileMenuEntries: [] as Entry[],
 			uploadManager: getUploader(),
 		}
 	},
 
 	computed: {
+		/**
+		 * Check whether the current browser supports uploading directories
+		 * Hint: This does not check if the current connection supports this, as some browsers require a secure context!
+		 */
+		canUploadFolders() {
+			return this.allowFolders && 'webkitdirectory' in document.createElement('input')
+		},
+
 		totalQueueSize() {
 			return this.uploadManager.info?.size || 0
 		},
+
 		uploadedQueueSize() {
 			return this.uploadManager.info?.progress || 0
 		},
+
 		progress() {
 			return Math.round(this.uploadedQueueSize / this.totalQueueSize * 100) || 0
 		},
@@ -180,13 +225,13 @@ export default Vue.extend({
 		},
 
 		hasFailure() {
-			return this.queue?.filter(upload => upload.status === UploadStatus.FAILED).length !== 0
+			return this.queue?.filter((upload: Upload) => upload.status === UploadStatus.FAILED).length !== 0
 		},
 		isUploading() {
 			return this.queue?.length > 0
 		},
 		isAssembling() {
-			return this.queue?.filter(upload => upload.status === UploadStatus.ASSEMBLING).length !== 0
+			return this.queue?.filter((upload: Upload) => upload.status === UploadStatus.ASSEMBLING).length !== 0
 		},
 		isPaused() {
 			return this.uploadManager.info?.status === Status.PAUSED
@@ -197,11 +242,27 @@ export default Vue.extend({
 			if (this.isUploading) {
 				return undefined
 			}
-			return this.addLabel
+			return t('New')
 		},
 	},
 
 	watch: {
+		allowFolders: {
+			immediate: true,
+			handler() {
+				if (typeof this.content !== 'function' && this.allowFolders) {
+					logger.error('[UploadPicker] Setting `allowFolders` is only allowed if `content` is a function')
+				}
+			},
+		},
+
+		content: {
+			immediate: true,
+			async handler() {
+				this.currentContent = await this.getContent()
+			},
+		},
+
 		destination(destination) {
 			this.setDestination(destination)
 		},
@@ -240,54 +301,124 @@ export default Vue.extend({
 	methods: {
 		/**
 		 * Trigger file picker
+		 * @param uploadFolders Upload folders
 		 */
-		onClick() {
-			this.$refs.input.click()
+		onTriggerPick(uploadFolders = false) {
+			const input = this.$refs.input as HTMLInputElement
+			// Setup directory picking if enabled
+			if (this.canUploadFolders) {
+				input.webkitdirectory = uploadFolders
+			}
+			// Trigger click on the input to open the file picker
+			this.$nextTick(() => input.click())
 		},
 
 		/**
-		 * Start uploading
+		 * Helper for backwards compatibility that queries the content of the current directory
+		 * @param path The current path
+		 */
+		async getContent(path?: string) {
+			return Array.isArray(this.content) ? this.content : await this.content(path)
+		},
+
+		/**
+		 * Show a dialog to let the user decide how to proceed with invalid filenames.
+		 * The returned promise resolves to true if the file should be renamed and resolves to false to skip it the file.
+		 * The promise rejects when the user want to abort the operation.
+		 *
+		 * @param filename The invalid file name
 		 */
-		async onPick() {
-			let files = [...this.$refs.input.files] as File[]
-
-			// Detect and resolve conflicts
-			if (hasConflict(files, this.content)) {
-				// List of incoming files that are in conflict
-				const conflicts = files.filter((file: File) => {
-					return this.content.find((node: Node) => node.basename === file.name)
-				}).filter(Boolean) as File[]
-
-				// List of incoming files that are NOT in conflict
-				const uploads = files.filter((file: File) => {
-					return !conflicts.includes(file)
-				})
-
-				try {
-					// Let the user choose what to do with the conflicting files
-					const { selected, renamed } = await openConflictPicker(this.destination.basename, conflicts, this.content)
-					files = [...uploads, ...selected, ...renamed]
-				} catch (error) {
-					// User cancelled
-					showError(t('Upload cancelled'))
-					return
+		async showInvalidFileNameDialog(filename: string) {
+			return new PCancelable(async (resolve, reject) => {
+				await new DialogBuilder()
+					.setName(t('Invalid file name'))
+					.setSeverity('error')
+					.setText(t('"{filename}" contains invalid characters, how do you want to continue?', { filename }))
+					.setButtons([
+						{
+							label: t('Cancel'),
+							type: 'error',
+							callback: reject,
+						},
+						{
+							label: t('Skip'),
+							callback: () => resolve(false),
+						},
+						{
+							label: t('Rename'),
+							type: 'primary',
+							callback: () => resolve(true),
+						},
+					])
+					.build()
+					.show()
+			})
+		},
+
+		async handleConflicts(nodes: Array<File|Directory>, path: string): Promise<Array<File|Directory>|false> {
+			try {
+				const content = path === '' ? this.currentContent : await this.getContent(path).catch(() => [])
+				const conflicts = getConflicts(nodes, content)
+
+				// First handle conflicts as this might already remove invalid files
+				if (conflicts.length > 0) {
+					const { selected, renamed } = await openConflictPicker(path, conflicts, content, { recursive: true })
+					nodes = [...selected, ...renamed]
 				}
-			}
 
-			files.forEach(file => {
-				const forbiddenCharacters = (this.forbiddenCharacters || []) as string[]
-				const forbiddenChar = forbiddenCharacters.find(char => file.name.includes(char))
-
-				if (forbiddenChar) {
-					showError(t(`"${forbiddenChar}" is not allowed inside a file name.`))
-				} else {
-					this.uploadManager.upload(file.name, file)
-						.catch(() => {
-							// Ignore errors, they are handled by the upload manager
-						})
+				// We need to check all files for invalid characters
+				const filesToUpload: Array<File|Directory> = []
+				for (const file of nodes) {
+					const invalid = this.forbiddenCharacters.some((c) => file.name.includes(c))
+					// No invalid characters used on this file, so just continue
+					if (!invalid) {
+						filesToUpload.push(file)
+						continue
+					}
+
+					// Hanle invalid path
+					if (await this.showInvalidFileNameDialog(file.name)) {
+						// create a new valid path name
+						let newName = this.replaceInvalidCharacters(file.name)
+						newName = getUniqueName(newName, nodes.map((node) => node.name))
+						Object.defineProperty(file, 'name', { value: newName })
+						filesToUpload.push(file)
+					}
 				}
-			})
-			this.$refs.form.reset()
+				return filesToUpload
+			} catch (error) {
+				logger.debug('Upload has been cancelled', { error })
+				showWarning(t('Upload has been cancelled'))
+				return false
+			}
+		},
+
+		/**
+		 * Helper function to replace invalid characters in text
+		 * @param text Text to replace invalid character
+		 */
+		 replaceInvalidCharacters(text: string): string {
+			const invalidReplacement = ['-', '_', ' '].filter((c) => !this.forbiddenCharacters.includes(c))[0] ?? 'x'
+			this.forbiddenCharacters.forEach((c) => { text = text.replaceAll(c, invalidReplacement) })
+			return text
+		},
+
+		/**
+		 * Start uploading
+		 */
+		onPick() {
+			const input = this.$refs.input as HTMLInputElement
+			const files = input.files ? Array.from(input.files) : []
+
+			this.uploadManager
+				.batchUpload('', files, this.handleConflicts)
+				.catch((error) => logger.debug('Error while uploading', { error }))
+				.finally(() => this.resetForm())
+		},
+
+		resetForm() {
+			const form = this.$refs.form as HTMLFormElement
+			form?.reset()
 		},
 
 		/**
@@ -297,7 +428,7 @@ export default Vue.extend({
 			this.uploadManager.queue.forEach(upload => {
 				upload.cancel()
 			})
-			this.$refs.form.reset()
+			this.resetForm()
 		},
 
 		updateStatus() {
@@ -306,7 +437,7 @@ export default Vue.extend({
 				return
 			}
 
-			const estimate = Math.round(this.eta.estimate())
+			const estimate = Math.round(this.eta!.estimate())
 
 			if (estimate === Infinity) {
 				this.timeLeft = t('estimating time left')
@@ -326,7 +457,7 @@ export default Vue.extend({
 			this.timeLeft = t('{seconds} seconds left', { seconds: estimate })
 		},
 
-		setDestination(destination) {
+		setDestination(destination: Folder) {
 			if (!this.destination) {
 				logger.debug('Invalid destination')
 				return
@@ -338,7 +469,7 @@ export default Vue.extend({
 			this.newFileMenuEntries = getNewFileMenuEntries(destination)
 		},
 
-		onUploadCompletion(upload) {
+		onUploadCompletion(upload: Upload) {
 			if (upload.status === UploadStatus.FAILED) {
 				this.$emit('failed', upload)
 			} else {
diff --git a/lib/index.ts b/lib/index.ts
index e70d7092..c7185c9d 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -18,10 +18,10 @@ export type ConflictResolutionResult<T extends File|FileSystemEntry|Node> = {
 /**
  * Get an Uploader instance
  */
-export function getUploader(): Uploader {
+export function getUploader(forceRecreate = false): Uploader {
 	const isPublic = document.querySelector('input[name="isPublic"][value="1"]') !== null
 
-	if (_uploader instanceof Uploader) {
+	if (_uploader instanceof Uploader && !forceRecreate) {
 		return _uploader
 	}
 
diff --git a/lib/uploader.ts b/lib/uploader.ts
index bcb8f440..4a7ecc41 100644
--- a/lib/uploader.ts
+++ b/lib/uploader.ts
@@ -1,10 +1,12 @@
 import type { AxiosError, AxiosResponse } from 'axios'
+import type { WebDAVClient } from 'webdav'
 
 import { CanceledError } from 'axios'
 import { encodePath } from '@nextcloud/paths'
-import { Folder, Permission } from '@nextcloud/files'
+import { Folder, Permission, davGetClient } from '@nextcloud/files'
 import { generateRemoteUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
+import { normalize } from 'path'
 import axios from '@nextcloud/axios'
 import PCancelable from 'p-cancelable'
 import PQueue from 'p-queue'
@@ -12,6 +14,9 @@ import PQueue from 'p-queue'
 import { getChunk, initChunkWorkspace, uploadData } from './utils/upload.js'
 import { getMaxChunksSize } from './utils/config.js'
 import { Status as UploadStatus, Upload } from './upload.js'
+import { isFileSystemFileEntry } from './utils/filesystem.js'
+import { Directory } from './utils/fileTree.js'
+import { t } from './utils/l10n.js'
 import logger from './utils/logger.js'
 
 export enum Status {
@@ -63,6 +68,9 @@ export class Uploader {
 		}
 		this.destination = destinationFolder
 
+		// Reset when upload queue is done
+		this._jobQueue.addListener('idle', () => this.reset())
+
 		logger.debug('Upload workspace initialized', {
 			destination: this.destination,
 			root: this.root,
@@ -163,34 +171,199 @@ export class Uploader {
 		this._notifiers.push(notifier)
 	}
 
+	/**
+	 * Notify listeners of the upload completion
+	 * @param upload The upload that finished
+	 */
+	private _notifyAll(upload: Upload): void {
+		for (const notifier of this._notifiers) {
+			try {
+				notifier(upload)
+			} catch (error) {
+				logger.warn('Error in upload notifier', { error, source: upload.source })
+			}
+		}
+	}
+
+	/**
+	 * Uploads multiple files or folders while preserving the relative path (if available)
+	 * @param {string} destination The destination path relative to the root folder. e.g. /foo/bar (a file "a.txt" will be uploaded then to "/foo/bar/a.txt")
+	 * @param {Array<File|FileSystemEntry>} files The files and/or folders to upload
+	 * @param {Function} callback Callback that receives the nodes in the current folder and the current path to allow resolving conflicts, all nodes that are returned will be uploaded (if a folder does not exist it will be created)
+	 * @return Cancelable promise that resolves to an array of uploads
+	 *
+	 * @example
+	 * ```ts
+	 * // For example this is from handling the onchange event of an input[type=file]
+	 * async handleFiles(files: File[]) {
+	 *   this.uploads = await this.uploader.batchUpload('uploads', files, this.handleConflicts)
+	 * }
+	 *
+	 * async handleConflicts(nodes: File[], currentPath: string) {
+	 *   const conflicts = getConflicts(nodes, this.fetchContent(currentPath))
+	 *   if (conficts.length === 0) {
+	 *     // No conflicts so upload all
+	 *     return nodes
+	 *   } else {
+	 *     // Open the conflict picker to resolve conflicts
+	 *     try {
+	 *       const { selected, renamed } = await openConflictPicker(currentPath, conflicts, this.fetchContent(currentPath), { recursive: true })
+	 *       return [...selected, ...renamed]
+	 *     } catch (e) {
+	 *       return false
+	 *     }
+	 *   }
+	 * }
+	 * ```
+	 */
+	batchUpload(
+		destination: string,
+		files: (File|FileSystemEntry)[],
+		callback?: (nodes: Array<File|Directory>,
+		currentPath: string) => Promise<Array<File|Directory>|false>,
+	): PCancelable<Upload[]> {
+		const rootFolder = new Directory('', files)
+		if (!callback) {
+			callback = async (files: Array<File|Directory>) => files
+		}
+
+		try {
+			// Increase concurrency to 4 to keep 3 parallel uploads as one if blocked by the directory meta-upload
+			this._jobQueue.concurrency += 1
+
+			return new PCancelable(async (resolve, reject, onCancel) => {
+				try {
+					const value = await this._jobQueue.add(() => {
+						const promise = this.uploadDirectory(destination, rootFolder, callback, davGetClient(this.root))
+						onCancel(() => promise.cancel())
+						return promise
+					})
+					if (value) {
+						resolve(value)
+					}
+				} catch (error) {
+					logger.error('Error in batch upload', { error })
+				}
+				reject(t('Upload has been cancelled'))
+			})
+		} finally {
+			// Reset concurrency
+			this._jobQueue.concurrency -= 1
+		}
+	}
+
+	// Helper for uploading directories (recursivly)
+	private uploadDirectory(
+		destination: string,
+		directory: Directory,
+		callback: (nodes: Array<File|Directory>, currentPath: string) => Promise<Array<File|Directory>|false>,
+		// client as parameter to cache it for performance
+		client: WebDAVClient,
+	): PCancelable<Upload[]> {
+		const folderPath = normalize(`${destination}/${directory.name}`).replace(/\/$/, '')
+		const rootPath = `${this.root.replace(/\/$/, '')}/${folderPath.replace(/^\//, '')}`
+
+		return new PCancelable(async (resolve, reject, onCancel) => {
+			const abort = new AbortController()
+			onCancel(() => abort.abort())
+
+			// Let the user handle conflicts
+			const selectedForUpload = await callback(directory.children, folderPath)
+			if (selectedForUpload === false) {
+				reject(t('Upload has been cancelled'))
+				return
+			}
+
+			const directories: PCancelable<Upload[]>[] = []
+			const uploads: PCancelable<Upload>[] = []
+			const currentUpload: Upload = new Upload(rootPath, false, 0, directory)
+			currentUpload.signal.addEventListener('abort', () => reject(t('Upload has been cancelled')))
+			currentUpload.status = UploadStatus.UPLOADING
+
+			try {
+				// Wait for own directory to be created (if not the virtual root)
+				if (directory.name) {
+					try {
+						await client.createDirectory(folderPath, { signal: abort.signal })
+						// We add the "upload" to get some information of changed nodes
+						uploads.push(new PCancelable((resolve) => resolve(currentUpload!)))
+						this._uploadQueue.push(currentUpload)
+					} catch (error) {
+						if (error && typeof error === 'object' && 'status' in error && error.status === 405) {
+							// Directory already exists, so just write into it and ignore the error
+							logger.debug('Directory already exists, writing into it', { directory: directory.name })
+						} else {
+							// Another error happend, so abort uploading the directory
+							throw error
+						}
+					}
+				}
+
+				for (const node of selectedForUpload) {
+					if (node instanceof Directory) {
+						directories.push(this.uploadDirectory(folderPath, node, callback, client))
+					} else {
+						uploads.push(this.upload(`${folderPath}/${node.name}`, node))
+					}
+				}
+
+				abort.signal.addEventListener('abort', () => {
+					uploads.forEach((upload) => upload.cancel())
+					directories.forEach((upload) => upload.cancel())
+				})
+
+				const resolvedUploads = await Promise.all(uploads)
+				const resolvedDirectoryUploads = await Promise.all(directories)
+				currentUpload.status = UploadStatus.FINISHED
+				resolve([resolvedUploads, ...resolvedDirectoryUploads].flat())
+			} catch (e) {
+				abort.abort(e)
+				currentUpload.status = UploadStatus.FAILED
+				reject(e)
+			} finally {
+				if (directory.name) {
+					this._notifyAll(currentUpload)
+					this.updateStats()
+				}
+			}
+		})
+	}
+
 	/**
 	 * Upload a file to the given path
-	 * @param {string} destinationPath the destination path relative to the root folder. e.g. /foo/bar.txt
-	 * @param {File} file the file to upload
+	 * @param {string} destination the destination path relative to the root folder. e.g. /foo/bar.txt
+	 * @param {File|FileSystemFileEntry} fileHandle the file to upload
 	 * @param {string} root the root folder to upload to
 	 */
-	upload(destinationPath: string, file: File, root?: string): PCancelable<Upload> {
-		const destinationFile = `${root || this.root}/${destinationPath.replace(/^\//, '')}`
+	upload(destination: string, fileHandle: File|FileSystemFileEntry, root?: string): PCancelable<Upload> {
+		root = root || this.root
+		const destinationPath = `${root.replace(/\/$/, '')}/${destination.replace(/^\//, '')}`
 
 		// Get the encoded source url to this object for requests purposes
-		const { origin } = new URL(destinationFile)
-		const encodedDestinationFile = origin + encodePath(destinationFile.slice(origin.length))
+		const { origin } = new URL(destinationPath)
+		const encodedDestinationFile = origin + encodePath(destinationPath.slice(origin.length))
 
-		logger.debug(`Uploading ${file.name} to ${encodedDestinationFile}`)
+		logger.debug(`Uploading ${fileHandle.name} to ${encodedDestinationFile}`)
 
-		// If manually disabled or if the file is too small
-		// TODO: support chunk uploading in public pages
-		const maxChunkSize = getMaxChunksSize(file.size)
-		const disabledChunkUpload = maxChunkSize === 0
-			|| file.size < maxChunkSize
-			|| this._isPublic
+		const promise = new PCancelable(async (resolve, reject, onCancel): Promise<Upload> => {
+			// Handle file system entries by retrieving the file handle
+			if (isFileSystemFileEntry(fileHandle)) {
+				fileHandle = await new Promise((resolve) => (fileHandle as FileSystemFileEntry).file(resolve, reject))
+			}
+			// We can cast here as we handled system entries in the if above
+			const file = fileHandle as File
 
-		const upload = new Upload(destinationFile, !disabledChunkUpload, file.size, file)
-		this._uploadQueue.push(upload)
-		this.updateStats()
+			// If manually disabled or if the file is too small
+			// TODO: support chunk uploading in public pages
+			const maxChunkSize = getMaxChunksSize('size' in file ? file.size : undefined)
+			const disabledChunkUpload = this._isPublic
+				|| maxChunkSize === 0
+				|| ('size' in file && file.size < maxChunkSize)
+
+			const upload = new Upload(destinationPath, !disabledChunkUpload, file.size, file)
+			this._uploadQueue.push(upload)
+			this.updateStats()
 
-		// eslint-disable-next-line no-async-promise-executor
-		const promise = new PCancelable(async (resolve, reject, onCancel): Promise<Upload> => {
 			// Register cancellation caller
 			onCancel(upload.cancel)
 
@@ -271,7 +444,7 @@ export class Uploader {
 						reject('Failed assembling the chunks together')
 					} else {
 						upload.status = UploadStatus.FAILED
-						reject('Upload has been cancelled')
+						reject(t('Upload has been cancelled'))
 					}
 
 					// Cleaning up temp directory
@@ -282,11 +455,7 @@ export class Uploader {
 				}
 
 				// Notify listeners of the upload completion
-				this._notifiers.forEach(notifier => {
-					try {
-						notifier(upload)
-					} catch (error) {}
-				})
+				this._notifyAll(upload)
 			} else {
 				logger.debug('Initializing regular upload', { file, upload })
 
@@ -319,7 +488,7 @@ export class Uploader {
 					} catch (error) {
 						if (error instanceof CanceledError) {
 							upload.status = UploadStatus.FAILED
-							reject('Upload has been cancelled')
+							reject(t('Upload has been cancelled'))
 							return
 						}
 
@@ -334,19 +503,11 @@ export class Uploader {
 					}
 
 					// Notify listeners of the upload completion
-					this._notifiers.forEach(notifier => {
-						try {
-							notifier(upload)
-						} catch (error) {}
-					})
+					this._notifyAll(upload)
 				}
 				this._jobQueue.add(request)
 				this.updateStats()
 			}
-
-			// Reset when upload queue is done
-			this._jobQueue.onIdle()
-				.then(() => this.reset())
 			return upload
 		}) as PCancelable<Upload>
 
diff --git a/lib/utils/fileTree.ts b/lib/utils/fileTree.ts
new file mode 100644
index 00000000..20cee5b0
--- /dev/null
+++ b/lib/utils/fileTree.ts
@@ -0,0 +1,95 @@
+/**
+ * Helpers to generate a file tree when the File and Directory API is used (e.g. Drag and Drop or <input type="file" webkitdirectory>)
+ */
+
+import { basename } from '@nextcloud/paths'
+import { isFileSystemDirectoryEntry, isFileSystemFileEntry } from './filesystem.ts'
+
+/**
+ * This is a helper class to allow building a file tree for uploading
+ * It allows to create virtual directories
+ */
+export class Directory extends File {
+
+	private _originalName: string
+	private _path: string
+	private _children: Map<string, File|this>
+
+	constructor(path: string, children?: Array<File|FileSystemEntry>) {
+		super([], basename(path), { type: 'httpd/unix-directory', lastModified: 0 })
+		this._children = new Map()
+		this._originalName = basename(path)
+		this._path = path
+
+		if (children) {
+			children.forEach((c) => this.addChild(c))
+		}
+	}
+
+	get size(): number {
+		return this.children.reduce((sum, file) => sum + file.size, 0)
+	}
+
+	get lastModified(): number {
+		return this.children.reduce((latest, file) => Math.max(latest, file.lastModified), 0)
+	}
+
+	// We need this to keep track of renamed files
+	get originalName(): string {
+		return this._originalName
+	}
+
+	get children(): Array<File|Directory> {
+		return Array.from(this._children.values())
+	}
+
+	get webkitRelativePath(): string {
+		return this._path
+	}
+
+	getChild(name: string): File|Directory|null {
+		return this._children.get(name) ?? null
+	}
+
+	async addChild(file: File|FileSystemEntry) {
+		const rootPath = this._path && `${this._path}/`
+		if (isFileSystemFileEntry(file)) {
+			file = await new Promise<File>((resolve, reject) => (file as FileSystemFileEntry).file(resolve, reject))
+		} else if (isFileSystemDirectoryEntry(file)) {
+			const reader = file.createReader()
+			const entries = await new Promise<FileSystemEntry[]>((resolve, reject) => reader.readEntries(resolve, reject))
+			this._children.set(file.name, new Directory(`${rootPath}${file.name}`, entries))
+			return
+		}
+
+		// Make Typescript calm - we ensured it is not a file system entry above.
+		file = file as File
+
+		const filePath = file.webkitRelativePath ?? file.name
+		// Handle plain files
+		if (!filePath.includes('/')) {
+			// Direct child of the directory
+			this._children.set(file.name, file)
+		} else {
+			// Check if file is a child
+			if (!filePath.startsWith(this._path)) {
+				throw new Error(`File ${filePath} is not a child of ${this._path}`)
+			}
+			// If file is a child check if we need to nest it
+			const relPath = filePath.slice(rootPath.length)
+			const name = basename(relPath)
+			// It is a direct child
+			if (name === relPath) {
+				this._children.set(name, file)
+			} else {
+				const base = relPath.slice(0, relPath.indexOf('/'))
+				if (this._children.has(base)) {
+					(this._children.get(base) as Directory).addChild(file)
+				} else {
+					this._children.set(base, new Directory(`${rootPath}${base}`, [file]))
+				}
+			}
+		}
+	}
+
+}
diff --git a/lib/utils/uniqueName.ts b/lib/utils/uniqueName.ts
new file mode 100644
index 00000000..d9ba9433
--- /dev/null
+++ b/lib/utils/uniqueName.ts
@@ -0,0 +1,19 @@
+import { basename, extname } from 'path'
+
+/**
+ * Get a unique name for a file based
+ * on the existing directory content.
+ * @param {string} name The original file name with extension
+ * @param {string} names The existing directory content names
+ * @return {string} A unique name
+ * TODO: migrate to @nextcloud/files
+ */
+export function getUniqueName(name: string, names: string[]): string {
+	const ext = extname(name)
+	let newName = name
+	let i = 1
+	while (names.includes(newName)) {
+		newName = `${basename(name, ext)} (${i++})${ext}`
+	}
+	return newName
+}
diff --git a/package-lock.json b/package-lock.json
index 328d8f6d..a656af17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "@types/node": "^20.11.30",
         "@vitest/coverage-v8": "^1.5.2",
         "@vue/tsconfig": "^0.5.1",
+        "blob-polyfill": "^7.0.20220408",
         "cypress": "^13.7.1",
         "cypress-file-upload": "^5.0.8",
         "gettext-extractor": "^3.8.0",
@@ -40,7 +41,8 @@
         "typedoc": "^0.25.12",
         "typescript": "^5.4.3",
         "vitest": "^1.5.2",
-        "vue-material-design-icons": "^5.3.0"
+        "vue-material-design-icons": "^5.3.0",
+        "webdav": "^5.5.0"
       },
       "engines": {
         "node": "^20.0.0",
@@ -4934,6 +4936,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/blob-polyfill": {
+      "version": "7.0.20220408",
+      "resolved": "https://registry.npmjs.org/blob-polyfill/-/blob-polyfill-7.0.20220408.tgz",
+      "integrity": "sha512-oD8Ydw+5lNoqq+en24iuPt1QixdPpe/nUF8azTHnviCZYu9zUC+TwdzIp5orpblJosNlgNbVmmAb//c6d6ImUQ==",
+      "dev": true
+    },
     "node_modules/blob-util": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/blob-util/-/blob-util-2.0.2.tgz",
diff --git a/package.json b/package.json
index 9d1c858e..34b053aa 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "@types/node": "^20.11.30",
     "@vitest/coverage-v8": "^1.5.2",
     "@vue/tsconfig": "^0.5.1",
+    "blob-polyfill": "^7.0.20220408",
     "cypress": "^13.7.1",
     "cypress-file-upload": "^5.0.8",
     "gettext-extractor": "^3.8.0",
@@ -67,7 +68,8 @@
     "typedoc": "^0.25.12",
     "typescript": "^5.4.3",
     "vitest": "^1.5.2",
-    "vue-material-design-icons": "^5.3.0"
+    "vue-material-design-icons": "^5.3.0",
+    "webdav": "^5.5.0"
   },
   "dependencies": {
     "@nextcloud/auth": "^2.2.1",
diff --git a/vitest.config.ts b/vitest.config.ts
index 3b01364f..672d0138 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -8,6 +8,7 @@ export default async (env) => {
 
 	cfg.test = {
 		environment: 'jsdom',
+		setupFiles: '__tests__/setup.ts',
 		coverage: {
 			include: ['lib/**'],
 			// This makes no sense to test