83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
|
import { useState } from "react";
|
|||
|
|
import { Box, ButtonBase, useTheme,Typography } from "@mui/material";
|
|||
|
|
import UploadIcon from "../../assets/icons/UploadIcon";
|
|||
|
|
|
|||
|
|
//Научи функцию принимать данные для валидации
|
|||
|
|
export default () => {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
|
|||
|
|
const [data, setData] = useState("")
|
|||
|
|
const [ready, setReady] = useState(false);
|
|||
|
|
|
|||
|
|
const dragenterHC = () => {
|
|||
|
|
// console.log("onDragEnter")
|
|||
|
|
setReady(true)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const dragexitHC = () => {
|
|||
|
|
// console.log("onDragExit")
|
|||
|
|
setReady(false)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const dropHC = (event: any) => {
|
|||
|
|
event.preventDefault()
|
|||
|
|
// console.log("onDrop")
|
|||
|
|
setReady(false)
|
|||
|
|
|
|||
|
|
const file = event.dataTransfer.files[0]
|
|||
|
|
console.log(event.dataTransfer.files[0])
|
|||
|
|
setData(URL.createObjectURL(file))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const dragOverHC = (event: any) => {
|
|||
|
|
event.preventDefault()
|
|||
|
|
// console.log("onDragOver")
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
|
|||
|
|
<input hidden accept="image/*" multiple type="file" />
|
|||
|
|
<Box
|
|||
|
|
|
|||
|
|
onDragEnter={dragenterHC}
|
|||
|
|
onDragExit={dragexitHC}
|
|||
|
|
onDrop={dropHC}
|
|||
|
|
onDragOver={dragOverHC}
|
|||
|
|
|
|||
|
|
sx={{
|
|||
|
|
width: "120px",
|
|||
|
|
height: "120px",
|
|||
|
|
position: "relative",
|
|||
|
|
display: "flex",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
alignItems: "center",
|
|||
|
|
backgroundColor: theme.palette.background.default,
|
|||
|
|
border: `1px solid ${ready? "red" : theme.palette.grey2.main}`,
|
|||
|
|
borderRadius: "8px",
|
|||
|
|
opacity: data ? "0.5" : 1
|
|||
|
|
}}
|
|||
|
|
|
|||
|
|
>
|
|||
|
|
<UploadIcon />
|
|||
|
|
<Typography sx={{
|
|||
|
|
position: "absolute",
|
|||
|
|
right: "10px",
|
|||
|
|
bottom: "10px",
|
|||
|
|
color: theme.palette.orange.main,
|
|||
|
|
fontSize: "16px",
|
|||
|
|
lineHeight: "19px",
|
|||
|
|
textDecoration: "underline",
|
|||
|
|
}}>5 MB максимум</Typography>
|
|||
|
|
{data ?
|
|||
|
|
<img height="110" src={data}
|
|||
|
|
style={{
|
|||
|
|
position: "absolute", zIndex: "-1",
|
|||
|
|
objectFit: "revert-layer",
|
|||
|
|
}}/>
|
|||
|
|
:
|
|||
|
|
null
|
|||
|
|
}
|
|||
|
|
</Box>
|
|||
|
|
</ButtonBase>
|
|||
|
|
)
|
|||
|
|
}
|