Spaces:
Running
Running
File size: 2,017 Bytes
33d9e63 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | import React from 'react';
import { Upload } from 'lucide-react';
export interface FileUploaderProps {
accept?: string;
onFileSelect: (file: File) => void;
title?: string;
subtitle?: string;
className?: string;
id?: string;
}
export const FileUploader: React.FC<FileUploaderProps> = ({
accept = '*',
onFileSelect,
title = '파일 드래그 앤 드롭',
subtitle = 'Excel, CSV 파일 지원',
className = '',
id = 'file-uploader-dropzone',
}) => {
const [isDragging, setIsDragging] = React.useState(false);
const fileInputRef = React.useRef<HTMLInputElement>(null);
const handleDragOver = (e: React.DragEvent) => {
e.preventDefault();
setIsDragging(true);
};
const handleDragLeave = () => {
setIsDragging(false);
};
const handleDrop = (e: React.DragEvent) => {
e.preventDefault();
setIsDragging(false);
const files = e.dataTransfer.files;
if (files && files.length > 0) {
onFileSelect(files[0]);
}
};
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const files = e.target.files;
if (files && files.length > 0) {
onFileSelect(files[0]);
}
};
return (
<div
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
onClick={() => fileInputRef.current?.click()}
className={`border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-all ${isDragging
? 'border-orange-500 bg-orange-50/60'
: 'border-slate-200 bg-slate-50/60 hover:border-orange-400 hover:bg-slate-50'
} ${className}`}
id={id}
>
<input
type="file"
ref={fileInputRef}
accept={accept}
onChange={handleFileChange}
className="hidden"
/>
<Upload className="w-5 h-5 mx-auto mb-2 text-orange-500" />
<p className="text-sm font-bold text-slate-700">{title}</p>
{subtitle && <p className="text-sm text-slate-400 mt-0.5">{subtitle}</p>}
</div>
);
};
|