From 4ca1503beb1c65eb4f77ac992b4b3ea74fbc6fd4 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 2 Dec 2023 07:47:57 -0800
Subject: [PATCH] Fix: Limit global drag-drop to events with files (#4767)

---
 .../components/file-drop/file-drop.component.spec.ts | 12 +++++++++---
 .../app/components/file-drop/file-drop.component.ts  |  5 +++--
 2 files changed, 12 insertions(+), 5 deletions(-)

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 ec86ff2b2..d35bf54d9 100644
--- 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 0c9637b79..e45d816b0 100644
--- 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