// Copyright (C) The Arvados Authors. All rights reserved. // // SPDX-License-Identifier: AGPL-3.0 import React from 'react'; import classnames from 'classnames'; import { Grid, StyleRulesCallback, Table, TableBody, TableCell, TableHead, TableRow, Typography, WithStyles, IconButton } from '@material-ui/core'; import { withStyles } from '@material-ui/core'; import Dropzone from 'react-dropzone'; import { CloudUploadIcon, RemoveIcon } from "../icon/icon"; import { formatFileSize, formatProgress, formatUploadSpeed } from "common/formatters"; import { UploadFile } from 'store/file-uploader/file-uploader-actions'; type CssRules = "root" | "dropzone" | "dropzoneWrapper" | "container" | "uploadIcon" | "dropzoneBorder" | "dropzoneBorderLeft" | "dropzoneBorderRight" | "dropzoneBorderTop" | "dropzoneBorderBottom" | "dropzoneBorderHorzActive" | "dropzoneBorderVertActive" | "deleteButton" | "deleteButtonDisabled" | "deleteIcon"; const styles: StyleRulesCallback = theme => ({ root: { }, dropzone: { width: "100%", height: "100%", overflow: "auto" }, dropzoneWrapper: { width: "100%", height: "200px", position: "relative", border: "1px solid rgba(0, 0, 0, 0.42)" }, dropzoneBorder: { content: "", position: "absolute", transition: "transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms", pointerEvents: "none", backgroundColor: "#6a1b9a" }, dropzoneBorderLeft: { left: -1, top: -1, bottom: -1, width: 2, transform: "scaleY(0)", }, dropzoneBorderRight: { right: -1, top: -1, bottom: -1, width: 2, transform: "scaleY(0)", }, dropzoneBorderTop: { left: 0, right: 0, top: -1, height: 2, transform: "scaleX(0)", }, dropzoneBorderBottom: { left: 0, right: 0, bottom: -1, height: 2, transform: "scaleX(0)", }, dropzoneBorderHorzActive: { transform: "scaleY(1)" }, dropzoneBorderVertActive: { transform: "scaleX(1)" }, container: { height: "100%" }, uploadIcon: { verticalAlign: "middle" }, deleteButton: { cursor: "pointer" }, deleteButtonDisabled: { cursor: "not-allowed" }, deleteIcon: { marginLeft: "-6px" } }); interface FileUploadPropsData { files: UploadFile[]; disabled: boolean; onDrop: (files: File[]) => void; onDelete: (file: UploadFile) => void; } interface FileUploadState { focused: boolean; } export type FileUploadProps = FileUploadPropsData & WithStyles; export const FileUpload = withStyles(styles)( class extends React.Component { constructor(props: FileUploadProps) { super(props); this.state = { focused: false }; } onDelete = (event: React.MouseEvent, file: UploadFile): void => { const { onDelete, disabled } = this.props; event.stopPropagation(); if (!disabled) { onDelete(file); } } render() { const { classes, onDrop, disabled, files } = this.props; return
onDrop(files)} onClick={() => { 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 && Drag and drop data or click to browse } {files.length > 0 && File name File size Upload speed Upload progress Delete {files.map(f => {f.file.name} {formatFileSize(f.file.size)} {formatUploadSpeed(f.prevLoaded, f.loaded, f.prevTime, f.currentTime)} {formatProgress(f.loaded, f.total)} ) => this.onDelete(event, f)} className={disabled ? classnames(classes.deleteButtonDisabled, classes.deleteIcon) : classnames(classes.deleteButton, classes.deleteIcon)} > )}
}
; } } );