title: How to have obSubmit and onChange events for file upload in form in react, material-ui?
body: <p>I'm building a React component which is a simple. It has <code>Upload</code> button which upload a file. I can't get <code>onSumbit</code> to fire off in my current code:</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import Typography from '@material-ui/core/es/Typography/Typography';
  import Button from '@material-ui/core/es/Button/Button';
  import { UploadCSVstyles } from '../styles/Material-UI/muiStyles.js';
  import withStyles from '@material-ui/core/es/styles/withStyles';
  
  import * as log from 'loglevel';
  log.setLevel("debug");
  
  class UploadCSV extends React.Component {
    state = {
      uploadedFile: null
    }
  
    onSubmit = e =&gt; {
      e.preventDefault();
      log.debug('from submit');
      this.setState({
        uploadedFile: e.target.files[0]
      });
    }
  
    onChange = e =&gt; {
      log.debug('from change');
      this.setState({
        uploadedFile: e.target.files[0]
      });
    }
  
  render() {
      const { classes } = this.props;
      return (
        &lt;div&gt;
          &lt;Typography&gt;
            You can upload a CSV file containing app id's in one columns.
          &lt;/Typography&gt;
          &lt;input
            accept="text/csv"
            className={classes.input}
            id="contained-button-file"
            multiple
            type="file"
            onChange={this.onChange}
          /&gt;
          &lt;label htmlFor="contained-button-file"&gt;
            &lt;Button variant="contained" component="span" className={classes.button}&gt;
              Choose files
            &lt;/Button&gt;
          &lt;/label&gt;
          &lt;form onSubmit={this.onSubmit}&gt;
            &lt;Button variant="contained" component="span" className={classes.button}
                    type="submit"&gt;
              Upload
            &lt;/Button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  UploadCSV.propTypes = {
    classes: PropTypes.object.isRequired
  };
  
  export default UploadCSV;
  </code></pre>
  
  <p>The problem is I think with Material-UI button because it somehow doesn't trigger <code>onSubmit</code>.
  How do I make the <code>onSubmit</code> event work with Material-UI <code>Button</code>?</p>