Wire up file upload form

src/components/ModalProgressBar/index.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import Modal from '@material-ui/core/Modal';
+
+import { Button, LinearProgress } from "@material-ui/core";
+
+const getModalStyle = () => {
+  const top = 30;
+  const left = 50;
+
+  return {
+    width: `350px`,
+    top: `${top}%`,
+    left: `${left}%`,
+    transform: `translate(-${left}%, -${top}%)`,
+    backgroundColor: `white`,
+    border: `none`,
+    position: `absolute`,
+    margin: `1em`,
+    padding: `1em`,
+    textAlign: `center`,
+  };
+};
+
+const ModalProgressBar = ({ onCancel, uploading, progress, status }) => {
+  const modalStyle = getModalStyle();
+  const onClickCancel = () => {
+    if (onCancel) onCancel();
+  }
+
+  return (
+    <Modal open={uploading}>
+      <div style={modalStyle}>
+        {status && <p>{status}</p>}
+        <LinearProgress variant="determinate" value={progress} />
+        <Button onClick={onClickCancel}>
+          { progress < 101 ? "Cancel" : "Done" }
+        </Button>
+      </div>
+    </Modal>    
+  );
+
+}
+
+export default ModalProgressBar;