How can I open an file input with a button click ? My code :
<Button variant="outlined">
Choose Image
</Button>
<input
type="file"
id="input_file"
accept=".jpg,.jpeg,.png"
style={{ display: 'none' }}
/>
-
To clarify: you want the browser to pop up windows explorer so the user chan a choose a file to upload when the button is clicked?Pelicer– Pelicer2021-09-24 11:31:09 +00:00Commented Sep 24, 2021 at 11:31
-
Yes, this i what i wantkacper3671– kacper36712021-09-27 07:13:57 +00:00Commented Sep 27, 2021 at 7:13
Add a comment
|
2 Answers
React >= 16.8 , using useRef hook
import React, { useRef } from 'react'
const MyComponent = () => {
const ref = useRef()
const handleClick = (e) => {
ref.current.click()
}
return (
<>
<button onClick={handleClick}>Upload Image</button>
<input ref={ref} type="file" />
</>
)
}
export default MyComponent
1 Comment
nonemaw
It works on my scenario perfectly: use ref to trigger file upload window from an image's click event, really thanks! (I wasted almost whole day on this)
const Open = () => {
document.getElementById('get_file').onclick = function() {
document.getElementById('input_file').click();}}
<button id="get_file" variant="outlined" onClick={() => Open() } > Choose Image </button>
<input type="file" id="input_file" accept=".jpg,.jpeg,.png" style={{ display: 'none' }} />
You have a answer here How to link an input button to a file select window
