import { useRef } from 'react' /** button that opens file upload window */ export function FileUploadButton(props: { onFiles: (files: File[]) => void className?: string children?: React.ReactNode }) { const { onFiles, className, children } = props const ref = useRef<HTMLInputElement>(null) return ( <> <button type={'button'} className={className} onClick={() => ref.current?.click()} > {children} </button> <input ref={ref} type="file" accept=".gif,.jpg,.jpeg,.png,.webp, image/*" multiple className="hidden" onChange={(e) => onFiles(Array.from(e.target.files || []))} /> </> ) }