123 lines
3.6 KiB
TypeScript
123 lines
3.6 KiB
TypeScript
import { TrashIcon } from "@heroicons/react/24/outline";
|
||
import { useState, useRef, ChangeEvent } from "react";
|
||
|
||
interface FileUploaderProps {
|
||
onFileSelected: (base64: string) => void;
|
||
error?: string;
|
||
defaultValue?: string;
|
||
title?: string;
|
||
}
|
||
|
||
export default function FileUploader({
|
||
onFileSelected,
|
||
error,
|
||
defaultValue,
|
||
title = "سند",
|
||
}: FileUploaderProps) {
|
||
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
|
||
const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0];
|
||
if (!file) return;
|
||
|
||
setSelectedFile(file);
|
||
|
||
const base64 = await convertToBase64(file);
|
||
onFileSelected(base64);
|
||
};
|
||
|
||
const convertToBase64 = (file: File): Promise<string> => {
|
||
return new Promise((resolve, reject) => {
|
||
const reader = new FileReader();
|
||
reader.readAsDataURL(file);
|
||
reader.onload = () => resolve(reader.result as string);
|
||
reader.onerror = (error) => reject(error);
|
||
});
|
||
};
|
||
|
||
const handleRemoveFile = () => {
|
||
setSelectedFile(null);
|
||
if (fileInputRef.current) {
|
||
fileInputRef.current.value = "";
|
||
}
|
||
onFileSelected("");
|
||
};
|
||
|
||
const handleButtonClick = () => {
|
||
fileInputRef.current?.click();
|
||
};
|
||
|
||
const formatFileSize = (size: number) => {
|
||
const sizeInMB = size / (1024 * 1024);
|
||
return sizeInMB.toFixed(2) + " MB";
|
||
};
|
||
|
||
const getDefaultDocumentName = () => {
|
||
const name = defaultValue?.split("/")[defaultValue?.split("/")?.length - 1];
|
||
|
||
if (name) {
|
||
return name;
|
||
} else {
|
||
return null;
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div className="flex items-center w-full gap-2 border border-gray1-200 dark:border-dark-400 rounded-lg">
|
||
<input
|
||
type="file"
|
||
ref={fileInputRef}
|
||
onChange={handleFileChange}
|
||
className="hidden"
|
||
accept="*/*"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={handleButtonClick}
|
||
className={`flex justify-center cursor-pointer items-center px-4 py-2 rounded-lg transition-colors w-full ${
|
||
selectedFile
|
||
? "border-l border-gray1-200 dark:border-dark-400 bg-gray-50 dark:bg-dark-600 dark:text-dark-100 hover:bg-gray-100 dark:hover:bg-dark-600 text-gray-700"
|
||
: "bg-white1-200 dark:bg-dark-500 dark:text-dark-100 text-gray-700 hover:bg-white1-300 dark:hover:bg-dark-600"
|
||
}`}
|
||
>
|
||
{selectedFile || getDefaultDocumentName() ? (
|
||
<div className="flex items-center gap-2">
|
||
<div className="flex justify-center">
|
||
<span className=" text-[10px] w-10 bg-info-500 rounded-2xl text-white">
|
||
{title}
|
||
</span>
|
||
</div>
|
||
{selectedFile ? (
|
||
<span className="">
|
||
{selectedFile.name?.slice(0, 15)}
|
||
{selectedFile.name?.length > 15 ? "..." : ""} (
|
||
{formatFileSize(selectedFile.size)})
|
||
</span>
|
||
) : (
|
||
<span>{getDefaultDocumentName()}</span>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<span>انتخاب {title}</span>
|
||
)}
|
||
</button>
|
||
{selectedFile && (
|
||
<button
|
||
type="button"
|
||
onClick={handleRemoveFile}
|
||
className="p-2 text-red-400 rounded-lg transition-colors"
|
||
aria-label="Remove file"
|
||
>
|
||
<TrashIcon className="h-5 w-5" />
|
||
</button>
|
||
)}
|
||
</div>
|
||
{error && (
|
||
<p className="text-xs text-red-500 dark:text-red-400">{error}</p>
|
||
)}
|
||
</>
|
||
);
|
||
}
|