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 React from 'react';
   6 import classnames from 'classnames';
   7 import {
   8     Grid,
   9     StyleRulesCallback,
  10     Table, TableBody, TableCell, TableHead, TableRow,
  11     Typography,
  12     WithStyles,
  13     IconButton
  14 } from '@material-ui/core';
  15 import { withStyles } from '@material-ui/core';
  16 import Dropzone from 'react-dropzone';
  17 import { CloudUploadIcon, RemoveIcon } from "../icon/icon";
  18 import { formatFileSize, formatProgress, formatUploadSpeed } from "common/formatters";
  19 import { UploadFile } from 'store/file-uploader/file-uploader-actions';
  20
  21 type CssRules = "root" | "dropzone" | "dropzoneWrapper" | "container" | "uploadIcon"
  22     | "dropzoneBorder" | "dropzoneBorderLeft" | "dropzoneBorderRight" | "dropzoneBorderTop" | "dropzoneBorderBottom"
  23     | "dropzoneBorderHorzActive" | "dropzoneBorderVertActive" | "deleteButton" | "deleteButtonDisabled" | "deleteIcon";
  24
  25 const styles: StyleRulesCallback<CssRules> = theme => ({
  26     root: {
  27     },
  28     dropzone: {
  29         width: "100%",
  30         height: "100%",
  31         overflow: "auto"
  32     },
  33     dropzoneWrapper: {
  34         width: "100%",
  35         height: "200px",
  36         position: "relative",
  37         border: "1px solid rgba(0, 0, 0, 0.42)"
  38     },
  39     dropzoneBorder: {
  40         content: "",
  41         position: "absolute",
  42         transition: "transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
  43         pointerEvents: "none",
  44         backgroundColor: "#6a1b9a"
  45     },
  46     dropzoneBorderLeft: {
  47         left: -1,
  48         top: -1,
  49         bottom: -1,
  50         width: 2,
  51         transform: "scaleY(0)",
  52     },
  53     dropzoneBorderRight: {
  54         right: -1,
  55         top: -1,
  56         bottom: -1,
  57         width: 2,
  58         transform: "scaleY(0)",
  59     },
  60     dropzoneBorderTop: {
  61         left: 0,
  62         right: 0,
  63         top: -1,
  64         height: 2,
  65         transform: "scaleX(0)",
  66     },
  67     dropzoneBorderBottom: {
  68         left: 0,
  69         right: 0,
  70         bottom: -1,
  71         height: 2,
  72         transform: "scaleX(0)",
  73     },
  74     dropzoneBorderHorzActive: {
  75         transform: "scaleY(1)"
  76     },
  77     dropzoneBorderVertActive: {
  78         transform: "scaleX(1)"
  79     },
  80     container: {
  81         height: "100%"
  82     },
  83     uploadIcon: {
  84         verticalAlign: "middle"
  85     },
  86     deleteButton: {
  87         cursor: "pointer"
  88     },
  89     deleteButtonDisabled: {
  90         cursor: "not-allowed"
  91     },
  92     deleteIcon: {
  93         marginLeft: "-6px"
  94     }
  95 });
  96
  97 interface FileUploadPropsData {
  98     files: UploadFile[];
  99     disabled: boolean;
 100     onDrop: (files: File[]) => void;
 101     onDelete: (file: UploadFile) => void;
 102 }
 103
 104 interface FileUploadState {
 105     focused: boolean;
 106 }
 107
 108 export type FileUploadProps = FileUploadPropsData & WithStyles<CssRules>;
 109
 110 export const FileUpload = withStyles(styles)(
 111     class extends React.Component<FileUploadProps, FileUploadState> {
 112         constructor(props: FileUploadProps) {
 113             super(props);
 114             this.state = {
 115                 focused: false
 116             };
 117         }
 118         onDelete = (event: React.MouseEvent<HTMLTableCellElement>, file: UploadFile): void => {
 119             const { onDelete, disabled } = this.props;
 120
 121             event.stopPropagation();
 122
 123             if (!disabled) {
 124                 onDelete(file);
 125             }
 126
 127             let interval = setInterval(() => {
 128                 const key = Object.keys((window as any).cancelTokens).find(key => key.indexOf(file.file.name) > -1);
 129
 130                 if (key) {
 131                     clearInterval(interval);
 132                     (window as any).cancelTokens[key]();
 133                     delete (window as any).cancelTokens[key];
 134                 }
 135             }, 100);
 136
 137         }
 138         render() {
 139             const { classes, onDrop, disabled, files } = this.props;
 140             return <div className={"file-upload-dropzone " + classes.dropzoneWrapper}>
 141                 <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderLeft, { [classes.dropzoneBorderHorzActive]: this.state.focused })} />
 142                 <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderRight, { [classes.dropzoneBorderHorzActive]: this.state.focused })} />
 143                 <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderTop, { [classes.dropzoneBorderVertActive]: this.state.focused })} />
 144                 <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderBottom, { [classes.dropzoneBorderVertActive]: this.state.focused })} />
 145                 <Dropzone className={classes.dropzone}
 146                     onDrop={files => onDrop(files)}
 147                     onClick={() => {
 148                         const el = document.getElementsByClassName("file-upload-dropzone")[0];
 149                         const inputs = el.getElementsByTagName("input");
 150                         if (inputs.length > 0) {
 151                             inputs[0].focus();
 152                         }
 153                     }}
 154                     data-cy="drag-and-drop"
 155                     disabled={disabled}
 156                     inputProps={{
 157                         onFocus: () => {
 158                             this.setState({
 159                                 focused: true
 160                             });
 161                         },
 162                         onBlur: () => {
 163                             this.setState({
 164                                 focused: false
 165                             });
 166                         }
 167                     }}>
 168                     {files.length === 0 &&
 169                         <Grid container justify="center" alignItems="center" className={classes.container}>
 170                             <Grid item component={"span"}>
 171                                 <Typography variant='subtitle1'>
 172                                     <CloudUploadIcon className={classes.uploadIcon} /> Drag and drop data or click to browse
 173                             </Typography>
 174                             </Grid>
 175                         </Grid>}
 176                     {files.length > 0 &&
 177                         <Table style={{ width: "100%" }}>
 178                             <TableHead>
 179                                 <TableRow>
 180                                     <TableCell>File name</TableCell>
 181                                     <TableCell>File size</TableCell>
 182                                     <TableCell>Upload speed</TableCell>
 183                                     <TableCell>Upload progress</TableCell>
 184                                     <TableCell>Delete</TableCell>
 185                                 </TableRow>
 186                             </TableHead>
 187                             <TableBody>
 188                                 {files.map(f =>
 189                                     <TableRow key={f.id}>
 190                                         <TableCell>{f.file.name}</TableCell>
 191                                         <TableCell>{formatFileSize(f.file.size)}</TableCell>
 192                                         <TableCell>{formatUploadSpeed(f.prevLoaded, f.loaded, f.prevTime, f.currentTime)}</TableCell>
 193                                         <TableCell>{formatProgress(f.loaded, f.total)}</TableCell>
 194                                         <TableCell>
 195                                             <IconButton
 196                                                 aria-label="Remove"
 197                                                 onClick={(event: React.MouseEvent<HTMLTableCellElement>) => this.onDelete(event, f)}
 198                                                 className={disabled ? classnames(classes.deleteButtonDisabled, classes.deleteIcon) : classnames(classes.deleteButton, classes.deleteIcon)}
 199                                             >
 200                                                 <RemoveIcon />
 201                                             </IconButton>
 202                                         </TableCell>
 203                                     </TableRow>
 204                                 )}
 205                             </TableBody>
 206                         </Table>
 207                     }
 208                 </Dropzone>
 209             </div>;
 210         }
 211     }
 212 );