Fix: Limit global drag-drop to events with files (#4767)

diff --git a/src-ui/src/app/components/file-drop/file-drop.component.spec.ts b/src-ui/src/app/components/file-drop/file-drop.component.spec.ts
index ec86ff2b281d9d11108dbfed14258814e47164d0..d35bf54d93d86a8b7a061b4e74c218227be617d0 100644 (file)
--- a/src-ui/src/app/components/file-drop/file-drop.component.spec.ts
+++ b/src-ui/src/app/components/file-drop/file-drop.component.spec.ts
@@ -84,7 +84,9 @@ describe('FileDropComponent', () => {
   it('should support drag drop, initiate upload', fakeAsync(() => {
     jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
     expect(component.fileIsOver).toBeFalsy()
-    component.onDragOver(new Event('dragover') as DragEvent)
+    const overEvent = new Event('dragover') as DragEvent
+    ;(overEvent as any).dataTransfer = { types: ['Files'] }
+    component.onDragOver(overEvent)
     tick(1)
     fixture.detectChanges()
     expect(component.fileIsOver).toBeTruthy()
@@ -151,7 +153,9 @@ describe('FileDropComponent', () => {
     const leaveSpy = jest.spyOn(component, 'onDragLeave')
     jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
     settingsService.globalDropzoneEnabled = true
-    component.onDragOver(new Event('dragover') as DragEvent)
+    const overEvent = new Event('dragover') as DragEvent
+    ;(overEvent as any).dataTransfer = { types: ['Files'] }
+    component.onDragOver(overEvent)
     tick(1)
     expect(component.hidden).toBeFalsy()
     expect(component.fileIsOver).toBeTruthy()
@@ -165,7 +169,9 @@ describe('FileDropComponent', () => {
     const leaveSpy = jest.spyOn(component, 'onDragLeave')
     jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
     settingsService.globalDropzoneEnabled = true
-    component.onDragOver(new Event('dragover') as DragEvent)
+    const overEvent = new Event('dragover') as DragEvent
+    ;(overEvent as any).dataTransfer = { types: ['Files'] }
+    component.onDragOver(overEvent)
     tick(1)
     expect(component.hidden).toBeFalsy()
     expect(component.fileIsOver).toBeTruthy()

diff --git a/src-ui/src/app/components/file-drop/file-drop.component.ts b/src-ui/src/app/components/file-drop/file-drop.component.ts
index 0c9637b795d4b3ded3874875f9272fe41854c844..e45d816b0ba7fc5088d29eb25cedb613964da858 100644 (file)
--- a/src-ui/src/app/components/file-drop/file-drop.component.ts
+++ b/src-ui/src/app/components/file-drop/file-drop.component.ts
@@ -38,8 +38,9 @@ export class FileDropComponent {
 
   @ViewChild('ngxFileDrop') ngxFileDrop: NgxFileDropComponent
 
-  @HostListener('dragover', ['$event ']) onDragOver(event: DragEvent) {
-    if (!this.dragDropEnabled) return
+  @HostListener('dragover', ['$event']) onDragOver(event: DragEvent) {
+    if (!this.dragDropEnabled || !event.dataTransfer?.types?.includes('Files'))
+      return
     event.preventDefault()
     event.stopImmediatePropagation()
     this.settings.globalDropzoneActive = true