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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
'use client'
import * as React from 'react'
import { Upload, X, FileText } from 'lucide-react'
import { Button } from './button'
import { cn } from '@/lib/utils'
interface FileUploadProps {
value: File[]
onChange: (files: File[]) => void
accept?: Record<string, string[]>
maxSize?: number
maxFiles?: number
placeholder?: string
disabled?: boolean
className?: string
}
export function FileUpload({
value = [],
onChange,
accept,
maxSize = 10 * 1024 * 1024, // 10MB
maxFiles = 5,
placeholder = '파일을 선택하거나 드래그하세요',
disabled = false,
className
}: FileUploadProps) {
const [isDragOver, setIsDragOver] = React.useState(false)
const fileInputRef = React.useRef<HTMLInputElement>(null)
const handleFileSelect = (files: FileList | null) => {
if (!files || disabled) return
const fileArray = Array.from(files)
const validFiles = fileArray.filter(file => {
// 파일 크기 검증
if (file.size > maxSize) {
console.warn(`파일 ${file.name}이(가) 최대 크기(${maxSize / 1024 / 1024}MB)를 초과합니다.`)
return false
}
// 파일 타입 검증
if (accept) {
const fileType = file.type
const fileName = file.name.toLowerCase()
const isAccepted = Object.entries(accept).some(([mimeType, extensions]) => {
if (fileType && mimeType !== '*/*') {
return fileType.startsWith(mimeType.split('/')[0])
}
return extensions.some(ext => fileName.endsWith(ext.toLowerCase()))
})
if (!isAccepted) {
console.warn(`파일 ${file.name}이(가) 지원되지 않는 형식입니다.`)
return false
}
}
return true
})
const newFiles = [...value, ...validFiles].slice(0, maxFiles)
onChange(newFiles)
}
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
handleFileSelect(event.target.files)
// Reset input value to allow re-uploading the same file
event.target.value = ''
}
const handleDrop = (event: React.DragEvent) => {
event.preventDefault()
setIsDragOver(false)
handleFileSelect(event.dataTransfer.files)
}
const handleDragOver = (event: React.DragEvent) => {
event.preventDefault()
if (!disabled) {
setIsDragOver(true)
}
}
const handleDragLeave = () => {
setIsDragOver(false)
}
const removeFile = (index: number) => {
const newFiles = value.filter((_, i) => i !== index)
onChange(newFiles)
}
const formatFileSize = (bytes: number) => {
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 parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}
return (
<div className={cn('space-y-2', className)}>
{/* Drop zone */}
<div
className={cn(
'border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors',
isDragOver ? 'border-primary bg-primary/5' : 'border-muted-foreground/25',
disabled ? 'cursor-not-allowed opacity-50' : 'hover:border-primary/50'
)}
onDrop={handleDrop}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onClick={() => !disabled && fileInputRef.current?.click()}
>
<Upload className="mx-auto h-8 w-8 text-muted-foreground mb-2" />
<p className="text-sm text-muted-foreground">{placeholder}</p>
<p className="text-xs text-muted-foreground mt-1">
최대 {maxFiles}개 파일, 각 파일 {formatFileSize(maxSize)}까지
</p>
</div>
{/* Hidden file input */}
<input
ref={fileInputRef}
type="file"
multiple
accept={accept ? Object.values(accept).flat().join(',') : undefined}
onChange={handleInputChange}
className="hidden"
disabled={disabled}
/>
{/* File list */}
{value.length > 0 && (
<div className="space-y-2">
{value.map((file, index) => (
<div
key={index}
className="flex items-center justify-between p-2 bg-muted rounded-md"
>
<div className="flex items-center space-x-2">
<FileText className="h-4 w-4 text-muted-foreground" />
<div className="flex-1 min-w-0">
<p className="text-sm font-medium truncate">{file.name}</p>
<p className="text-xs text-muted-foreground">
{formatFileSize(file.size)}
</p>
</div>
</div>
<Button
variant="ghost"
size="sm"
onClick={(e) => {
e.stopPropagation()
removeFile(index)
}}
disabled={disabled}
>
<X className="h-4 w-4" />
</Button>
</div>
))}
</div>
)}
</div>
)
}
|
