27 lines
668 B
TypeScript
27 lines
668 B
TypeScript
|
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 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 || []))}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|