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 "@ui_kit/reactImageFileResizer";
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,
  },
  {
    maxWidth: 32,
    maxHeight: 32,
    compressFormat: "PNG",
    quality: 100,
    rotation: 0,
  },
  {
    maxWidth: 48,
    maxHeight: 48,
    compressFormat: "PNG",
    quality: 100,
    rotation: 0,
  },
  {
    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(() => {
    if (favList.length === 18) {

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

      favList.forEach((uri, 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: string) => {
    setFavList((old) => [...old, uri]);
  };

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

  const [data, setData] = useState("");
  const [ready, setReady] = useState(false);

  const dragenterHC = () => {
    setReady(true);
  };

  const dragexitHC = () => {
    setReady(false);
  };

  const dropHC = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setReady(false);
    const file = event.dataTransfer.files[0];
    if (file.size < 5242880) {
      setData(URL.createObjectURL(file));
    } else {
      enqueueSnackbar("Размер картинки слишком велик");
    }
  };

  const dragOverHC = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
  };

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