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, List, ListItem, ListItemText, 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";
10 import { formatFileSize } from "../../common/formatters";
12 type CssRules = "root" | "dropzone" | "container" | "uploadIcon";
14 const styles: StyleRulesCallback<CssRules> = theme => ({
21 border: "1px dashed black",
28 verticalAlign: "middle"
32 interface FileUploadProps {
34 onDrop: (files: File[]) => void;
37 export const FileUpload = withStyles(styles)(
38 ({ classes, files, onDrop }: FileUploadProps & WithStyles<CssRules>) =>
39 <Grid container direction={"column"}>
40 <Typography variant={"subheading"}>
43 <Dropzone className={classes.dropzone} onDrop={files => onDrop(files)}>
44 <Grid container justify="center" alignItems="center" className={classes.container} direction={"row"}>
45 <Grid item component={"span"} style={{width: "100%", textAlign: "center"}}>
46 <Typography variant={"subheading"}>
47 <CloudUploadIcon className={classes.uploadIcon}/> Drag and drop data or click to browse
51 <Grid item style={{width: "100%"}}>
53 {files.map((f, idx) =>
54 <ListItem button key={idx}>
56 primary={f.name} primaryTypographyProps={{variant: "body2"}}
57 secondary={formatFileSize(f.size)}/>