1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { Grid, StyleRulesCallback, Typography, WithStyles } from '@material-ui/core';
7 import { withStyles } from '@material-ui/core';
8 import Dropzone from 'react-dropzone';
9 import { CloudUploadIcon } from "../icon/icon";
11 type CssRules = "root" | "dropzone" | "container" | "uploadIcon";
13 const styles: StyleRulesCallback<CssRules> = theme => ({
19 border: "1px dashed black",
26 verticalAlign: "middle"
30 interface FileUploadProps {
33 export const FileUpload = withStyles(styles)(
34 ({ classes }: FileUploadProps & WithStyles<CssRules>) =>
35 <Grid container direction={"column"}>
36 <Typography variant={"subheading"}>
39 <Dropzone className={classes.dropzone}>
40 <Grid container justify="center" alignItems="center" className={classes.container}>
41 <Grid item component={"span"}>
42 <Typography variant={"subheading"}>
43 <CloudUploadIcon className={classes.uploadIcon}/> Drag and drop data or <a>browse</a>