From b6b44347b029bad0a896112ee404f0bbc1858bfe Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Sun, 31 May 2026 11:51:22 +0700
Subject: [PATCH] Task/improve type safety in file drop directive (#6961)

* fix(client): resolve errors

* feat(client): migrate to output signal

* feat(client): migrate to host property
---
 .../file-drop/file-drop.directive.ts          | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/app/directives/file-drop/file-drop.directive.ts b/apps/client/src/app/directives/file-drop/file-drop.directive.ts
index a7e628bc9..b46357005 100644
--- a/apps/client/src/app/directives/file-drop/file-drop.directive.ts
+++ b/apps/client/src/app/directives/file-drop/file-drop.directive.ts
@@ -1,28 +1,34 @@
-import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
+import { Directive, output } from '@angular/core';
 
 @Directive({
+  host: {
+    '(dragenter)': 'onDragEnter($event)',
+    '(dragover)': 'onDragOver($event)',
+    '(drop)': 'onDrop($event)'
+  },
   selector: '[gfFileDrop]'
 })
 export class GfFileDropDirective {
-  @Output() filesDropped = new EventEmitter<FileList>();
+  public readonly filesDropped = output<FileList>();
 
-  @HostListener('dragenter', ['$event']) onDragEnter(event: DragEvent) {
+  public onDragEnter(event: DragEvent) {
     event.preventDefault();
     event.stopPropagation();
   }
 
-  @HostListener('dragover', ['$event']) onDragOver(event: DragEvent) {
+  public onDragOver(event: DragEvent) {
     event.preventDefault();
     event.stopPropagation();
   }
 
-  @HostListener('drop', ['$event']) onDrop(event: DragEvent) {
+  public onDrop(event: DragEvent) {
     event.preventDefault();
     event.stopPropagation();
 
-    // Prevent the browser's default behavior for handling the file drop
-    event.dataTransfer.dropEffect = 'copy';
-
-    this.filesDropped.emit(event.dataTransfer.files);
+    if (event.dataTransfer) {
+      // Prevent the browser's default behavior for handling the file drop
+      event.dataTransfer.dropEffect = 'copy';
+      this.filesDropped.emit(event.dataTransfer.files);
+    }
   }
 }