Extract file-uploader, resotore file upload to collection creator

[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 74efe009e9503a95576993985c776f9f2b396282..e7f402cdb247a900e66e3a9aa99676f3e8e2197d 100644 (file)
--- a/src/components/file-upload/file-upload.tsx
+++ b/src/components/file-upload/file-upload.tsx
@@ -14,7 +14,7 @@ import { withStyles } from '@material-ui/core';
 import Dropzone from 'react-dropzone';
 import { CloudUploadIcon } from "../icon/icon";
 import { formatFileSize, formatProgress, formatUploadSpeed } from "~/common/formatters";
-import { UploadFile } from "~/store/collections/uploader/collection-uploader-actions";
+import { UploadFile } from '~/store/file-uploader/file-uploader-actions';
 
 type CssRules = "root" | "dropzone" | "container" | "uploadIcon";
 
@@ -36,7 +36,7 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
     }
 });
 
-interface FileUploadProps {
+export interface FileUploadProps {
     files: UploadFile[];
     disabled: boolean;
     onDrop: (files: File[]) => void;
@@ -44,21 +44,17 @@ interface FileUploadProps {
 
 export const FileUpload = withStyles(styles)(
     ({ classes, files, disabled, onDrop }: FileUploadProps & WithStyles<CssRules>) =>
-    <Grid container direction={"column"}>
-        <Typography variant={"subheading"}>
-            Upload data
-        </Typography>
         <Dropzone className={classes.dropzone} onDrop={files => onDrop(files)} disabled={disabled}>
             {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
+                <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>}
+                    </Grid>
+                </Grid>}
             {files.length > 0 &&
-                <Table style={{width: "100%"}}>
+                <Table style={{ width: "100%" }}>
                     <TableHead>
                         <TableRow>
                             <TableCell>File name</TableCell>
@@ -68,17 +64,16 @@ export const FileUpload = withStyles(styles)(
                         </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>
-                    )}
+                        {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>
 );