From 8b11fcc02d38c5928e64c6db8efddae041ddd9da Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 8 Jul 2026 11:31:25 -0700
Subject: [PATCH] Direct signal-backed file drop

---
 .../components/file-drop/file-drop.component.html  |  4 ++--
 .../components/file-drop/file-drop.component.ts    | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src-ui/src/app/components/file-drop/file-drop.component.html b/src-ui/src/app/components/file-drop/file-drop.component.html
index 71a008b3f..fa03f2522 100644
--- a/src-ui/src/app/components/file-drop/file-drop.component.html
+++ b/src-ui/src/app/components/file-drop/file-drop.component.html
@@ -1,7 +1,7 @@
-<div [class.pe-none]="fileIsOver">
+<div [class.pe-none]="fileIsOver()">
     <ng-content select="[content]"></ng-content>
 </div>
 
-<div class="global-dropzone-overlay position-fixed top-0 start-0 bottom-0 end-0 text-center pe-none" [class.active]="fileIsOver && !hidden">
+<div class="global-dropzone-overlay position-fixed top-0 start-0 bottom-0 end-0 text-center pe-none" [class.active]="fileIsOver() && !hidden()">
     <h2 class="pe-none position-absolute top-50 start-50 translate-middle" i18n>Drop files to begin upload</h2>
 </div>
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 8fd0c7c22..9a517b398 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
@@ -1,4 +1,4 @@
-import { Component, HostListener, inject } from '@angular/core'
+import { Component, HostListener, inject, signal } from '@angular/core'
 import {
   PermissionAction,
   PermissionsService,
@@ -21,8 +21,8 @@ export class FileDropComponent {
   private permissionsService = inject(PermissionsService)
 
   private fileLeaveTimeoutID: any
-  fileIsOver: boolean = false
-  hidden: boolean = true
+  fileIsOver = signal<boolean>(false)
+  hidden = signal<boolean>(true)
 
   public get dragDropEnabled(): boolean {
     return (
@@ -42,9 +42,9 @@ export class FileDropComponent {
     this.settings.globalDropzoneActive = true
     // allows transition
     setTimeout(() => {
-      this.fileIsOver = true
+      this.fileIsOver.set(true)
     }, 1)
-    this.hidden = false
+    this.hidden.set(false)
     // stop fileLeave timeout
     clearTimeout(this.fileLeaveTimeoutID)
   }
@@ -61,10 +61,10 @@ export class FileDropComponent {
     const ms = immediate ? 0 : 500
 
     this.fileLeaveTimeoutID = setTimeout(() => {
-      this.fileIsOver = false
+      this.fileIsOver.set(false)
       // await transition completed
       setTimeout(() => {
-        this.hidden = true
+        this.hidden.set(true)
       }, 150)
     }, ms)
   }