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 {
   7     Grid,
   8     StyleRulesCallback,
   9     Table, TableBody, TableCell, TableHead, TableRow,
  10     Typography,
  11     WithStyles
  12 } from '@material-ui/core';
  13 import { withStyles } from '@material-ui/core';
  14 import Dropzone from 'react-dropzone';
  15 import { CloudUploadIcon } from "../icon/icon";
  16 import { formatFileSize, formatProgress, formatUploadSpeed } from "../../common/formatters";
  17 import { UploadFile } from "../../store/collections/uploader/collection-uploader-actions";
  18
  19 type CssRules = "root" | "dropzone" | "container" | "uploadIcon";
  20
  21 const styles: StyleRulesCallback<CssRules> = theme => ({
  22     root: {
  23     },
  24     dropzone: {
  25         width: "100%",
  26         height: "200px",
  27         overflow: "auto",
  28         border: "1px dashed black",
  29         borderRadius: "5px"
  30     },
  31     container: {
  32         height: "100%"
  33     },
  34     uploadIcon: {
  35         verticalAlign: "middle"
  36     }
  37 });
  38
  39 interface FileUploadProps {
  40     files: UploadFile[];
  41     onDrop: (files: File[]) => void;
  42 }
  43
  44 export const FileUpload = withStyles(styles)(
  45     ({ classes, files, onDrop }: FileUploadProps & WithStyles<CssRules>) =>
  46     <Grid container direction={"column"}>
  47         <Typography variant={"subheading"}>
  48             Upload data
  49         </Typography>
  50         <Dropzone className={classes.dropzone} onDrop={files => onDrop(files)}>
  51             {files.length === 0 &&
  52             <Grid container justify="center" alignItems="center" className={classes.container}>
  53                 <Grid item component={"span"}>
  54                     <Typography variant={"subheading"}>
  55                         <CloudUploadIcon className={classes.uploadIcon}/> Drag and drop data or click to browse
  56                     </Typography>
  57                 </Grid>
  58             </Grid>}
  59             {files.length > 0 &&
  60                 <Table style={{width: "100%"}}>
  61                     <TableHead>
  62                         <TableRow>
  63                             <TableCell>File name</TableCell>
  64                             <TableCell>File size</TableCell>
  65                             <TableCell>Upload speed</TableCell>
  66                             <TableCell>Upload progress</TableCell>
  67                         </TableRow>
  68                     </TableHead>
  69                     <TableBody>
  70                     {files.map(f =>
  71                         <TableRow key={f.id}>
  72                             <TableCell>{f.file.name}</TableCell>
  73                             <TableCell>{formatFileSize(f.file.size)}</TableCell>
  74                             <TableCell>{formatUploadSpeed(f.prevLoaded, f.loaded, f.prevTime, f.currentTime)}</TableCell>
  75                             <TableCell>{formatProgress(f.loaded, f.total)}</TableCell>
  76                         </TableRow>
  77                     )}
  78                     </TableBody>
  79                 </Table>
  80             }
  81         </Dropzone>
  82     </Grid>
  83 );