src/components/file-upload/file-upload.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { Grid, StyleRulesCallback, Typography, WithStyles } from '@material-ui/core';
   7 import { withStyles } from '@material-ui/core';
   8 import Dropzone from 'react-dropzone';
   9 import { CloudUploadIcon } from "../icon/icon";
  10
  11 type CssRules = "root" | "dropzone" | "container" | "uploadIcon";
  12
  13 const styles: StyleRulesCallback<CssRules> = theme => ({
  14     root: {
  15     },
  16     dropzone: {
  17         width: "100%",
  18         height: "100px",
  19         border: "1px dashed black",
  20         borderRadius: "5px"
  21     },
  22     container: {
  23         height: "100%"
  24     },
  25     uploadIcon: {
  26         verticalAlign: "middle"
  27     }
  28 });
  29
  30 interface FileUploadProps {
  31 }
  32
  33 export const FileUpload = withStyles(styles)(
  34     ({ classes }: FileUploadProps & WithStyles<CssRules>) =>
  35     <Grid container direction={"column"}>
  36         <Typography variant={"subheading"}>
  37             Upload data
  38         </Typography>
  39         <Dropzone className={classes.dropzone}>
  40             <Grid container justify="center" alignItems="center" className={classes.container}>
  41                 <Grid item component={"span"}>
  42                     <Typography variant={"subheading"}>
  43                         <CloudUploadIcon className={classes.uploadIcon}/> Drag and drop data or <a>browse</a>
  44                     </Typography>
  45                 </Grid>
  46             </Grid>
  47         </Dropzone>
  48     </Grid>
  49 );