create file-uploader
This commit is contained in:
MehrdadAdabi
parent
7c8590c075
commit
84e9b2beb7
229
src/core/components/base/file-uploader.tsx
Normal file
229
src/core/components/base/file-uploader.tsx
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
import { cn } from "@/core/lib/utils";
|
||||
import { File, Upload, X } from "lucide-react";
|
||||
import { type ChangeEvent, useRef, useState } from "react";
|
||||
|
||||
type FileUploaderProps = {
|
||||
label?: string;
|
||||
onFileChange: (file: File | null) => void;
|
||||
onRemove?: () => void;
|
||||
className?: string;
|
||||
error?: string;
|
||||
required?: boolean;
|
||||
accept?: string;
|
||||
maxSize?: number; // in MB
|
||||
multiple?: boolean;
|
||||
disabled?: boolean;
|
||||
helperText?: string;
|
||||
showPreview?: boolean;
|
||||
};
|
||||
|
||||
export function FileUploader({
|
||||
label = "آپلود فایل",
|
||||
onFileChange,
|
||||
onRemove,
|
||||
className,
|
||||
error,
|
||||
required = false,
|
||||
accept,
|
||||
maxSize = 10,
|
||||
multiple = false,
|
||||
disabled = false,
|
||||
helperText,
|
||||
showPreview = true,
|
||||
}: FileUploaderProps) {
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
||||
const [fileError, setFileError] = useState<string>("");
|
||||
|
||||
const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
validateAndSetFile(file);
|
||||
}
|
||||
};
|
||||
|
||||
const validateAndSetFile = (file: File) => {
|
||||
setFileError("");
|
||||
|
||||
// Check file size
|
||||
if (file.size > maxSize * 1024 * 1024) {
|
||||
setFileError(`حجم فایل نباید بیشتر از ${maxSize} مگابایت باشد`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check file type if accept is specified
|
||||
if (accept) {
|
||||
const acceptedTypes = accept.split(",").map((type) => type.trim());
|
||||
const fileExtension = `.${file.name.split(".").pop()?.toLowerCase()}`;
|
||||
const fileMimeType = file.type;
|
||||
|
||||
const isAccepted = acceptedTypes.some((type) => {
|
||||
if (type.startsWith(".")) {
|
||||
return fileExtension === type.toLowerCase();
|
||||
}
|
||||
if (type.endsWith("/*")) {
|
||||
const category = type.split("/")[0];
|
||||
return fileMimeType.startsWith(category);
|
||||
}
|
||||
return fileMimeType === type;
|
||||
});
|
||||
|
||||
if (!isAccepted) {
|
||||
setFileError("نوع فایل انتخاب شده مجاز نیست");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setSelectedFile(file);
|
||||
onFileChange(file);
|
||||
};
|
||||
|
||||
const handleRemove = () => {
|
||||
setSelectedFile(null);
|
||||
setFileError("");
|
||||
onFileChange(null);
|
||||
onRemove?.();
|
||||
if (fileInputRef.current) fileInputRef.current.value = "";
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
if (!disabled) {
|
||||
setIsDragging(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragLeave = () => {
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
if (disabled) return;
|
||||
|
||||
const file = e.dataTransfer.files?.[0];
|
||||
if (file) {
|
||||
validateAndSetFile(file);
|
||||
}
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes: number): string => {
|
||||
if (bytes === 0) return "0 Bytes";
|
||||
const k = 1024;
|
||||
const sizes = ["Bytes", "KB", "MB", "GB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
|
||||
};
|
||||
|
||||
const getAcceptText = (): string => {
|
||||
if (!accept) return `تا ${maxSize} مگابایت`;
|
||||
|
||||
const types = accept.split(",").map((type) => type.trim());
|
||||
const extensions = types
|
||||
.filter((type) => type.startsWith("."))
|
||||
.map((type) => type.toUpperCase())
|
||||
.join(", ");
|
||||
|
||||
return extensions ? `${extensions} تا ${maxSize} مگابایت` : `تا ${maxSize} مگابایت`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("w-full", className)}>
|
||||
{label && (
|
||||
<label className="mb-2 flex items-center gap-1 text-sm font-medium text-foreground text-right">
|
||||
{label}
|
||||
{required && <span className="text-red-500">*</span>}
|
||||
</label>
|
||||
)}
|
||||
|
||||
{selectedFile && showPreview ? (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border-2 border-gray-300">
|
||||
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||
<div className="flex-shrink-0">
|
||||
<File size={32} className="text-blue-500" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
{selectedFile.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{formatFileSize(selectedFile.size)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRemove}
|
||||
disabled={disabled}
|
||||
className="flex-shrink-0 mr-3 p-2 text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
aria-label="حذف فایل"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
{!disabled && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRemove}
|
||||
className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors self-start"
|
||||
aria-label="حذف فایل"
|
||||
>
|
||||
<X size={16} />
|
||||
<span>حذف فایل</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<label
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
className={cn(
|
||||
"flex flex-col items-center justify-center gap-3 w-full h-32 rounded-lg border-2 border-dashed transition-all duration-200",
|
||||
disabled
|
||||
? "cursor-not-allowed opacity-50 bg-gray-100 border-gray-300"
|
||||
: "cursor-pointer",
|
||||
!disabled && isDragging
|
||||
? "border-blue-500 bg-blue-50"
|
||||
: !disabled && "border-gray-300 bg-gray-50 hover:bg-gray-100 hover:border-gray-400"
|
||||
)}
|
||||
role="button"
|
||||
aria-label="آپلود فایل"
|
||||
>
|
||||
<Upload
|
||||
size={28}
|
||||
className={cn(
|
||||
isDragging && !disabled ? "text-blue-500" : "text-gray-500"
|
||||
)}
|
||||
/>
|
||||
<div className="text-center px-4">
|
||||
<p className="text-sm font-medium text-gray-700">
|
||||
{disabled ? "آپلود غیرفعال است" : "کلیک کنید یا فایل را بکشید"}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{helperText || getAcceptText()}
|
||||
</p>
|
||||
</div>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept={accept}
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
disabled={disabled}
|
||||
multiple={multiple}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{(error || fileError) && (
|
||||
<p className="mt-2 text-sm text-red-600 flex items-center gap-1 text-end">
|
||||
{error || fileError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user