// components/file-upload.tsx (atau lokasi file Anda) "use client"; import { UploadCloud, X, RefreshCcw, File as FileIcon } from "lucide-react"; import { useCallback, useEffect, useState } from "react"; // Tambah useEffect import { useDropzone } from "react-dropzone"; import { Button } from "@/shared/components/ui/button"; // Sesuaikan path interface FileUploadProps { value?: string; fileName?: string; // onChange existing ini sepertinya untuk hasil upload (ID), kita biarkan opsional onChange?: (value: { id: string; name: string }) => void; // 🔥 TAMBAHAN: Callback untuk mengirim Raw File ke Controller onFileSelect?: (file: File) => void; onRemove: () => void; description?: string; // Prop tambahan untuk mengontrol dari luar (Controlled Component) filePreview?: File | null; } export function FileUpload({ value, fileName, onChange, onFileSelect, // ⬅️ Gunakan ini onRemove, description, filePreview // ⬅️ Gunakan ini jika ingin state dikontrol parent sepenuhnya }: FileUploadProps) { const [isUploading, setIsUploading] = useState(false); const [internalFile, setInternalFile] = useState(null); // Sinkronisasi jika parent mengirim file (opsional, agar stateless) const selectedFile = filePreview || internalFile; const onDrop = useCallback((acceptedFiles: File[]) => { const file = acceptedFiles[0]; if (!file) return; setInternalFile(file); // Set local state untuk UI // 🔥 Kirim file mentah ke parent hook if (onFileSelect) { onFileSelect(file); } }, [onFileSelect]); const handleRemove = (e: React.MouseEvent) => { e.stopPropagation(); setInternalFile(null); onRemove(); }; const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, accept: { "text/csv": [".csv"], "application/vnd.ms-excel": [".xls"], "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [ ".xlsx", ], "application/pdf": [".pdf"], "application/zip": [".zip"], }, maxFiles: 1, maxSize: 100 * 1024 * 1024, disabled: isUploading, }); // Tentukan apakah file sudah ada (baik dari value/server atau lokal/selected) const hasFile = selectedFile || value; return (
{/* STATE: BELUM ADA FILE */} {!hasFile && (

Drag & drop file, atau klik untuk pilih

{/* CSV, XLS, XLSX, PDF, ZIP — Maks 100MB */} .xlsx, .csv, .pdf, .zip (SHP/GDB) - Maks 100MB

{description && (

{description}

)}
)} {/* STATE: FILE SUDAH DIPILIH */} {hasFile && (

{selectedFile?.name || fileName}

{selectedFile ? ( <> {(selectedFile.size / 1024 / 1024).toFixed(2)} MB Siap diproses ) : "File berhasil diunggah"}

)}
); }