добавлен визуал загрузки картинки для images

lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx

@@ -1,4 +1,3 @@
-import { CheckboxIcon } from "@/assets/icons/Checkbox";
 import type { QuestionVariant, QuestionVariantWithEditedImages } from "@/model/questionTypes/shared";
 import { Box, Checkbox, FormControlLabel, Input, Radio, TextareaAutosize, Typography, useTheme } from "@mui/material";
 import { useQuizViewStore } from "@stores/quizView";
@@ -9,6 +8,7 @@ import { useMemo, type MouseEvent, useRef, useEffect } from "react";
 import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
 import { useQuizStore } from "@/stores/useQuizStore";
 import { useTranslation } from "react-i18next";
+import { OwnImage } from "./OwnImage";
 
 type ImagesProps = {
   questionId: string;
@@ -27,7 +27,7 @@ interface OwnInputProps {
   largeCheck: boolean;
   ownPlaceholder: string;
 }
-const OwnInput = ({ questionId, variant, largeCheck, ownPlaceholder }: OwnInputProps) => {
+const OwnInput = ({ variant, largeCheck, ownPlaceholder }: OwnInputProps) => {
   const theme = useTheme();
   const ownVariants = useQuizViewStore((state) => state.ownVariants);
   const { updateOwnVariant } = useQuizViewStore((state) => state);
@@ -97,12 +97,10 @@ export const ImageVariant = ({
   const { deleteAnswer, updateAnswer } = useQuizViewStore((state) => state);
   const theme = useTheme();
   const { t } = useTranslation();
-  const answers = useQuizViewStore((state) => state.answers);
   const isMobile = useRootContainerSize() < 450;
   const isTablet = useRootContainerSize() < 850;
 
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const containerCanvasRef = useRef<HTMLDivElement | null>(null);
 
   const onVariantClick = async (event: MouseEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -172,29 +170,21 @@ export const ImageVariant = ({
     >
       <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
         <Box sx={{ width: "100%", height: "300px" }}>
-          {variant.extendedText && (
+          {own ? (
-            <canvas
+            <OwnImage imageUrl={choiceImgUrl} />
-              ref={canvasRef}
+          ) : (
-              style={{
+            variant.extendedText && (
-                display: "block",
+              <canvas
-                width: "100%",
+                ref={canvasRef}
-                height: "100%",
+                style={{
-                objectFit: "cover",
+                  display: "block",
-                borderRadius: "12px 12px 0 0",
+                  width: "100%",
-              }}
+                  height: "100%",
-            />
+                  objectFit: "cover",
-
+                  borderRadius: "12px 12px 0 0",
-            // <img
+                }}
-            //   src={choiceImgUrl}
+              />
-            //   alt=""
+            )
-            //   style={{
-            //     display: "block",
-            //     width: "100%",
-            //     height: "100%",
-            //     objectFit: "cover",
-            //     borderRadius: "12px 12px 0 0",
-            //   }}
-            // />
           )}
         </Box>
       </Box>

lib/components/ViewPublicationPage/questions/Images/OwnImage.tsx

@@ -0,0 +1,164 @@
+import { Box, ButtonBase, IconButton, Typography, useTheme } from "@mui/material";
+import { useState, useRef, useEffect } from "react";
+import CloseIcon from "@mui/icons-material/Close";
+
+type OwnImageProps = {
+  imageUrl?: string;
+};
+
+export const OwnImage = ({ imageUrl }: OwnImageProps) => {
+  const theme = useTheme();
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [isDropzoneHighlighted, setIsDropzoneHighlighted] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Sync state if external imageUrl changes
+  useEffect(() => {
+    if (imageUrl) {
+      setSelectedFile(null); // Clear local file selection when external URL is provided
+    }
+  }, [imageUrl]);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file && file.type.startsWith("image/")) {
+      setSelectedFile(file);
+    }
+  };
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDropzoneHighlighted(false);
+    const file = event.dataTransfer.files?.[0];
+    if (file && file.type.startsWith("image/")) {
+      setSelectedFile(file);
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDropzoneHighlighted(true);
+  };
+
+  const handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDropzoneHighlighted(false);
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    fileInputRef.current?.click();
+  };
+
+  const handleRemoveImage = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSelectedFile(null);
+  };
+
+  const imageToDisplay = selectedFile ? URL.createObjectURL(selectedFile) : imageUrl;
+
+  return (
+    <ButtonBase
+      component="div"
+      onClick={handleClick}
+      onDrop={handleDrop}
+      onDragOver={handleDragOver}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      sx={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "12px",
+        transition: "border-color 0.3s, background-color 0.3s",
+        overflow: "hidden",
+        position: "relative",
+        "&:hover .overlay": {
+          opacity: 1,
+        },
+      }}
+    >
+      <input
+        type="file"
+        ref={fileInputRef}
+        onChange={handleFileChange}
+        accept="image/*"
+        hidden
+      />
+      {imageToDisplay ? (
+        <>
+          <Box sx={{ width: "100%", height: "100%", position: "relative" }}>
+            <img
+              src={imageToDisplay}
+              alt="Preview"
+              style={{ width: "100%", height: "100%", objectFit: "cover" }}
+            />
+          </Box>
+          <Box
+            className="overlay"
+            sx={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              backgroundColor: "rgba(0, 0, 0, 0.4)",
+              opacity: 0,
+              transition: "opacity 0.3s",
+              pointerEvents: "none",
+            }}
+          />
+          {selectedFile && (
+            <IconButton
+              onClick={handleRemoveImage}
+              sx={{
+                position: "absolute",
+                top: 8,
+                right: 8,
+                zIndex: 1,
+                backgroundColor: "rgba(0, 0, 0, 0.5)",
+                color: "white",
+                "&:hover": {
+                  backgroundColor: "rgba(0, 0, 0, 0.7)",
+                },
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          )}
+        </>
+      ) : (
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            opacity: 0.5,
+          }}
+        >
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{ p: 2, textAlign: "center" }}
+          >
+            добавьте свою картинку
+          </Typography>
+        </Box>
+      )}
+    </ButtonBase>
+  );
+};