React Material UI- make a button open a file picker window

Issue

I have a styled Material UI button component. I want to make it so when I click the styled button I can select a file on my computer.

I thought this could be done by placing the <Button></Button> inside the <label> for a <input type="file"/> (file input) element. But this only seems to work with divs and not buttons. I can neither get the file picker to open for a regular button element nor a material UI Button component.

How can I make a material ui Button act as the label for the file input?

import React from 'react';

import { Button } from '@material-ui/core';
export default function InputButton() {
  return (
    <div>

    {/* Button does not open file picker window */}
      <div>
        <label>
          <input type="file" style={{ display: 'none' }} />
          <Button>upload file</Button>
        </label>
      </div>

    {/* div does open file picker window */}
      <div>
        <label>
          <input type="file" style={{ display: 'none' }} />
          <div>upload file</div>
        </label>
      </div>

    </div>
  );
}

Solution

Have an internal ref in your component that is bound to the input of type file. onClick of the MUI Button, reference the input and simulate a click on it

function InputButton() {

  const fileInput = React.useRef();

  return (
    <div>
      <Button 
        variant="contained" 
        color="primary" 
        onClick={()=>fileInput.current.click()}
      >
        upload file
      </Button>

      <input 
        ref={fileInput} 
        type="file" 
        style={{ display: 'none' }} 
      />
    </div>
  );
}

ReactDOM.render(<InputButton/>, document.getElementById("root"));
<body>
  <div id="root"></div>
  
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

  <script type="text/babel">
    const { Button } = MaterialUI;
  </script>
</body>

Answered By – 95faf8e76605e973

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.