add image dropzone delete button

src/pages/startPage/StartPageSettings.tsx

@@ -22,7 +22,7 @@ import {
     useMediaQuery,
     useTheme,
 } from "@mui/material";
-import { incrementCurrentStep, updateQuiz } from "@root/quizes/actions";
+import { incrementCurrentStep, updateQuiz, uploadQuizImage } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import CustomTextField from "@ui_kit/CustomTextField";
@@ -307,8 +307,15 @@ export default function StartPageSettings() {
                                     heightImg={"110px"}
                                     sx={{ maxWidth: "300px" }}
                                     imageUrl={quiz.config.startpage.background.desktop}
-                                    onImageUpload={(quiz, url) => {
+                                    onFileChange={file => {
+                                        uploadQuizImage(quiz.id, file, (quiz, url) => {
                                             quiz.config.startpage.background.desktop = url;
+                                        });
+                                    }}
+                                    onDeleteClick={() => {
+                                        updateQuiz(quiz.id, quiz => {
+                                            quiz.config.startpage.background.desktop = null;
+                                        });
                                     }}
                                 />
                             </Box>
@@ -361,8 +368,15 @@ export default function StartPageSettings() {
                                             text={"5 MB максимум"}
                                             heightImg={"110px"}
                                             imageUrl={quiz.config.startpage.background.mobile}
-                                            onImageUpload={(quiz, url) => {
+                                            onFileChange={file => {
+                                                uploadQuizImage(quiz.id, file, (quiz, url) => {
                                                     quiz.config.startpage.background.mobile = url;
+                                                });
+                                            }}
+                                            onDeleteClick={() => {
+                                                updateQuiz(quiz.id, quiz => {
+                                                    quiz.config.startpage.background.mobile = null;
+                                                });
                                             }}
                                         />
                                     </Box>
@@ -450,8 +464,15 @@ export default function StartPageSettings() {
                                 text={"5 MB максимум"}
                                 heightImg={"110px"}
                                 imageUrl={quiz.config.startpage.background.mobile}
-                                onImageUpload={(quiz, url) => {
+                                onFileChange={file => {
+                                    uploadQuizImage(quiz.id, file, (quiz, url) => {
                                         quiz.config.startpage.background.mobile = url;
+                                    });
+                                }}
+                                onDeleteClick={() => {
+                                    updateQuiz(quiz.id, quiz => {
+                                        quiz.config.startpage.background.mobile = null;
+                                    });
                                 }}
                             />
                         </Box>
@@ -518,8 +539,15 @@ export default function StartPageSettings() {
                                         heightImg={"110px"}
                                         sx={{ maxWidth: "300px" }}
                                         imageUrl={quiz.config.logo}
-                                        onImageUpload={(quiz, url) => {
+                                        onFileChange={file => {
+                                            uploadQuizImage(quiz.id, file, (quiz, url) => {
                                                 quiz.config.logo = url;
+                                            });
+                                        }}
+                                        onDeleteClick={() => {
+                                            updateQuiz(quiz.id, quiz => {
+                                                quiz.config.logo = null;
+                                            });
                                         }}
                                     />
                                 </Box>
@@ -592,8 +620,15 @@ export default function StartPageSettings() {
                                     heightImg={"110px"}
                                     sx={{ maxWidth: "300px" }}
                                     imageUrl={quiz.config.logo}
-                                    onImageUpload={(quiz, url) => {
+                                    onFileChange={file => {
+                                        uploadQuizImage(quiz.id, file, (quiz, url) => {
                                             quiz.config.logo = url;
+                                        });
+                                    }}
+                                    onDeleteClick={() => {
+                                        updateQuiz(quiz.id, quiz => {
+                                            quiz.config.logo = null;
+                                        });
                                     }}
                                 />
                             </Box>
@@ -704,7 +739,7 @@ export default function StartPageSettings() {
                                 })}
                             />
                             <CustomCheckbox
-                                sx={{margin: "10px 0"}}
+                                sx={{ margin: "10px 0" }}
                                 label="Кликабельный"
                                 checked={quiz.config.info.clickable}
                                 handleChange={e => updateQuiz(quiz.id, quiz => {

src/pages/startPage/dropZone.tsx

@@ -1,14 +1,14 @@
 import UploadIcon from "@icons/UploadIcon";
-import { Quiz } from "@model/quiz/quiz";
+import DeleteIcon from '@mui/icons-material/Delete';
 import {
     Box,
     ButtonBase,
+    IconButton,
     SxProps,
     Theme,
     Typography,
     useTheme,
 } from "@mui/material";
-import { uploadQuizImage } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { enqueueSnackbar } from "notistack";
 import { useState } from "react";
@@ -19,12 +19,13 @@ interface Props {
     sx?: SxProps<Theme>;
     heightImg: string;
     widthImg?: string;
-    onImageUpload: (quiz: Quiz, url: string) => void;
+    onFileChange?: (file: File) => void;
+    onDeleteClick?: () => void;
     imageUrl: string | null;
 }
 
 //Научи функцию принимать данные для валидации
-export const DropZone = ({ text, sx, heightImg, widthImg, onImageUpload, imageUrl }: Props) => {
+export const DropZone = ({ text, sx, heightImg, widthImg, onFileChange, onDeleteClick, imageUrl }: Props) => {
     const theme = useTheme();
     const quiz = useCurrentQuiz();
     const [ready, setReady] = useState(false);
@@ -39,7 +40,7 @@ export const DropZone = ({ text, sx, heightImg, widthImg, onImageUpload, imageUr
         if (!file) return;
         if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик");
 
-        uploadQuizImage(quiz.id, file, onImageUpload);
+        onFileChange?.(file);
     };
 
     const dragenterHC = () => {
@@ -57,14 +58,57 @@ export const DropZone = ({ text, sx, heightImg, widthImg, onImageUpload, imageUr
         const file = event.dataTransfer.files[0];
         if (file.size < 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик");
 
-        uploadQuizImage(quiz.id, file, onImageUpload);
+        onFileChange?.(file);
     };
 
     const dragOverHC = (event: React.DragEvent<HTMLDivElement>) => {
         event.preventDefault();
     };
 
-    return (
+    return imageUrl ? (
+        <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",
+                ...sx,
+            }}
+        >
+            <img
+                height={heightImg}
+                width={widthImg}
+                src={imageUrl}
+                style={{
+                    objectFit: "scale-down",
+                }}
+                alt="img"
+            />
+            <IconButton
+                onClick={onDeleteClick}
+                sx={{
+                    position: "absolute",
+                    right: 0,
+                    top: 0,
+                    color: theme.palette.orange.main,
+                    fontSize: "16px",
+                    lineHeight: "19px",
+                    cursor: "pointer",
+                }}
+            >
+                <DeleteIcon />
+            </IconButton>
+        </Box>
+    ) : (
         <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
             <input
                 onChange={(event) => imgHC(event.target)}
@@ -106,19 +150,6 @@ export const DropZone = ({ text, sx, heightImg, widthImg, onImageUpload, imageUr
                 >
                     {text}
                 </Typography>
-                {imageUrl && (
-                    <img
-                        height={heightImg}
-                        width={widthImg}
-                        src={imageUrl}
-                        style={{
-                            position: "absolute",
-                            zIndex: "-1",
-                            objectFit: "revert-layer",
-                        }}
-                        alt="img"
-                    />
-                )}
             </Box>
         </ButtonBase>
     );