fix(files): Adjust files drop to work with Blink engine (chrom(ium), …

…edge)

The datatransfer items list is cleared on Blink after the first access to an inner prop due to async handling and GC.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

apps/files/src/components/DragAndDropNotice.vue

@@ -22,6 +22,7 @@
 	-->
 <template>
 	<div v-show="dragover"
+		data-cy-files-drag-drop-area
 		class="files-list__drag-drop-notice"
 		@drop="onDrop">
 		<div class="files-list__drag-drop-notice-wrapper">

apps/files/src/services/DropService.ts

@@ -36,21 +36,27 @@ export const handleDrop = async (data: DataTransfer): Promise<Upload[]> => {
 	// TODO: Maybe handle `getAsFileSystemHandle()` in the future
 
 	const uploads = [] as Upload[]
-	for (const item of data.items) {
-		if (item.kind !== 'file') {
-			logger.debug('Skipping dropped item', { kind: item.kind, type: item.type })
-			continue
-		}
-
-		// MDN recommends to try both, as it might be renamed in the future
-		const entry = (item as unknown as { getAsEntry?: () => FileSystemEntry|undefined})?.getAsEntry?.() ?? item.webkitGetAsEntry()
-
+	// we need to cache the entries to prevent Blink engine bug that clears the list (`data.items`) after first access props of one of the entries
+	const entries = [...data.items]
+		.filter((item) => {
+			if (item.kind !== 'file') {
+				logger.debug('Skipping dropped item', { kind: item.kind, type: item.type })
+				return false
+			}
+			return true
+		})
+		.map((item) => {
+			// MDN recommends to try both, as it might be renamed in the future
+			return (item as unknown as { getAsEntry?: () => FileSystemEntry|undefined})?.getAsEntry?.() ?? item.webkitGetAsEntry() ?? item
+		})
+
+	for (const entry of entries) {
 		// Handle browser issues if Filesystem API is not available. Fallback to File API
-		if (entry === null) {
+		if (entry instanceof DataTransferItem) {
 			logger.debug('Could not get FilesystemEntry of item, falling back to file')
-			const file = item.getAsFile()
+			const file = entry.getAsFile()
 			if (file === null) {
-				logger.warn('Could not process DataTransferItem', { type: item.type, kind: item.kind })
+				logger.warn('Could not process DataTransferItem', { type: entry.type, kind: entry.kind })
 				showError(t('files', 'One of the dropped files could not be processed'))
 			} else {
 				uploads.push(await handleFileUpload(file))

cypress/e2e/files/drag-n-drop.cy.ts

@@ -0,0 +1,62 @@
+import { getRowForFile } from './FilesUtils.ts'
+
+describe('files: Drag and Drop', { testIsolation: true }, () => {
+	beforeEach(() => {
+		cy.createRandomUser().then((user) => {
+			cy.login(user)
+		})
+		cy.visit('/apps/files')
+	})
+
+	it('can drop a file', () => {
+		const dataTransfer = new DataTransfer()
+		dataTransfer.items.add(new File([], 'single-file.txt'))
+
+		cy.intercept('PUT', /\/remote.php\/dav\/files\//).as('uploadFile')
+
+		cy.get('[data-cy-files-drag-drop-area]').should('not.be.visible')
+		// Trigger the drop notice
+		cy.get('main.app-content').trigger('dragover', { dataTransfer })
+		cy.get('[data-cy-files-drag-drop-area]').should('be.visible')
+
+		// Upload drop a file
+		cy.get('[data-cy-files-drag-drop-area]').selectFile({
+			fileName: 'single-file.txt',
+			contents: ['hello '.repeat(1024)],
+		}, { action: 'drag-drop' })
+
+		cy.wait('@uploadFile')
+
+		getRowForFile('single-file.txt').should('be.visible')
+		getRowForFile('single-file.txt').find('[data-cy-files-list-row-size]').should('contain', '6 KB')
+	})
+
+	it('can drop multiple files', () => {
+		const dataTransfer = new DataTransfer()
+		dataTransfer.items.add(new File([], 'first.txt'))
+		dataTransfer.items.add(new File([], 'second.txt'))
+
+		cy.intercept('PUT', /\/remote.php\/dav\/files\//).as('uploadFile')
+
+		// Trigger the drop notice
+		cy.get('main.app-content').trigger('dragover', { dataTransfer })
+		cy.get('[data-cy-files-drag-drop-area]').should('be.visible')
+
+		// Upload drop a file
+		cy.get('[data-cy-files-drag-drop-area]').selectFile([
+			{
+				fileName: 'first.txt',
+				contents: ['Hello'],
+			},
+			{
+				fileName: 'second.txt',
+				contents: ['World'],
+			},
+		], { action: 'drag-drop' })
+
+		cy.wait('@uploadFile')
+
+		getRowForFile('first.txt').should('be.visible')
+		getRowForFile('second.txt').should('be.visible')
+	})
+})