diff --git a/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-form-dialog.tsx b/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-form-dialog.tsx index a45862486..58ee1ca6b 100644 --- a/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-form-dialog.tsx +++ b/apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-form-dialog.tsx @@ -1,6 +1,6 @@ "use client"; -import { useEffect, useId, useState } from "react"; +import { useEffect, useId, useRef, useState } from "react"; import { useForm } from "react-hook-form"; import { Paperclip, X } from "lucide-react"; @@ -61,6 +61,7 @@ function EsntlAtchFileFormDialog({ onSubmit, }: EsntlAtchFileFormDialogProps) { const formId = useId(); + const atchFileGroupIdRef = useRef(""); const [uploadedFiles, setUploadedFiles] = useState([]); const { register, handleSubmit, reset, setValue, watch } = useForm({ @@ -75,13 +76,16 @@ function EsntlAtchFileFormDialog({ const docSeComCd = watch("docSeComCd"); const esntlAtchYn = watch("esntlAtchYn"); - const atchFileGroupId = watch("atchFileGroupId"); const { uploadFileAsync, isUploading, uploads } = useTus({ onSuccess: (atflCd, atflId, _file, fileKey) => { if (!atflCd || !atflId) return; - setValue("atchFileGroupId", atflCd, { shouldDirty: true }); + if (!atchFileGroupIdRef.current) { + atchFileGroupIdRef.current = atflCd; + setValue("atchFileGroupId", atflCd, { shouldDirty: true }); + } + setUploadedFiles((prev) => prev.map((item) => (item.fileKey === fileKey ? { ...item, atflCd, atflId } : item)), ); @@ -107,6 +111,7 @@ function EsntlAtchFileFormDialog({ })); setUploadedFiles(initialFiles); + atchFileGroupIdRef.current = initial.atchFileGroupId ?? ""; reset({ docSeComCd: initial.docSeComCd ?? "", esntlAtchFileNm: initial.esntlAtchFileNm ?? "", @@ -118,6 +123,7 @@ function EsntlAtchFileFormDialog({ } setUploadedFiles([]); + atchFileGroupIdRef.current = ""; reset({ docSeComCd: "", esntlAtchFileNm: "", @@ -132,15 +138,20 @@ function EsntlAtchFileFormDialog({ for (const file of Array.from(files)) { const fileKey = createUploadKey(file); - const existingAtflCd = atchFileGroupId || uploadedFiles.find((item) => item.atflCd)?.atflCd; + const existingAtflCd = atchFileGroupIdRef.current; setUploadedFiles((prev) => [...prev, { fileName: file.name, fileKey }]); try { - await uploadFileAsync(file, { + const atflCd = await uploadFileAsync(file, { fileKey, metadata: existingAtflCd ? { atflCd: existingAtflCd } : undefined, }); + + if (!existingAtflCd) { + atchFileGroupIdRef.current = atflCd; + setValue("atchFileGroupId", atflCd, { shouldDirty: true }); + } } catch { // onError callback handles cleanup } @@ -164,7 +175,8 @@ function EsntlAtchFileFormDialog({ const nextFiles = uploadedFiles.filter((_, index) => index !== fileIndex); setUploadedFiles(nextFiles); - const nextGroupId = nextFiles.find((item) => item.atflCd)?.atflCd ?? ""; + const nextGroupId = nextFiles[0]?.atflCd ?? ""; + atchFileGroupIdRef.current = nextGroupId; setValue("atchFileGroupId", nextGroupId, { shouldDirty: true }); }