frontPanel/src/pages/startPage/dropfavicon.tsx

import { useEffect, useRef, 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";
import JSZip from "jszip"
import saveAs from "file-saver"

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

const imageFavicon = [
    {
        maxWidth: 16,
        maxHeight: 16,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0,
        // outputType: "string",
        // minWidth: 16,
        // minHeight: 16,
    },
    {
        maxWidth: 32,
        maxHeight: 32,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0,
        // outputType: "string",
        // minWidth: 32,
        // minHeight: 32,
    },
    {
        maxWidth: 48,
        maxHeight: 48,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0,
        // outputType: "string",
        // minWidth: 48,
        // minHeight: 48,
    },
    {
        maxWidth: 76,
        maxHeight: 76,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 96,
        maxHeight: 96,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 120,
        maxHeight: 120,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 128,
        maxHeight: 128,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 144,
        maxHeight: 144,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 152,
        maxHeight: 152,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 167,
        maxHeight: 167,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 180,
        maxHeight: 180,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 192,
        maxHeight: 192,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 196,
        maxHeight: 196,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 228,
        maxHeight: 288,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 256,
        maxHeight: 256,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 300,
        maxHeight: 300,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 384,
        maxHeight: 384,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    },
    {
        maxWidth: 512,
        maxHeight: 512,
        compressFormat: "PNG",
        quality: 100,
        rotation: 0
    }
]
export default ({text, sx, heightImg, widthImg}: Props) => {
    const theme = useTheme();
    const [favList, setFavList] = useState<string[]>([])

    useEffect(() => {
        console.log(favList)
        if (favList.length === 18) {

            console.log("сейчас я сработаю")


        const zip = new JSZip();//создание зип архива

        favList.forEach((uri, i) => {
            console.log(i)
            const idx = uri.indexOf('base64,') + 'base64,'.length; //обработка строки картинки
            const content = uri.substring(idx); //обработка строки картинки
            zip.file(`fav${i}.jpg`, content, {base64: true}); //сохранение картинки в архив с именем "fav.jpg"
        })

        zip.generateAsync({type:"blob"}).then(function(content) { // скачивание архива
             saveAs(content, "fav.zip"); // скачивание архива
        }); // скачивание архива

        }
    }, [favList])


    const callback = (uri:any) => {
        setFavList( old => [...old, uri])
    };
    
    
    const imgHC = (imgInp:any) => {
        setFavList([])
        const [file] = imgInp.files
        if (file.size < 5242880) {
            setData(URL.createObjectURL(file))
            imageFavicon.forEach(obj => {
                try {
                    Resizer.imageFileResizer(
                        [file][0],
                        obj.maxWidth,
                        obj.maxHeight,
                        obj.compressFormat,
                        obj.quality,
                        obj.rotation,
                        callback,
                        // obj.outputType,
                        // obj.minWidth,
                        // obj.minHeight,
                    );
                } catch (err) {
                    console.log(err);
                }
            })
        } else {enqueueSnackbar('Размер картинки слишком велик')}

    }




    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>
    )
}