136 lines
4.8 KiB
TypeScript
136 lines
4.8 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { FileUp, X } from "lucide-react";
|
|
|
|
interface UploadDocProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onUpload: (file: File) => void;
|
|
}
|
|
|
|
const UploadDoc = ({ isOpen, onClose, onUpload }: UploadDocProps) => {
|
|
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
|
const [dragActive, setDragActive] = useState<boolean>(false);
|
|
|
|
const handleDrag = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (e.type === "dragenter" || e.type === "dragover") {
|
|
setDragActive(true);
|
|
} else if (e.type === "dragleave") {
|
|
setDragActive(false);
|
|
}
|
|
};
|
|
|
|
const handleDrop = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setDragActive(false);
|
|
|
|
const file = e.dataTransfer.files[0];
|
|
if (file && file.type === "application/pdf") {
|
|
setSelectedFile(file);
|
|
} else {
|
|
alert("Hanya file PDF yang diperbolehkan");
|
|
}
|
|
};
|
|
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (file && file.type === "application/pdf") {
|
|
setSelectedFile(file);
|
|
} else {
|
|
alert("Hanya file PDF yang diperbolehkan");
|
|
}
|
|
};
|
|
|
|
const handleUpload = () => {
|
|
if (selectedFile) {
|
|
onUpload(selectedFile);
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>Lampiran *</DialogTitle>
|
|
<div className="flex flex-row items-center">
|
|
<div className="h-8 w-[3px] bg-gray-300 mr-2" />
|
|
<small>
|
|
Silahkan unggah dokumen Anda dengan drag & drop
|
|
semua berkas atau klik pada kotak ini. Ukuran file
|
|
tidak boleh melebihi 20 MB.
|
|
</small>
|
|
</div>
|
|
</DialogHeader>
|
|
<div
|
|
className={`mt-4 p-6 border-2 border-dashed rounded-lg text-center ${
|
|
dragActive
|
|
? "border-teal-500 bg-teal-50"
|
|
: "border-gray-300"
|
|
}`}
|
|
onDragEnter={handleDrag}
|
|
onDragLeave={handleDrag}
|
|
onDragOver={handleDrag}
|
|
onDrop={handleDrop}
|
|
>
|
|
<FileUp className="mx-auto h-12 w-12 text-gray-400" />
|
|
<div className="mt-4">
|
|
<p className="text-sm text-gray-600">
|
|
Drag and drop file PDF di sini atau
|
|
</p>
|
|
<label className="mt-2 cursor-pointer">
|
|
<Input
|
|
type="file"
|
|
accept=".pdf"
|
|
className="hidden"
|
|
onChange={handleFileChange}
|
|
/>
|
|
<span className="text-teal-600 hover:text-teal-500">
|
|
Pilih file
|
|
</span>
|
|
</label>
|
|
</div>
|
|
{selectedFile && (
|
|
<div className="mt-4 p-2 bg-gray-50 rounded flex items-center justify-between">
|
|
<span className="text-sm text-gray-600">
|
|
{selectedFile.name}
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setSelectedFile(null)}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mt-4 flex justify-end gap-3">
|
|
<Button variant="outline" onClick={onClose}>
|
|
Batal
|
|
</Button>
|
|
<Button
|
|
onClick={handleUpload}
|
|
disabled={!selectedFile}
|
|
className="bg-teal-600 hover:bg-teal-700"
|
|
>
|
|
Unggah
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default UploadDoc;
|