Add component layout, add react-dropzone

[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 537841101036055830e65c75143e6b596409f276..3a98e27af214f3e3b763404f52dd4b9790631b08 100644 (file)
--- a/src/components/file-upload/file-upload.tsx
+++ b/src/components/file-upload/file-upload.tsx
@@ -3,24 +3,27 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Button, Grid, StyleRulesCallback, WithStyles } from '@material-ui/core';
+import { Grid, StyleRulesCallback, Typography, WithStyles } from '@material-ui/core';
 import { withStyles } from '@material-ui/core';
+import Dropzone from 'react-dropzone';
+import { CloudUploadIcon } from "../icon/icon";
 
-export interface Breadcrumb {
-    label: string;
-}
-
-type CssRules = "item" | "currentItem" | "label";
+type CssRules = "root" | "dropzone" | "container" | "uploadIcon";
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
-    item: {
-        opacity: 0.6
+    root: {
     },
-    currentItem: {
-        opacity: 1
+    dropzone: {
+        width: "100%",
+        height: "100px",
+        border: "1px dashed black",
+        borderRadius: "5px"
     },
-    label: {
-        textTransform: "none"
+    container: {
+        height: "100%"
+    },
+    uploadIcon: {
+        verticalAlign: "middle"
     }
 });
 
@@ -29,8 +32,18 @@ interface FileUploadProps {
 
 export const FileUpload = withStyles(styles)(
     ({ classes }: FileUploadProps & WithStyles<CssRules>) =>
-    <Grid container alignItems="center" wrap="nowrap">
-    {
-    }
+    <Grid container direction={"column"}>
+        <Typography variant={"subheading"}>
+            Upload data
+        </Typography>
+        <Dropzone className={classes.dropzone}>
+            <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 <a>browse</a>
+                    </Typography>
+                </Grid>
+            </Grid>
+        </Dropzone>
     </Grid>
 );