загрузка изображений и видео в модалках стр вопросов

src/components/CreateQuiz/SelectableButton.tsx

@@ -5,21 +5,20 @@ import CustomButton from "../CustomButton";
 interface Props {
     children?: React.ReactNode;
     isSelected?: boolean;
-    isSelectedModal?: boolean;
     onClick: () => void;
 }
 
-export default function SelectableButton({ children, isSelected = false, isSelectedModal = false, onClick }: Props) {
+export default function SelectableButton({ children, isSelected = false, onClick }: Props) {
     const theme = useTheme();
 
     return (
         <CustomButton
             onClick={onClick}
             sx={{
-                backgroundColor: isSelected || isSelectedModal ? theme.palette.brightPurple.main : theme.palette.background.default,
+                backgroundColor: isSelected ? theme.palette.brightPurple.main : theme.palette.background.default,
-                border: isSelected || isSelectedModal ? "none" : `1px solid ${theme.palette.grey2.main}`,
+                border: isSelected ? "none" : `1px solid ${theme.palette.grey2.main}`,
-                color: isSelected || isSelectedModal ? "white" : theme.palette.grey2.main,
+                color: isSelected ? "white" : theme.palette.grey2.main,
-                py: isSelected || isSelectedModal ? "12px" : "11px",
+                py: isSelected ? "12px" : "11px",
                 width: "auto",
                 flex: "1 1 auto",
                 "&:hover": {

src/pages/Questions/answerOptions/UploadImage.tsx

@@ -9,11 +9,23 @@ export default function UploadImage () {
     const [open, setOpen] = React.useState(false);
     const handleOpen = () => setOpen(true);
     const handleClose = () => setOpen(false);
+
+    const imgHC = (imgInp:any) => {
+        const [file] = imgInp.files
+        setImg(URL.createObjectURL(file))
+        handleClose()
+    }
+    const [img, setImg] = React.useState("");
+
     return (
         <Box sx={{padding: '20px'}}>
             <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Загрузить изображение</Typography>
             <ButtonBase onClick={handleOpen} sx={{width: "100%", maxWidth: "260px"}}>
-                <UploadBox sx ={{maxWidth: "260px"}} icon={<UploadIcon />} text="5 MB максимум" />
+                {img ?
+                    <img  width="400" src={img}/>
+                    :
+                    <UploadBox sx ={{maxWidth: "260px"}} icon={<UploadIcon />} text="5 MB максимум" />
+                }
             </ButtonBase>
             <Modal
                 open={open}
@@ -42,7 +54,7 @@ export default function UploadImage () {
                     >
                         <Typography>Добавьте изображение</Typography>
                         <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
                                 sx={{
                                     width: '580px',

src/pages/Questions/answerOptions/helpAnswerOptions.tsx

@@ -18,6 +18,13 @@ export default function HelpAnswerOptions() {
     const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
     const [backgroundTypeModal, setBackgroundTypeModal] = useState<BackgroundTypeModal>("linkVideo");
     const theme = useTheme()
+
+    const videoHC = (videoInp:any) => {
+        const [file] = videoInp.files
+        setVideo(URL.createObjectURL(file))
+        handleClose()
+    }
+    const [video, setVideo] = React.useState("");
     return (
         <Box sx={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px'}}>
             <Typography>Подсказка консультанта</Typography>
@@ -40,14 +47,19 @@ export default function HelpAnswerOptions() {
                 <Box>
                     <Typography sx={{paddingBottom: '15px'}}>Загрузите видео</Typography>
                     <ButtonBase onClick={handleOpen} sx={{justifyContent: 'flex-start'}} >
+                        {video ?
+                            <video src={video} width="400" controls/>
+                                :
+                            <>
                         <UploadBox
                             icon={<UploadIcon />}
-
                             sx={{
                                 height: "48px",
                                 width: "48px",
                             }}
                         />
+                            </>
+                        }
                     </ButtonBase>
                     <Modal
                         open={open}
@@ -85,10 +97,10 @@ export default function HelpAnswerOptions() {
                                 >Готово</CustomButton>
                             </Box>
                             <Box sx={{padding: '20px', gap: '10px', display: 'flex'}}>
-                                <SelectableButton isSelectedModal={backgroundTypeModal === "linkVideo"} onClick={() => setBackgroundTypeModal("linkVideo")}>
+                                <SelectableButton isSelected={backgroundTypeModal === "linkVideo"} onClick={() => setBackgroundTypeModal("linkVideo")}>
                                     Ссылка на видео
                                 </SelectableButton>
-                                <SelectableButton isSelectedModal={backgroundTypeModal === "ownVideo"} onClick={() => setBackgroundTypeModal("ownVideo")}>
+                                <SelectableButton isSelected={backgroundTypeModal === "ownVideo"} onClick={() => setBackgroundTypeModal("ownVideo")}>
                                     Загрузить свое
                                 </SelectableButton>
                             </Box>
@@ -101,7 +113,7 @@ export default function HelpAnswerOptions() {
                                 <Box sx={{padding: '20px'}}>
                                     <Typography sx={{paddingBottom: '15px'}}>Загрузите видео</Typography>
                                     <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
-                                        <input hidden accept="video/*" multiple type="file" />
+                                        <input onChange={event => videoHC(event.target) } hidden accept="video/*" multiple type="file" />
                                         <Box
                                             sx={{
                                                 width: '580px',