Fix: use entire document for dropzone (#7342)

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 e45d816b0ba7fc5088d29eb25cedb613964da858..7e509613038f1ce349650818897e2c1fc6532058 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,7 +38,7 @@ export class FileDropComponent {
 
   @ViewChild('ngxFileDrop') ngxFileDrop: NgxFileDropComponent
 
-  @HostListener('dragover', ['$event']) onDragOver(event: DragEvent) {
+  @HostListener('document:dragover', ['$event']) onDragOver(event: DragEvent) {
     if (!this.dragDropEnabled || !event.dataTransfer?.types?.includes('Files'))
       return
     event.preventDefault()
@@ -53,7 +53,7 @@ export class FileDropComponent {
     clearTimeout(this.fileLeaveTimeoutID)
   }
 
-  @HostListener('dragleave', ['$event']) public onDragLeave(
+  @HostListener('document:dragleave', ['$event']) public onDragLeave(
     event: DragEvent,
     immediate: boolean = false
   ) {
@@ -73,7 +73,7 @@ export class FileDropComponent {
     }, ms)
   }
 
-  @HostListener('drop', ['$event']) public onDrop(event: DragEvent) {
+  @HostListener('document:drop', ['$event']) public onDrop(event: DragEvent) {
     if (!this.dragDropEnabled) return
     event.preventDefault()
     event.stopImmediatePropagation()