41 lines
958 B
TypeScript
41 lines
958 B
TypeScript
import { useRef } from "react";
|
|
|
|
interface PhotoUploadProps {
|
|
imageDataUrl: string | null;
|
|
onFileChange: (file: File) => void;
|
|
}
|
|
|
|
export function PhotoUpload({ imageDataUrl, onFileChange }: PhotoUploadProps) {
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) onFileChange(file);
|
|
};
|
|
|
|
return (
|
|
<div className="vb-field">
|
|
<span className="vb-label">Foto</span>
|
|
<button
|
|
type="button"
|
|
className="vb-photo-btn"
|
|
onClick={() => inputRef.current?.click()}
|
|
aria-label="Upload foto"
|
|
>
|
|
{imageDataUrl ? (
|
|
<img src={imageDataUrl} alt="jouw foto" className="vb-photo-preview" />
|
|
) : (
|
|
<span className="vb-photo-placeholder">+ foto toevoegen</span>
|
|
)}
|
|
</button>
|
|
<input
|
|
ref={inputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={handleChange}
|
|
className="hidden"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|