add basic fileinput to MIDIComponent

src/App.js

@@ -4,12 +4,18 @@ import './App.css';
 import { makeStyles } from '@material-ui/styles' 
 import Slider from  '@material-ui/core/Slider'
 
+import MidiComponent from './components/MidiComponent'
+
 const useStyles = makeStyles({
   root: {
     width: 127,
   },
 });
 
+function valuetext(value) {
+  return `${value}`;
+}
+
 function SettingSlider() {
 
   const classes = useStyles();
@@ -20,7 +26,7 @@ function SettingSlider() {
 
   return(
     <div className={classes.root}>
-      <Slider value={value} onChange={handleEvent}/> 
+      <Slider value={value} getAriaValueText={valuetext} valueLabelDisplay="auto" onChange={handleEvent} min={0} max={127}/> 
     </div>
   );
 }
@@ -30,9 +36,10 @@ function App() {
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
-        <p>
+        <div>
           <SettingSlider/>
-        </p>
+          <MidiComponent/>
+        </div>
         <a
           className="App-link"
           href="https://reactjs.org"

src/components/MidiComponent.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+// this will pass true to enable SYSEX
+
+// Success Callback
+function onMIDISuccess(access) {
+    console.log(access);
+
+    var inputs = access.inputs;
+    var outputs = access.outputs;
+}
+
+//Failure Callback
+function onMIDIFailure() {
+    console.log('Could not access MIDI devices!');
+}
+
+function recieveMIDIMessage(message) {
+    
+}
+
+function MIDIComponent () {
+    
+    navigator.requestMIDIAccess({sysex: true}).then(onMIDISuccess, onMIDIFailure);
+    const fileInput = React.useRef();
+
+    const handleInput = (event) => {
+        event.preventDefault();
+        alert(
+            `Selected file - ${fileInput.current.files[0].name}`
+        );
+    }
+
+    return(
+        <form onSubmit={handleInput}>
+            <label>
+                Upload a Sysex File:
+                <input type='file' ref={fileInput} />
+            </label>
+            <br />
+            <button type="submit">Submit</button>
+        </form>
+    );
+
+
+}
+
+function parseSysexFile() {
+
+}
+
+export default MIDIComponent;