Drag and Drop One or More Files (#935)

* initial commit, add dependency, new class
will eventually combine all file uploads

* working on adding upload drag and drop

* page does not load

* drag and drop does not actually work

* addign fileinputdrop as independent component

* add fileupload drop inside uploadfiledraganddrop

* drag and drop does not add files
select selects files but misses the first one

* drag and drop works now, is overwritten if file selected using button, need to fix

* uploads but overwrites, need to fix

* works for the select, need to fix other

* should work for drop now too

* was not an array

* delete icon works
removing console logs

* drag and drop and select means other upload methods no longer needed

* removing text in drag and drop

* added to styles but not using because it does not work

* some changes, not sure how to do rest

* fix button

* return to dataset

* remove unnecessary imports

---------

Co-authored-by: Chen Wang <[email protected]>

Author: tcnichol

frontend/package.json

@@ -62,6 +62,7 @@
 		"react-copy-to-clipboard": "^5.1.0",
 		"react-dom": "^17.0.2",
 		"react-gravatar": "^2.6.3",
+		"react-file-drop": "^3.1.6",
 		"react-json-view": "^1.21.3",
 		"react-loading-overlay-ts": "^1.0.4",
 		"react-redux": "^7.2.6",

frontend/src/components/datasets/NewMenu.tsx

@@ -14,6 +14,7 @@ import { useSelector } from "react-redux";
 import { RootState } from "../../types/data";
 import { UploadFile } from "../files/UploadFile";
 import { UploadFileMultiple } from "../files/UploadFileMultiple";
+import {UploadFileDragAndDrop} from "../files/UploadFileDragAndDrop";
 import UploadIcon from "@mui/icons-material/Upload";
 import { Folder } from "@material-ui/icons";
 
@@ -29,8 +30,7 @@ export const NewMenu = (props: ActionsMenuProps): JSX.Element => {
 	const about = useSelector((state: RootState) => state.dataset.about);
 
 	const [anchorEl, setAnchorEl] = React.useState<Element | null>(null);
-	const [createFileOpen, setCreateFileOpen] = React.useState<boolean>(false);
-	const [createMultipleFileOpen, setCreateMultipleFileOpen] =
+	const [dragDropFiles, setDragDropFiles] =
 		React.useState<boolean>(false);
 	const [newFolder, setNewFolder] = React.useState<boolean>(false);
 
@@ -47,30 +47,15 @@ export const NewMenu = (props: ActionsMenuProps): JSX.Element => {
 	return (
 		<Box>
 			<Dialog
-				open={createFileOpen}
+				open={dragDropFiles}
 				onClose={() => {
-					setCreateFileOpen(false);
+					setDragDropFiles(false);
 				}}
 				fullWidth={true}
 				maxWidth="lg"
 				aria-labelledby="form-dialog"
 			>
-				<UploadFile
-					selectedDatasetId={datasetId}
-					selectedDatasetName={about.name}
-					folderId={folderId}
-				/>
-			</Dialog>
-			<Dialog
-				open={createMultipleFileOpen}
-				onClose={() => {
-					setCreateMultipleFileOpen(false);
-				}}
-				fullWidth={true}
-				maxWidth="lg"
-				aria-labelledby="form-dialog"
-			>
-				<UploadFileMultiple selectedDatasetId={datasetId} folderId={folderId} />
+				<UploadFileDragAndDrop selectedDatasetId={datasetId} folderId={folderId}/>
 			</Dialog>
 
 			<CreateFolder
@@ -97,25 +82,14 @@ export const NewMenu = (props: ActionsMenuProps): JSX.Element => {
 			>
 				<MenuItem
 					onClick={() => {
-						setCreateFileOpen(true);
-						handleOptionClose();
-					}}
-				>
-					<ListItemIcon>
-						<UploadIcon fontSize="small" />
-					</ListItemIcon>
-					<ListItemText>Upload File</ListItemText>
-				</MenuItem>
-				<MenuItem
-					onClick={() => {
-						setCreateMultipleFileOpen(true);
+						setDragDropFiles(true);
 						handleOptionClose();
 					}}
 				>
 					<ListItemIcon>
 						<UploadIcon fontSize="small" />
 					</ListItemIcon>
-					<ListItemText>Upload Multiple Files</ListItemText>
+					<ListItemText>Upload Files</ListItemText>
 				</MenuItem>
 				<MenuItem
 					onClick={() => {

frontend/src/components/files/FileUploadDrop.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+import { FileDrop } from "react-file-drop";
+import { Box, IconButton, Typography } from "@mui/material";
+import DeleteIcon from "@material-ui/icons/Delete";
+import { FileDropGroup, FileDropInput } from "../../styles/Styles";
+import { makeStyles } from "@material-ui/core/styles";
+import { theme } from "../../theme";
+
+const useStyles = makeStyles({
+	fileDrop: {
+		boxSizing: "border-box",
+		height: "176px",
+		width: "100%",
+		border: "1px dashed #00619D",
+		backgroundColor: "#FFFFFF",
+		margin: "27px auto 0 auto",
+		display: "block",
+	},
+	fileDropInput: {
+		width: "95px",
+	},
+	fileDropText: {
+		height: "54px",
+		width: "92px",
+		color: "#8798AD",
+		fontSize: "15px",
+		fontWeight: 500,
+		letterSpacing: 0,
+		lineHeight: "18px",
+		textAlign: "center",
+	},
+	fileDropGroup: {
+		width: "92px",
+		margin: "50px auto 0 auto",
+		display: "block",
+	},
+	displayFile: {
+		boxSizing: "border-box",
+		width: "100%",
+		border: "1px solid #00619D",
+		backgroundColor: "#FFFFFF",
+		margin: "5px auto 0 auto",
+		display: "block",
+	},
+	displayFileItem: {
+		width: "100%",
+		height: "37px",
+	},
+	displayFilename: {
+		height: "18px",
+		color: theme.palette.primary.main,
+		fontSize: "15px",
+		fontWeight: 500,
+		letterSpacing: 0,
+		lineHeight: "18px",
+		padding: "9px 17px",
+		float: "left",
+	},
+	deleteFileIcon: {
+		height: "24px",
+		width: "24px",
+		float: "right",
+		margin: "6px",
+		"&:hover": {
+			color: theme.palette.secondary.main,
+		},
+	},
+});
+
+type FileUploadDropProps = {
+	onDrop: any;
+	onFileInputChange: any;
+	fileInputRef: any;
+	onDeleteClick: any;
+	selectedFiles: File[] | [];
+};
+
+export default function FileUploadDrop(props: FileUploadDropProps) {
+	const {
+		onDrop,
+		onFileInputChange,
+		fileInputRef,
+		onDeleteClick,
+		selectedFiles,
+	} = props;
+
+	const classes = useStyles();
+
+	return (
+		<div>
+			<FileDrop onDrop={onDrop} className={classes.fileDrop}>
+				<div style={FileDropGroup}>
+					<input
+						onChange={onFileInputChange}
+						ref={fileInputRef}
+						type="file"
+						style={FileDropInput}
+						multiple
+					/>
+					<Typography className={classes.fileDropText}>
+						<br></br>
+					</Typography>
+				</div>
+			</FileDrop>
+			{selectedFiles !== undefined && selectedFiles.length > 0 ? (
+				<Box className={classes.displayFile}>
+					{selectedFiles.map((file) => {
+						return (
+							<div className={classes.displayFileItem} key={file.name}>
+								<Typography className={classes.displayFilename}>
+									{file.name}
+								</Typography>
+								<IconButton
+									aria-label="delete"
+									className={classes.deleteFileIcon}
+									onClick={() => {
+										onDeleteClick(file);
+									}}
+								>
+									<DeleteIcon />
+								</IconButton>
+							</div>
+						);
+					})}
+				</Box>
+			) : (
+				<></>
+			)}
+		</div>
+	);
+}