Wire up file upload form

src/components/FileUploadForm/index.jsx

@@ -1,12 +1,29 @@
-import React from 'react';
-import { Button, Container, CssBaseline, Grid, Typography } from '@material-ui/core';
-import { DropzoneAreaBase } from 'material-ui-dropzone';
-import { useUserContext }  from '../Contexts/UserContext';
-import useStyles from '../Styles';
+import React from "react";
+import { Button, Container, CssBaseline, Grid, Typography } from "@material-ui/core";
+import { DropzoneAreaBase } from "material-ui-dropzone";
+import { useUserContext }  from "../Contexts/UserContext";
+import { useFileUploadContext, FileUploadProvider }  from "../Contexts/FileUploadContext";
+import ModalProgressBar from "../ModalProgressBar";
+import useStyles from "../Styles";
+
+const FileUploadZone = ({ classes }) => {
+  const { uploading, progress, status, upload, cancel } = useFileUploadContext();
+
+  return (
+    <form className={classes.form} noValidate>
+      <DropzoneAreaBase 
+        maxFileSize={5e+7}
+        showAlerts={false}
+        onAdd={upload}
+      />
+      <ModalProgressBar uploading={uploading} progress={progress} onCancel={cancel} status={status} />
+    </form>
+  );
+};
 
 export default function FileUploadForm() {
-    const classes = useStyles();
     const { signOut } = useUserContext();
+    const classes = useStyles();
 
     return (
       <Container component="main" maxWidth="xs">
@@ -15,14 +32,14 @@ export default function FileUploadForm() {
           <Typography component="h1" variant="h5">
             Upload file
           </Typography>
-          <form className={classes.form} noValidate>
-            <DropzoneAreaBase />
-            <Grid container>
-              <Grid item >
-                <Button onClick={signOut}>Sign Out</Button>
-              </Grid>
+          <FileUploadProvider>
+            <FileUploadZone classes={classes} />
+          </FileUploadProvider>
+          <Grid container>
+            <Grid item >
+              <Button onClick={signOut}>Sign Out</Button>
             </Grid>
-          </form>
+          </Grid>
         </div>
       </Container>
     );