закончена работа над дропом картинок, готова валидация веса

package-lock.json

@@ -20,6 +20,7 @@
                 "@types/node": "^16.7.13",
                 "@types/react": "^18.0.0",
                 "@types/react-dom": "^18.0.0",
+                "notistack": "^3.0.1",
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
                 "react-router-dom": "^6.6.2",
@@ -8866,6 +8867,14 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/goober": {
+            "version": "2.1.13",
+            "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.13.tgz",
+            "integrity": "sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==",
+            "peerDependencies": {
+                "csstype": "^3.0.10"
+            }
+        },
         "node_modules/gopd": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -12503,6 +12512,27 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/notistack": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/notistack/-/notistack-3.0.1.tgz",
+            "integrity": "sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==",
+            "dependencies": {
+                "clsx": "^1.1.0",
+                "goober": "^2.0.33"
+            },
+            "engines": {
+                "node": ">=12.0.0",
+                "npm": ">=6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/notistack"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/npm-run-path": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -23953,6 +23983,12 @@
                 "slash": "^3.0.0"
             }
         },
+        "goober": {
+            "version": "2.1.13",
+            "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.13.tgz",
+            "integrity": "sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==",
+            "requires": {}
+        },
         "gopd": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -26583,6 +26619,15 @@
             "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
             "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A=="
         },
+        "notistack": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/notistack/-/notistack-3.0.1.tgz",
+            "integrity": "sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA==",
+            "requires": {
+                "clsx": "^1.1.0",
+                "goober": "^2.0.33"
+            }
+        },
         "npm-run-path": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",

package.json

@@ -15,6 +15,7 @@
         "@types/node": "^16.7.13",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
+        "notistack": "^3.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.6.2",

src/pages/startPage/StartPageSettings.tsx

@@ -51,149 +51,6 @@ export default function StartPageSettings() {
     console.log(StartPageClone)
     const [backgroundType, setBackgroundType] = useState(listQuizes[params].config.startpage.background.type);
     const [alignType, setAlignType] = useState<AlignType>("left");
-    //дропзона
-    //для Изображения
-    const imgHC = (imgInp:any) => {
-        const [file] = imgInp.files
-        setImg(URL.createObjectURL(file))
-    }
-    const [img, setImg] = React.useState("");
-
-    const dropZone = React.useRef<any>(null);
-    const [ready, setReady] = React.useState(false);
-
-    const dragenterHC = () => {
-        console.log("a")
-        setReady(true)
-    }
-
-    const dragexitHC = () => {
-        setReady(false)
-    }
-
-    const ondropHC = (event: any) => {
-        event.preventDefault()
-        const file = event.dataTransfer.files[0]
-        console.log(event.dataTransfer.files[0])
-        setImg(URL.createObjectURL(file))
-        setReady(false)
-    }
-
-    const ondragOverHC = (event: any) => {
-        event.preventDefault()
-        console.log(event)
-    }
-
-    React.useEffect(() => {
-            dropZone.current.addEventListener("dragenter", dragenterHC)
-            dropZone.current.addEventListener("dragexit", dragexitHC)
-            dropZone.current.addEventListener("dragover", ondragOverHC)
-            dropZone.current.addEventListener("drop", ondropHC)
-            console.log(dropZone.current)
-    },)
-
-    //для Логотипа
-    const logoHC = (imgInp:any) => {
-        const [fileL] = imgInp.files
-        setLogo(URL.createObjectURL(fileL))
-    }
-    const [logo, setLogo] = React.useState("");
-
-    const dropZoneLogo = React.useRef<any>(null);
-    const [readyLogo, setReadyLogo] = React.useState(false);
-
-    const dragenterLogoHC = () => {
-        console.log("b")
-        setReadyLogo(true)
-    }
-
-    const dragexitLogoHC = () => {
-        setReadyLogo(false)
-    }
-
-    const ondropLogoHC = (event: any) => {
-        event.preventDefault()
-        const fileL = event.dataTransfer.files[0]
-        console.log(event.dataTransfer.files[0])
-        setLogo(URL.createObjectURL(fileL))
-        setReadyLogo(false)
-    }
-
-    const ondragOverLogoHC = (event: any) => {
-        event.preventDefault()
-        console.log(event)
-    }
-
-    React.useEffect(() => {
-            dropZoneLogo.current.addEventListener("dragenter", dragenterLogoHC)
-            dropZoneLogo.current.addEventListener("dragexit", dragexitLogoHC)
-            dropZone.current.addEventListener("dragover", ondragOverLogoHC)
-            dropZone.current.addEventListener("drop", ondropLogoHC)
-            console.log(dropZoneLogo.current)
-
-    },)
-
-    // для фавиконки
-    const favHC = (imgInp:any) => {
-        const [file] = imgInp.files
-        setFav(URL.createObjectURL(file))
-    }
-    const [fav, setFav] = React.useState("");
-
-    const dropZoneFav = React.useRef<any>(null);
-    const [readyFav, setReadyFav] = React.useState(false);
-
-    const dragenterFavHC = () => {
-        console.log("c")
-        setReadyFav(true)
-    }
-
-    const dragexitFavHC = () => {
-        setReadyFav(false)
-    }
-
-    React.useEffect(() => {
-
-        // if (dropZoneFav.current) {
-            dropZoneFav.current.addEventListener("dragenter", dragenterFavHC)
-            dropZoneFav.current.addEventListener("dragexit", dragexitFavHC)
-            console.log(dropZoneFav.current)
-        // }
-        // return () => {dropZoneFav.current.removeEventListener("dragenter", dragenterFavHC)
-        //     dropZoneFav.current.removeEventListener("dragexit", dragenterFavHC)
-        // }
-    },)
-
-    //изображение для мобильной версии
-    const mobileImgHC = (imgInp:any) => {
-        const [file] = imgInp.files
-        setMobileImg(URL.createObjectURL(file))
-    }
-    const [mobileImg, setMobileImg] = React.useState("");
-
-    const dropZoneMobile = React.useRef<any>(null);
-    const [readyMobile, setReadyMobile] = React.useState(false);
-
-    const dragenterMobileHC = () => {
-        console.log("d")
-        setReadyMobile(true)
-    }
-
-    const dragexitMobileHC = () => {
-        setReadyMobile(false)
-    }
-
-    React.useEffect(() => {
-
-        // if (dropZoneMobile.current) {
-            dropZoneMobile.current.addEventListener("dragenter", dragenterMobileHC)
-            dropZoneMobile.current.addEventListener("dragexit", dragexitMobileHC)
-            console.log(dropZoneMobile.current)
-        // }
-        // return () => {dropZoneMobile.current.removeEventListener("dragenter", dragenterMobileHC)
-        //     dropZoneMobile.current.removeEventListener("dragexit", dragexitMobileHC)
-        // }
-    },)
 
     // для видео
     const videoHC = (videoInp:any) => {
@@ -246,7 +103,6 @@ export default function StartPageSettings() {
 
     return (
         <>
-        <DropZone/>
             <Typography variant="h5" sx={{marginTop: "60px"}}>Стартовая страница</Typography>
             <Box sx={{
                 backgroundColor: "white",
@@ -375,47 +231,9 @@ export default function StartPageSettings() {
                             display: backgroundType === "image" ? "flex" : "none",
                             flexDirection: "column"
                         }}>
-                            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Изображение</Typography>
+                            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
-                            <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
+                                Изображение</Typography>
-                                <input onChange={event => imgHC(event.target)} hidden accept="image/*" multiple type="file" />
+                            <DropZone text={"5 MB максимум"} heightImg={"110px"}/>
-                                {/*<UploadBox icon={<UploadIcon />} text="5 MB максимум" ref={dropZone} />*/}
-                                <Box
-                                    ref={dropZone}
-                                    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: img ? "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>
-                                    {img ?
-                                        <img height="110" src={img}
-                                             style={{
-                                                 position: "absolute", zIndex: "-1",
-                                            objectFit: "revert-layer",
-                                        }}/>
-                                        :
-                                        null
-                                    }
-                                </Box>
-                            </ButtonBase>
                             <ModalSizeImage/>
 
                             <Box sx={{
@@ -483,46 +301,9 @@ export default function StartPageSettings() {
                                     SPageClone.startpage.background.cycle = e.target.checked
                                     updateQuizesList(params, {config: SPageClone })}}
                             />
-                            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Изображение для мобильной версии</Typography>
+                            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>
-                            <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
+                                Изображение для мобильной версии</Typography>
-                                <input onChange={event => mobileImgHC(event.target)} hidden accept="image/*" multiple type="file" />
+                            <DropZone text={"5 MB максимум"} heightImg={"110px"}/>
-                                <Box
-                                    ref={dropZoneMobile}
-                                    sx={{
-                                        width: "100%",
-                                        height: "120px",
-                                        position: "relative",
-                                        display: "flex",
-                                        justifyContent: "center",
-                                        alignItems: "center",
-                                        backgroundColor: theme.palette.background.default,
-                                        border: `1px solid ${readyMobile? "red" : theme.palette.grey2.main}`,
-                                        borderRadius: "8px",
-                                        opacity: mobileImg ? "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>
-                                    {mobileImg ?
-                                        <img height="110" src={mobileImg}
-                                             style={{
-                                                 position: "absolute", zIndex: "-1",
-                                                 objectFit: "revert-layer",
-                                             }}/>
-                                        :
-                                        null
-                                    }
-                                </Box>
-                            </ButtonBase>
                         </Box>
 
                     <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Расположение элементов</Typography>
@@ -542,45 +323,7 @@ export default function StartPageSettings() {
                         >
                             <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, margin: "20px 0" }}>
                                 Логотип</Typography>
-                            <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
+                            <DropZone text={"5 MB максимум"} heightImg={"110px"}/>
-                                <input onChange={event => logoHC(event.target) } hidden accept="image/*" multiple type="file" />
-                                <Box
-                                    ref={dropZoneLogo}
-                                    sx={{
-                                        width: "100%",
-                                        height: "120px",
-                                        position: "relative",
-                                        display: "flex",
-                                        justifyContent: "center",
-                                        alignItems: "center",
-                                        backgroundColor: theme.palette.background.default,
-                                        border: `1px solid ${readyLogo? "red" : theme.palette.grey2.main}`,
-                                        borderRadius: "8px",
-                                        opacity: logo ? "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>
-                                    {logo ?
-                                        <img height="110" src={logo}
-                                             style={{
-                                                 position: "absolute", zIndex: "-1",
-                                                 objectFit: "revert-layer",
-                                             }}/>
-                                        :
-                                        null
-                                    }
-                                </Box>
-                            </ButtonBase>
                         </Box>
 
                     <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
@@ -590,36 +333,7 @@ export default function StartPageSettings() {
                         alignItems: "end",
                         gap: "10px",
                     }}>
-                        <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
+                        <DropZone sx={{height: "48px", width: "48px"}} heightImg={"48px"} widthImg={"48px"}/>
-                            <input onChange={event => favHC(event.target)} hidden accept="image/*" multiple type="file" />
-                            <Box
-                                ref={dropZoneFav}
-                                sx={{
-                                    height: "48px",
-                                    width: "48px",
-                                    position: "relative",
-                                    display: "flex",
-                                    justifyContent: "center",
-                                    alignItems: "center",
-                                    backgroundColor: theme.palette.background.default,
-                                    border: `1px solid ${readyFav? "red" : theme.palette.grey2.main}`,
-                                    borderRadius: "8px",
-                                    opacity: fav ? "0.5" : 1
-                                }}
-
-                            >
-                                <UploadIcon />
-                                {fav ?
-                                    <img height="48px" width="48px" src={fav}
-                                         style={{
-                                             position: "absolute", zIndex: "-1",
-                                             objectFit: "revert-layer",
-                                         }}/>
-                                    :
-                                    null
-                                }
-                            </Box>
-                        </ButtonBase>
                         <Typography sx={{
                             color: theme.palette.orange.main,
                             fontSize: "16px",

src/pages/startPage/dropZone.tsx

@@ -1,11 +1,26 @@
 import { useState } from "react";
-import { Box, ButtonBase, useTheme,Typography } from "@mui/material";
+import {Box, ButtonBase, useTheme, Typography, SxProps, Theme} from "@mui/material";
 import UploadIcon from "../../assets/icons/UploadIcon";
+import { SnackbarProvider, enqueueSnackbar } from 'notistack';
+
+interface Props {
+    text?: string;
+    sx?: SxProps<Theme>;
+    heightImg: string;
+    widthImg?: string
+}
 
 //Научи функцию принимать данные для валидации
-export default () => {
+export default ({text, sx, heightImg, widthImg}: Props) => {
     const theme = useTheme();
 
+    const imgHC = (imgInp:any) => {
+        const [file] = imgInp.files
+        if (file.size < 5242880) {
+            setData(URL.createObjectURL(file))
+        } else {enqueueSnackbar('Размер картинки слишком велик')}
+    }
+
     const [data, setData] = useState("")
     const [ready, setReady] = useState(false);
 
@@ -26,7 +41,10 @@ export default () => {
 
         const file = event.dataTransfer.files[0]
         console.log(event.dataTransfer.files[0])
-        setData(URL.createObjectURL(file))
+        if (file.size < 5242880) {
+            setData(URL.createObjectURL(file))
+        } else {enqueueSnackbar('Размер картинки слишком велик')}
+
     }
 
     const dragOverHC = (event: any) => {
@@ -36,7 +54,7 @@ export default () => {
 
     return (
         <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
-            <input hidden accept="image/*" multiple type="file" />
+            <input onChange={event => imgHC(event.target)} hidden accept="image/*" multiple type="file" />
             <Box
 
                 onDragEnter={dragenterHC}
@@ -45,7 +63,7 @@ export default () => {
                 onDragOver={dragOverHC}
 
                 sx={{
-                    width: "120px",
+                    width: "100%",
                     height: "120px",
                     position: "relative",
                     display: "flex",
@@ -54,7 +72,8 @@ export default () => {
                     backgroundColor: theme.palette.background.default,
                     border: `1px solid ${ready? "red" : theme.palette.grey2.main}`,
                     borderRadius: "8px",
-                    opacity: data ? "0.5" : 1
+                    opacity: data ? "0.5" : 1,
+                    ...sx
                 }}
 
             >
@@ -67,9 +86,10 @@ export default () => {
                     fontSize: "16px",
                     lineHeight: "19px",
                     textDecoration: "underline",
-                }}>5 MB максимум</Typography>
+                }}>{text}</Typography>
+                <SnackbarProvider style={{backgroundColor: theme.palette.brightPurple.main}}/>
                 {data ?
-                    <img height="110" src={data}
+                    <img height={heightImg} width={widthImg} src={data}
                             style={{
                                 position: "absolute", zIndex: "-1",
                         objectFit: "revert-layer",

yarn.lock

@@ -3396,7 +3396,7 @@
     "kind-of" "^6.0.2"
     "shallow-clone" "^3.0.0"
 
-"clsx@^1.2.1":
+"clsx@^1.1.0", "clsx@^1.2.1":
   "integrity" "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
   "resolved" "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
   "version" "1.2.1"
@@ -3832,7 +3832,7 @@
   dependencies:
     "cssom" "~0.3.6"
 
-"csstype@^3.0.2", "csstype@^3.1.1":
+"csstype@^3.0.10", "csstype@^3.0.2", "csstype@^3.1.1":
   "integrity" "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
   "resolved" "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz"
   "version" "3.1.1"
@@ -5073,6 +5073,11 @@
     "merge2" "^1.4.1"
     "slash" "^3.0.0"
 
+"goober@^2.0.33":
+  "integrity" "sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ=="
+  "resolved" "https://registry.npmjs.org/goober/-/goober-2.1.13.tgz"
+  "version" "2.1.13"
+
 "gopd@^1.0.1":
   "integrity" "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA=="
   "resolved" "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz"
@@ -6705,6 +6710,14 @@
   "resolved" "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz"
   "version" "6.1.0"
 
+"notistack@^3.0.1":
+  "integrity" "sha512-ntVZXXgSQH5WYfyU+3HfcXuKaapzAJ8fBLQ/G618rn3yvSzEbnOB8ZSOwhX+dAORy/lw+GC2N061JA0+gYWTVA=="
+  "resolved" "https://registry.npmjs.org/notistack/-/notistack-3.0.1.tgz"
+  "version" "3.0.1"
+  dependencies:
+    "clsx" "^1.1.0"
+    "goober" "^2.0.33"
+
 "npm-run-path@^4.0.1":
   "integrity" "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw=="
   "resolved" "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz"
@@ -7794,7 +7807,7 @@
     "strip-ansi" "^6.0.1"
     "text-table" "^0.2.0"
 
-"react-dom@^17.0.0 || ^18.0.0", "react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>=16.6.0", "react-dom@>=16.8":
+"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0", "react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>=16.6.0", "react-dom@>=16.8":
   "integrity" "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   "version" "18.2.0"