114 lines
3.3 KiB
TypeScript
114 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import { useRef, useState } from 'react'
|
|
|
|
const ACCEPTED = [
|
|
'image/jpeg', 'image/png', 'image/heic', 'image/webp',
|
|
'video/mp4', 'video/quicktime',
|
|
'application/pdf',
|
|
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
|
].join(',')
|
|
|
|
const MAX_SIZE = {
|
|
'video/mp4': 200 * 1024 * 1024,
|
|
'video/quicktime': 200 * 1024 * 1024,
|
|
default: 10 * 1024 * 1024,
|
|
}
|
|
|
|
interface Props {
|
|
onFilesChange: (files: File[]) => void
|
|
disabled?: boolean
|
|
}
|
|
|
|
export function FileUpload({ onFilesChange, disabled = false }: Props) {
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
const [files, setFiles] = useState<File[]>([])
|
|
const [errors, setErrors] = useState<string[]>([])
|
|
const [dragging, setDragging] = useState(false)
|
|
|
|
function validate(incoming: File[]): { valid: File[]; errs: string[] } {
|
|
const valid: File[] = []
|
|
const errs: string[] = []
|
|
for (const f of incoming) {
|
|
const limit = MAX_SIZE[f.type as keyof typeof MAX_SIZE] ?? MAX_SIZE.default
|
|
if (f.size > limit) {
|
|
errs.push(`${f.name}: exceeds ${limit / 1024 / 1024}MB limit`)
|
|
} else {
|
|
valid.push(f)
|
|
}
|
|
}
|
|
return { valid, errs }
|
|
}
|
|
|
|
function addFiles(incoming: File[]) {
|
|
const { valid, errs } = validate(incoming)
|
|
const next = [...files, ...valid]
|
|
setFiles(next)
|
|
setErrors(errs)
|
|
onFilesChange(next)
|
|
}
|
|
|
|
function remove(index: number) {
|
|
const next = files.filter((_, i) => i !== index)
|
|
setFiles(next)
|
|
onFilesChange(next)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<div
|
|
className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors
|
|
${dragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'}
|
|
${disabled ? 'opacity-50 pointer-events-none' : ''}`}
|
|
onClick={() => inputRef.current?.click()}
|
|
onDragOver={e => { e.preventDefault(); setDragging(true) }}
|
|
onDragLeave={() => setDragging(false)}
|
|
onDrop={e => {
|
|
e.preventDefault()
|
|
setDragging(false)
|
|
addFiles(Array.from(e.dataTransfer.files))
|
|
}}
|
|
>
|
|
<p className="text-sm text-gray-600">
|
|
Tap to add photos / videos / documents
|
|
</p>
|
|
<p className="text-xs text-gray-400 mt-1">
|
|
Photos/docs up to 10MB · Videos up to 200MB
|
|
</p>
|
|
</div>
|
|
|
|
<input
|
|
ref={inputRef}
|
|
type="file"
|
|
multiple
|
|
accept={ACCEPTED}
|
|
className="hidden"
|
|
onChange={e => addFiles(Array.from(e.target.files ?? []))}
|
|
disabled={disabled}
|
|
/>
|
|
|
|
{errors.map((err, i) => (
|
|
<p key={i} className="text-sm text-red-600">{err}</p>
|
|
))}
|
|
|
|
{files.length > 0 && (
|
|
<ul className="space-y-1">
|
|
{files.map((f, i) => (
|
|
<li key={i} className="flex items-center justify-between bg-gray-50 rounded px-3 py-2 text-sm">
|
|
<span className="truncate max-w-xs">{f.name}</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => remove(i)}
|
|
className="ml-2 text-red-500 hover:text-red-700 text-xs"
|
|
disabled={disabled}
|
|
>
|
|
Remove
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|