Fix correct bytes not being sent, fix showing upload progress and speed

[arvados-workbench2.git] / src / components / file-upload / file-upload.tsx

diff --git a/src/components/file-upload/file-upload.tsx b/src/components/file-upload/file-upload.tsx
index 8c6e04a93ea14378fb86a3bc6baa322165684817..aa3c0e967ff78b326b16f1966903093c6c0c72a8 100644 (file)
--- a/src/components/file-upload/file-upload.tsx
+++ b/src/components/file-upload/file-upload.tsx
@@ -3,11 +3,18 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Grid, List, ListItem, ListItemText, StyleRulesCallback, Typography, WithStyles } from '@material-ui/core';
+import {
+    Grid,
+    StyleRulesCallback,
+    Table, TableBody, TableCell, TableHead, TableRow,
+    Typography,
+    WithStyles
+} from '@material-ui/core';
 import { withStyles } from '@material-ui/core';
 import Dropzone from 'react-dropzone';
 import { CloudUploadIcon } from "../icon/icon";
-import { formatFileSize } from "../../common/formatters";
+import { formatFileSize, formatProgress, formatUploadSpeed } from "../../common/formatters";
+import { UploadFile } from "../../store/collections/uploader/collection-uploader-actions";
 
 type CssRules = "root" | "dropzone" | "container" | "uploadIcon";
 
@@ -30,7 +37,7 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
 });
 
 interface FileUploadProps {
-    files: File[];
+    files: UploadFile[];
     onDrop: (files: File[]) => void;
 }
 
@@ -41,24 +48,36 @@ export const FileUpload = withStyles(styles)(
             Upload data
         </Typography>
         <Dropzone className={classes.dropzone} onDrop={files => onDrop(files)}>
-            <Grid container justify="center" alignItems="center" className={classes.container} direction={"row"}>
-                <Grid item component={"span"} style={{width: "100%", textAlign: "center"}}>
+            {files.length === 0 &&
+            <Grid container justify="center" alignItems="center" className={classes.container}>
+                <Grid item component={"span"}>
                     <Typography variant={"subheading"}>
                         <CloudUploadIcon className={classes.uploadIcon}/> Drag and drop data or click to browse
                     </Typography>
                 </Grid>
-
-                <Grid item style={{width: "100%"}}>
-                    <List>
-                    {files.map((f, idx) =>
-                        <ListItem button key={idx}>
-                            <ListItemText
-                                primary={f.name} primaryTypographyProps={{variant: "body2"}}
-                                secondary={formatFileSize(f.size)}/>
-                        </ListItem>)}
-                    </List>
-                </Grid>
-            </Grid>
+            </Grid>}
+            {files.length > 0 &&
+                <Table style={{width: "100%"}}>
+                    <TableHead>
+                        <TableRow>
+                            <TableCell>File name</TableCell>
+                            <TableCell>File size</TableCell>
+                            <TableCell>Upload speed</TableCell>
+                            <TableCell>Upload progress</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                    {files.map(f =>
+                        <TableRow key={f.id}>
+                            <TableCell>{f.file.name}</TableCell>
+                            <TableCell>{formatFileSize(f.file.size)}</TableCell>
+                            <TableCell>{formatUploadSpeed(f.prevLoaded, f.loaded, f.prevTime, f.currentTime)}</TableCell>
+                            <TableCell>{formatProgress(f.loaded, f.total)}</TableCell>
+                        </TableRow>
+                    )}
+                    </TableBody>
+                </Table>
+            }
         </Dropzone>
     </Grid>
 );