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";
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 };
}