- ({ 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
- </Typography>
- </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>
+ class extends React.Component<FileUploadProps, FileUploadState> {
+ constructor(props: FileUploadProps) {
+ super(props);
+ this.state = {
+ focused: false
+ };
+ }
+ render() {
+ const { classes, onDrop, disabled, files } = this.props;
+ return <div className={"file-upload-dropzone " + classes.dropzoneWrapper}>
+ <div className={classnames("dropzone-border-left", { "dropzone-border-left-active": this.state.focused })}/>
+ <div className={classnames("dropzone-border-right", { "dropzone-border-right-active": this.state.focused })}/>
+ <div className={classnames("dropzone-border-top", { "dropzone-border-top-active": this.state.focused })}/>
+ <div className={classnames("dropzone-border-bottom", { "dropzone-border-bottom-active": this.state.focused })}/>
+ <Dropzone className={classes.dropzone}
+ onDrop={files => onDrop(files)}
+ onClick={(e) => {
+ const el = document.getElementsByClassName("file-upload-dropzone")[0];
+ const inputs = el.getElementsByTagName("input");
+ if (inputs.length > 0) {
+ inputs[0].focus();
+ }
+ }}
+ disabled={disabled}
+ inputProps={{
+ onFocus: () => {
+ this.setState({
+ focused: true
+ });
+ },
+ onBlur: () => {
+ this.setState({
+ focused: false
+ });
+ }
+ }}>
+ {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>}
+ {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>
+ </div>;
+ }
+ }