A file input is just a simple wrapper of the <input type="file" /> that adds some default styles to look like a button. This means that all the themes available for a button are also available for this component. The file input has some reasonable defaults by showing a download file icon and a screen reader only accessible label of Upload. Unlike buttons, the file input is defaulted to render as an icon button with the primary theme color and the contained styles.

To use this component, you must provide:

• an id for accessibility and making the button clickable
• an onChange event handler

react-md@2.9.0 added a new hook named useFileUpload which can be used to:

• upload files to the browser using the FileReader API
• validate files based on file size or extension
• limit the number of files that can be uploaded

This example is a bit more complex than the previous and showcases:

• adding additional validation around what types of files can be uploaded
• enabling drag and drop uploads with useDropzone
• uploading files to a server using XHLHttpRequest
• using the returned value from the hook to display additional information to the user

Note: The server upload portion will not work once converted imported into a code sandbox.