diff --git a/apps/web/src/components/image-classification-form.tsx b/apps/web/src/components/image-classification-form.tsx index 1f73ffb..87f259f 100644 --- a/apps/web/src/components/image-classification-form.tsx +++ b/apps/web/src/components/image-classification-form.tsx @@ -17,6 +17,7 @@ export function ImageClassificationForm({ latestResult, }: ImageClassificationFormProps) { const fileInputRef = useRef(null); + const previewUrlRef = useRef(null); const [file, setFile] = useState(null); const [previewUrl, setPreviewUrl] = useState(null); const [error, setError] = useState(null); @@ -24,8 +25,9 @@ export function ImageClassificationForm({ // Revoke object URL on component unmount useEffect(() => { return () => { - if (previewUrl) { - URL.revokeObjectURL(previewUrl); + if (previewUrlRef.current) { + URL.revokeObjectURL(previewUrlRef.current); + previewUrlRef.current = null; } }; }, []); @@ -36,11 +38,14 @@ export function ImageClassificationForm({ setFile(selectedFile); // Revoke previous preview URL before replacing it - if (previewUrl) { - URL.revokeObjectURL(previewUrl); + if (previewUrlRef.current) { + URL.revokeObjectURL(previewUrlRef.current); + previewUrlRef.current = null; } - setPreviewUrl(selectedFile ? URL.createObjectURL(selectedFile) : null); + const newUrl = selectedFile ? URL.createObjectURL(selectedFile) : null; + previewUrlRef.current = newUrl; + setPreviewUrl(newUrl); } async function handleSubmit(event: FormEvent) { @@ -54,8 +59,9 @@ export function ImageClassificationForm({ await onSubmit(file); // Revoke current preview URL after successful submit before setting null - if (previewUrl) { - URL.revokeObjectURL(previewUrl); + if (previewUrlRef.current) { + URL.revokeObjectURL(previewUrlRef.current); + previewUrlRef.current = null; } setFile(null);