frontPanel/src/pages/startPage/dropfavicon.tsx

import { useState } from "react";
import {Box, ButtonBase, useTheme, Typography, SxProps, Theme} from "@mui/material";
import UploadIcon from "../../assets/icons/UploadIcon";
import { SnackbarProvider, enqueueSnackbar } from 'notistack';
import Resizer from "react-image-file-resizer";

interface Props {
    text?: string;
    sx?: SxProps<Theme>;
    heightImg: string;
    widthImg?: string
}

export default ({text, sx, heightImg, widthImg}: Props) => {
    const theme = useTheme();
    const callback = (newFileUri:any) => setData(URL.createObjectURL(newFileUri));
    const resizeImage = (imageFile:any) => {
        try {
            Resizer.imageFileResizer(
                imageFile,
                150,
                150,
                "JPEG",
                100,
                0,
                callback,
            );
        } catch (err) {
            console.log(err);
        }}
        const handleImageResize = (imgInp:any) => resizeImage(imgInp.files);
    const imgHC = (imgInp:any) => {
        const [file] = imgInp.files
        if (file.size < 5242880) {
            setData(URL.createObjectURL(file))
        } else {enqueueSnackbar('Размер картинки слишком велик')}
        handleImageResize(file)
        console.log(file.height)
    }




    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])
        if (file.size < 5242880) {
            setData(URL.createObjectURL(file))
        } else {enqueueSnackbar('Размер картинки слишком велик')}
        // try {
        //     Resizer.imageFileResizer(
        //         file,
        //         50,
        //         50,
        //         "JPEG",
        //         100,
        //         0,
        //         callback,
        //     );
        //
        // } catch (err) {
        //     console.log(err);
        // }
        //
    }

    const dragOverHC = (event: any) => {
        event.preventDefault()
        // console.log("onDragOver")
    }

    return (
        <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
            <input onChange={event => imgHC(event.target)} hidden accept="image/*" multiple type="file" />
            <Box

                onDragEnter={dragenterHC}
                onDragExit={dragexitHC}
                onDrop={dropHC}
                onDragOver={dragOverHC}

                sx={{
                    width: "100%",
                    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,
                    ...sx
                }}

            >
                <UploadIcon />
                <Typography sx={{
                    position: "absolute",
                    right: "10px",
                    bottom: "10px",
                    color: theme.palette.orange.main,
                    fontSize: "16px",
                    lineHeight: "19px",
                    textDecoration: "underline",
                }}>{text}</Typography>
                <SnackbarProvider style={{backgroundColor: theme.palette.brightPurple.main}}/>
                {data ?
                    <img height={heightImg} width={widthImg} src={data}
                         style={{
                             position: "absolute", zIndex: "-1",
                             objectFit: "revert-layer",
                         }}/>
                    :
                    null
                }
            </Box>
        </ButtonBase>
    )
}