From f6008b36c3c25539c9493358ace244ef918346cc Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Fri, 24 Jul 2026 13:43:21 +0700
Subject: [PATCH] fix: use useRef instead of useState for AbortController

TypeScript error: Property 'abort' does not exist on type
'Dispatch<SetStateAction<AbortController | null>>'. Fixed by using
useRef which properly stores the controller reference.

Co-Authored-By: Kilo <kilo@kilo.ai>
---
 frontend/src/hooks/use-upload.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/hooks/use-upload.ts b/frontend/src/hooks/use-upload.ts
index e7f8a2c..44cf587 100644
--- a/frontend/src/hooks/use-upload.ts
+++ b/frontend/src/hooks/use-upload.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useRef } from "react";
 
 interface UploadResult {
   job_id: string;
@@ -17,7 +17,7 @@ export function useUpload({ tool, options }: UseUploadOptions) {
   const [isUploading, setIsUploading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [result, setResult] = useState<UploadResult | null>(null);
-  const abortRef = useState<AbortController | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
 
   const upload = useCallback(
     async (file: File): Promise<UploadResult | null> => {
@@ -34,7 +34,7 @@ export function useUpload({ tool, options }: UseUploadOptions) {
         }
 
         const controller = new AbortController();
-        abortRef[1](controller);
+        abortRef.current = controller;
 
         const response = await fetch("/api/upload", {
           method: "POST",
@@ -67,9 +67,9 @@ export function useUpload({ tool, options }: UseUploadOptions) {
   );
 
   const cancel = useCallback(() => {
-    abortRef[1]?.abort();
+    abortRef.current?.abort();
     setIsUploading(false);
-  }, [abortRef[1]]);
+  }, []);
 
   return { upload, cancel, isUploading, error, result };
 }
\ No newline at end of file