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, List, ListItem, ListItemText, 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 import { formatFileSize } from "../../common/formatters";
  11
  12 type CssRules = "root" | "dropzone" | "container" | "uploadIcon";
  13
  14 const styles: StyleRulesCallback<CssRules> = theme => ({
  15     root: {
  16     },
  17     dropzone: {
  18         width: "100%",
  19         height: "200px",
  20         overflow: "auto",
  21         border: "1px dashed black",
  22         borderRadius: "5px"
  23     },
  24     container: {
  25         height: "100%"
  26     },
  27     uploadIcon: {
  28         verticalAlign: "middle"
  29     }
  30 });
  31
  32 interface FileUploadProps {
  33     files: File[];
  34     onDrop: (files: File[]) => void;
  35 }
  36
  37 export const FileUpload = withStyles(styles)(
  38     ({ classes, files, onDrop }: FileUploadProps & WithStyles<CssRules>) =>
  39     <Grid container direction={"column"}>
  40         <Typography variant={"subheading"}>
  41             Upload data
  42         </Typography>
  43         <Dropzone className={classes.dropzone} onDrop={files => onDrop(files)}>
  44             <Grid container justify="center" alignItems="center" className={classes.container} direction={"column"}>
  45                 <Grid item component={"span"}>
  46                     <Typography variant={"subheading"}>
  47                         <CloudUploadIcon className={classes.uploadIcon}/> Drag and drop data or <a>browse</a>
  48                     </Typography>
  49                 </Grid>
  50                 <Grid item>
  51                     <List>
  52                     {files.map((f, idx) =>
  53                         <ListItem button key={idx}>
  54                             <ListItemText
  55                                 primary={f.name} primaryTypographyProps={{variant: "body2"}}
  56                                 secondary={formatFileSize(f.size)}/>
  57                         </ListItem>)}
  58                     </List>
  59                 </Grid>
  60             </Grid>
  61         </Dropzone>
  62     </Grid>
  63 );