107 lines
4.6 KiB
TypeScript
107 lines
4.6 KiB
TypeScript
import React, { useState } from "react";
|
|
import { useDispatch } from "react-redux";
|
|
import { AppDispatch } from "../../store/store";
|
|
|
|
import { FaCloudUploadAlt } from "react-icons/fa";
|
|
import { MdCancel } from "react-icons/md";
|
|
import { uploadDocuments } from "../../store/slices/documentSlice";
|
|
|
|
import { Bounce, toast } from "react-toastify";
|
|
|
|
const UploadDoc: React.FC = () => {
|
|
const [files, setFiles] = useState<File[]>([]);
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const selectedFiles = e.target.files ? Array.from(e.target.files) : [];
|
|
if (selectedFiles.length > 0) {
|
|
setFiles((prevFiles) => [...prevFiles, ...selectedFiles]);
|
|
handleUpload(selectedFiles);
|
|
}
|
|
};
|
|
|
|
const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const droppedFiles = Array.from(e.dataTransfer.files);
|
|
if (droppedFiles.length > 0) {
|
|
setFiles((prevFiles) => [...prevFiles, ...droppedFiles]);
|
|
handleUpload(droppedFiles);
|
|
}
|
|
};
|
|
|
|
const handleUpload = (filesToUpload: File[]) => {
|
|
const formData = new FormData();
|
|
filesToUpload.forEach((file) => formData.append("document", file));
|
|
|
|
dispatch(uploadDocuments(formData))
|
|
.unwrap()
|
|
.then((res) => {
|
|
// toast.dismiss();
|
|
// toast.info("📄 Documents uploaded!", {
|
|
// position: "bottom-right",
|
|
// autoClose: 5000,
|
|
// hideProgressBar: false,
|
|
// closeOnClick: false,
|
|
// pauseOnHover: true,
|
|
// draggable: true,
|
|
// progress: undefined,
|
|
// theme: "light",
|
|
// transition: Bounce,
|
|
// });
|
|
setFiles([]);
|
|
})
|
|
.catch((err) => console.error("Failed to upload documents", err));
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="w-full bg-[var(--compBgCol)] rounded border border-gray-200 p-5 mb-2 shadow-sm">
|
|
<div
|
|
className="w-full border-1 border-dashed border-gray-300 rounded p-6 text-center transition-all duration-200 hover:border-[var(--primary)] hover:bg-gray-50 cursor-pointer"
|
|
onClick={() => document.getElementById("file-input")?.click()}
|
|
onDragOver={(e) => e.preventDefault()}
|
|
onDrop={handleDrop}
|
|
>
|
|
<input
|
|
type="file"
|
|
id="file-input"
|
|
className="hidden"
|
|
onChange={handleFileChange}
|
|
accept=".pdf,.doc,.docx,.jpg,.png,.jpeg,.txt"
|
|
multiple
|
|
/>
|
|
<div className="flex flex-col items-center justify-center gap-2">
|
|
<FaCloudUploadAlt className="text-5xl text-[var(--primary)]" />
|
|
<p className="text-sm font-medium text-gray-700">Upload or drag & drop files</p>
|
|
<p className="text-xs text-gray-500">PDF, DOCX, JPG, PNG, TXT (max 10MB)</p>
|
|
</div>
|
|
|
|
{/* {files.length > 0 && (
|
|
<div className="mt-5 text-left">
|
|
<h3 className="text-sm font-semibold text-gray-700 mb-2">Files</h3>
|
|
<div className="space-y-2 max-h-40 overflow-y-auto pr-1">
|
|
{files.map((file, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center justify-between bg-white border border-gray-200 rounded-md px-3 py-2 hover:shadow-sm transition"
|
|
>
|
|
<span className="truncate text-sm text-gray-800 max-w-[85%]">{file.name}</span>
|
|
<MdCancel
|
|
onClick={() => setFiles(files.filter((_, i) => i !== index))}
|
|
className="text-gray-400 hover:text-red-500 cursor-pointer transition"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)} */}
|
|
</div>
|
|
</div>
|
|
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default UploadDoc;
|