-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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]>
- Loading branch information
1 parent
674034e
commit 980cafb
Showing
5 changed files
with
446 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
Oops, something went wrong.