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/file-uploader/file-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 export interface FileUploadProps {
  40     files: UploadFile[];
  41     disabled: boolean;
  42     onDrop: (files: File[]) => void;
  43 }
  44
  45 export const FileUpload = withStyles(styles)(
  46     ({ classes, files, disabled, onDrop }: FileUploadProps & WithStyles<CssRules>) =>
  47         <Dropzone className={classes.dropzone} onDrop={files => onDrop(files)} disabled={disabled}>
  48             {files.length === 0 &&
  49                 <Grid container justify="center" alignItems="center" className={classes.container}>
  50                     <Grid item component={"span"}>
  51                         <Typography variant={"subheading"}>
  52                             <CloudUploadIcon className={classes.uploadIcon} /> Drag and drop data or click to browse
  53                     </Typography>
  54                     </Grid>
  55                 </Grid>}
  56             {files.length > 0 &&
  57                 <Table style={{ width: "100%" }}>
  58                     <TableHead>
  59                         <TableRow>
  60                             <TableCell>File name</TableCell>
  61                             <TableCell>File size</TableCell>
  62                             <TableCell>Upload speed</TableCell>
  63                             <TableCell>Upload progress</TableCell>
  64                         </TableRow>
  65                     </TableHead>
  66                     <TableBody>
  67                         {files.map(f =>
  68                             <TableRow key={f.id}>
  69                                 <TableCell>{f.file.name}</TableCell>
  70                                 <TableCell>{formatFileSize(f.file.size)}</TableCell>
  71                                 <TableCell>{formatUploadSpeed(f.prevLoaded, f.loaded, f.prevTime, f.currentTime)}</TableCell>
  72                                 <TableCell>{formatProgress(f.loaded, f.total)}</TableCell>
  73                             </TableRow>
  74                         )}
  75                     </TableBody>
  76                 </Table>
  77             }
  78         </Dropzone>
  79 );