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 * as 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: (files: File[]) => 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: any): void => {
 119             const { onDelete, disabled } = this.props;
 120
 121             event.stopPropagation();
 122
 123             if (!disabled) {
 124                 onDelete([file]);
 125             }
 126         }
 127         render() {
 128             const { classes, onDrop, disabled, files } = this.props;
 129             return <div className={"file-upload-dropzone " + classes.dropzoneWrapper}>
 130                 <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderLeft, { [classes.dropzoneBorderHorzActive]: this.state.focused })}/>
 131                 <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderRight, { [classes.dropzoneBorderHorzActive]: this.state.focused })}/>
 132                 <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderTop, { [classes.dropzoneBorderVertActive]: this.state.focused })}/>
 133                 <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderBottom, { [classes.dropzoneBorderVertActive]: this.state.focused })}/>
 134                 <Dropzone className={classes.dropzone}
 135                     onDrop={files => onDrop(files)}
 136                     onClick={() => {
 137                         const el = document.getElementsByClassName("file-upload-dropzone")[0];
 138                         const inputs = el.getElementsByTagName("input");
 139                         if (inputs.length > 0) {
 140                             inputs[0].focus();
 141                         }
 142                     }}
 143                     disabled={disabled}
 144                     inputProps={{
 145                         onFocus: () => {
 146                             this.setState({
 147                                 focused: true
 148                             });
 149                         },
 150                         onBlur: () => {
 151                             this.setState({
 152                                 focused: false
 153                             });
 154                         }
 155                 }}>
 156                     {files.length === 0 &&
 157                         <Grid container justify="center" alignItems="center" className={classes.container}>
 158                             <Grid item component={"span"}>
 159                                 <Typography variant='subtitle1'>
 160                                     <CloudUploadIcon className={classes.uploadIcon} /> Drag and drop data or click to browse
 161                             </Typography>
 162                             </Grid>
 163                         </Grid>}
 164                     {files.length > 0 &&
 165                         <Table style={{ width: "100%" }}>
 166                             <TableHead>
 167                                 <TableRow>
 168                                     <TableCell>File name</TableCell>
 169                                     <TableCell>File size</TableCell>
 170                                     <TableCell>Upload speed</TableCell>
 171                                     <TableCell>Upload progress</TableCell>
 172                                     <TableCell>Delete</TableCell>
 173                                 </TableRow>
 174                             </TableHead>
 175                             <TableBody>
 176                                 {files.map(f =>
 177                                     <TableRow key={f.id}>
 178                                         <TableCell>{f.file.name}</TableCell>
 179                                         <TableCell>{formatFileSize(f.file.size)}</TableCell>
 180                                         <TableCell>{formatUploadSpeed(f.prevLoaded, f.loaded, f.prevTime, f.currentTime)}</TableCell>
 181                                         <TableCell>{formatProgress(f.loaded, f.total)}</TableCell>
 182                                         <TableCell>
 183                                             <IconButton
 184                                                 aria-label="Remove"
 185                                                 onClick={(event:    React.MouseEvent<HTMLTableCellElement>) => this.onDelete(event, f)}
 186                                                 className={disabled ? classnames(classes.deleteButtonDisabled, classes.deleteIcon) : classnames(classes.deleteButton, classes.deleteIcon)}
 187                                             >
 188                                                 <RemoveIcon />
 189                                             </IconButton>
 190                                         </TableCell>
 191                                     </TableRow>
 192                                 )}
 193                             </TableBody>
 194                         </Table>
 195                     }
 196                 </Dropzone>
 197             </div>;
 198         }
 199     }
 200 );