46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
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, linkURL, 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} linkURL={linkURL} />
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default function FileUploadForm() {
|
|
const { signOut } = useUserContext();
|
|
const classes = useStyles();
|
|
|
|
return (
|
|
<Container component="main" maxWidth="xs">
|
|
<CssBaseline />
|
|
<div className={classes.paper}>
|
|
<Typography component="h1" variant="h5">
|
|
Upload file
|
|
</Typography>
|
|
<FileUploadProvider>
|
|
<FileUploadZone classes={classes} />
|
|
</FileUploadProvider>
|
|
<Grid container>
|
|
<Grid item >
|
|
<Button onClick={signOut}>Sign Out</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
</Container>
|
|
);
|
|
} |