import React from "react"
import { useRef } from "react"
import { MdFileUpload } from "react-icons/md"

interface Props {
    onUpload?: (files: FileList)=>void
}

const FileUploadButton: React.FC<Props> = (props) => {
	const inputRef = useRef<HTMLInputElement>(null)
    
	return ( 
		<>
			<button onClick={()=>inputRef.current?.click()} >
				<MdFileUpload size="40"/>
			</button>
			<input type="file" multiple className="hidden" ref={inputRef} onInput={()=>{
				if (inputRef.current && inputRef.current.files){
					props.onUpload?.(inputRef.current.files)
				}
			}}/>
		</>
	)
}

export default FileUploadButton