/Javascript/React/React useref file input

React useref file input

const App = () => {
  const inputRef = useRef(null);
  const [file, setFile] = useState(null);
  return (
    <>
      <input
        ref={inputRef}
        accept=".pdf"
        style={{ display: "none" }}
        id="raised-button-file"
        multiple
        type="file"
        onChange={e => {
          setFile(e.target.files[0]);
        }}
      />
      <label htmlFor="raised-button-file">
        <button component="span">
          <span>file</span>
        </button>
      </label>
    </>
  );
};

Source: stackoverflow.com

Similar codes

16 votes344 views3 answers
Loop in react depending on number
Javascript React
3 votes402 views1 answer
React native elements
Javascript React
0 vote540 views1 answer
Canvas js in react
Javascript React
0 vote364 views1 answer
How to change tab color react bootstraps customixation
Javascript React
36 votes345 views2 answers
Ref hook in react
Javascript React
0 vote381 views2 answers
Count down timer in react native
Javascript React
2 votes392 views1 answer
How to clear state in react hooks
Javascript React
3 votes405 views1 answer
React export
Javascript React
0 vote306 views1 answer
Build function component react
Javascript React
0 vote379 views1 answer
Will console.log will be automatically disabled in react native for development build
Javascript React