1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
9 Table, TableBody, TableCell, TableHead, TableRow,
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';
19 type CssRules = "root" | "dropzone" | "container" | "uploadIcon";
21 const styles: StyleRulesCallback<CssRules> = theme => ({
28 border: "1px dashed black",
35 verticalAlign: "middle"
39 export interface FileUploadProps {
42 onDrop: (files: File[]) => void;
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
57 <Table style={{ width: "100%" }}>
60 <TableCell>File name</TableCell>
61 <TableCell>File size</TableCell>
62 <TableCell>Upload speed</TableCell>
63 <TableCell>Upload progress</TableCell>
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>