| 15 | } |
| 16 | |
| 17 | export function AvatarUpload({ |
| 18 | value, |
| 19 | onChange, |
| 20 | disabled, |
| 21 | className, |
| 22 | }: AvatarUploadProps) { |
| 23 | const [isDragOver, setIsDragOver] = useState(false) |
| 24 | const [previewUrl, setPreviewUrl] = useState<string | null>(value || null) |
| 25 | const fileInputRef = useRef<HTMLInputElement>(null) |
| 26 | |
| 27 | // Update preview URL when value prop changes |
| 28 | useEffect(() => { |
| 29 | setPreviewUrl(value || null) |
| 30 | }, [value]) |
| 31 | |
| 32 | const handleFile = useCallback( |
| 33 | (file: File) => { |
| 34 | if (!file.type.startsWith('image/')) { |
| 35 | return |
| 36 | } |
| 37 | |
| 38 | // Convert file to data URL |
| 39 | const reader = new FileReader() |
| 40 | reader.onload = (e) => { |
| 41 | const dataUrl = e.target?.result as string |
| 42 | setPreviewUrl(dataUrl) |
| 43 | onChange(null, dataUrl) // Pass null for file since we're using data URL |
| 44 | } |
| 45 | reader.readAsDataURL(file) |
| 46 | }, |
| 47 | [onChange], |
| 48 | ) |
| 49 | |
| 50 | const handleDrop = useCallback( |
| 51 | (e: React.DragEvent) => { |
| 52 | e.preventDefault() |
| 53 | setIsDragOver(false) |
| 54 | |
| 55 | if (disabled) return |
| 56 | |
| 57 | const files = Array.from(e.dataTransfer.files) |
| 58 | const imageFile = files.find((file) => file.type.startsWith('image/')) |
| 59 | |
| 60 | if (imageFile) { |
| 61 | handleFile(imageFile) |
| 62 | } |
| 63 | }, |
| 64 | [handleFile, disabled], |
| 65 | ) |
| 66 | |
| 67 | const handleDragOver = useCallback( |
| 68 | (e: React.DragEvent) => { |
| 69 | e.preventDefault() |
| 70 | if (!disabled) { |
| 71 | setIsDragOver(true) |
| 72 | } |
| 73 | }, |
| 74 | [disabled], |