88 lines
4.3 KiB
TypeScript
88 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
// N4 — ฟอร์มอัปโหลดไฟล์เอกสารแบบง่ายบนหน้ารายการ (PDF/รูป รับพร้อมกัน)
|
|
// เสร็จแล้วรายการโผล่เองจาก revalidatePath("/") ของ action
|
|
// Genesis: หน้าตาเป็นการ์ด surface 12px radius ขอบ line (ใต้หัวข้อของ section
|
|
// "เอกสาร" — ไฟล์ที่อัปโหลดเข้ารายการนั้น) + ปุ่ม primary เดียวของ section
|
|
import { useState, useTransition } from "react";
|
|
import { Upload } from "lucide-react";
|
|
|
|
import { uploadFile } from "@/app/actions/files";
|
|
|
|
const ACCEPT = ".pdf,.jpg,.jpeg,.png,.tif,.tiff";
|
|
|
|
/** ขนาดสูงสุดตาม validator ของ uploadFile (app/actions/files.ts) — เช็คฝั่ง client
|
|
* ก่อนอัปโหลด (M5, UX audit 2026-09-16): ไฟล์สแกนคดีที่เกินไม่ต้องรอส่งจนจบ
|
|
* บนเน็ตช้าก่อนเจอ error ของ server */
|
|
const MAX_BYTES = 100 * 1024 * 1024;
|
|
|
|
export default function UploadFileForm() {
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [pending, startTransition] = useTransition();
|
|
|
|
const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
const form = e.currentTarget;
|
|
setError(null);
|
|
const input = form.elements.namedItem("file") as HTMLInputElement | null;
|
|
const file = input?.files?.[0];
|
|
if (file && file.size > MAX_BYTES) {
|
|
setError("ไฟล์ใหญ่เกิน 100MB — เลือกไฟล์เล็กกว่า");
|
|
return;
|
|
}
|
|
startTransition(async () => {
|
|
try {
|
|
const result = await uploadFile(new FormData(form));
|
|
if (result.ok) {
|
|
form.reset();
|
|
} else {
|
|
setError(result.error);
|
|
}
|
|
} catch {
|
|
// action fail ที่ระดับ transport (เช่น body ใหญ่เกิน bodySizeLimit ของ next.config)
|
|
setError("อัปโหลดไม่สำเร็จ — ลองใหม่อีกครั้ง");
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={onSubmit} className="flex flex-col rounded-xl border border-line bg-white p-5">
|
|
<div className="flex items-center gap-2">
|
|
<Upload aria-hidden className="h-4 w-4 shrink-0 text-ink-faint" />
|
|
<p className="text-sm font-semibold text-ink">อัปโหลดไฟล์</p>
|
|
</div>
|
|
<input
|
|
type="file"
|
|
name="file"
|
|
accept={ACCEPT}
|
|
required
|
|
disabled={pending}
|
|
className="mt-4 block w-full text-sm text-ink-soft file:mr-3 file:cursor-pointer file:rounded-md file:border-0 file:bg-ink/[0.05] file:px-4 file:py-2 file:text-sm file:font-medium file:text-ink"
|
|
/>
|
|
{/* กลุ่ม typeId ทางเลือก (N9) — ช่องเดียวกับลิงก์ e-Court, ไม่กรอก = "ไม่มีกลุ่ม";
|
|
uncontrolled ส่งไปกับ FormData เหมือนช่องไฟล์ (normalize ที่ action) */}
|
|
<label htmlFor="upload-type-id" className="mt-3 block text-sm font-medium text-ink">
|
|
กลุ่ม typeId
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="upload-type-id"
|
|
name="typeId"
|
|
disabled={pending}
|
|
placeholder="ไม่กรอก = ไม่มีกลุ่ม"
|
|
className="genesis-input mt-1 w-full text-base"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={pending}
|
|
className="focus-ring mt-4 w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-white transition hover:-translate-y-px hover:bg-primary-hover hover:shadow-btn-glow disabled:pointer-events-none disabled:opacity-50"
|
|
>
|
|
{pending ? "กำลังอัปโหลด…" : "อัปโหลด"}
|
|
</button>
|
|
<p className="mt-3 text-xs leading-relaxed text-ink-soft">
|
|
รองรับ PDF, JPG, PNG, TIFF — ไม่เกิน 100MB ต่อไฟล์
|
|
</p>
|
|
{error && <p className="mt-2 text-xs text-error-ink">{error}</p>}
|
|
</form>
|
|
);
|
|
}
|