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>
This commit is contained in:
asepharyana
2026-07-24 13:43:21 +07:00
co-authored by Kilo
parent 084ff4109f
commit f6008b36c3
+5 -5
View File
@@ -1,6 +1,6 @@
"use client"; "use client";
import { useState, useCallback } from "react"; import { useState, useCallback, useRef } from "react";
interface UploadResult { interface UploadResult {
job_id: string; job_id: string;
@@ -17,7 +17,7 @@ export function useUpload({ tool, options }: UseUploadOptions) {
const [isUploading, setIsUploading] = useState(false); const [isUploading, setIsUploading] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [result, setResult] = useState<UploadResult | null>(null); const [result, setResult] = useState<UploadResult | null>(null);
const abortRef = useState<AbortController | null>(null); const abortRef = useRef<AbortController | null>(null);
const upload = useCallback( const upload = useCallback(
async (file: File): Promise<UploadResult | null> => { async (file: File): Promise<UploadResult | null> => {
@@ -34,7 +34,7 @@ export function useUpload({ tool, options }: UseUploadOptions) {
} }
const controller = new AbortController(); const controller = new AbortController();
abortRef[1](controller); abortRef.current = controller;
const response = await fetch("/api/upload", { const response = await fetch("/api/upload", {
method: "POST", method: "POST",
@@ -67,9 +67,9 @@ export function useUpload({ tool, options }: UseUploadOptions) {
); );
const cancel = useCallback(() => { const cancel = useCallback(() => {
abortRef[1]?.abort(); abortRef.current?.abort();
setIsUploading(false); setIsUploading(false);
}, [abortRef[1]]); }, []);
return { upload, cancel, isUploading, error, result }; return { upload, cancel, isUploading, error, result };
} }