frontPanel/src/pages/Questions/UploadImage/index.tsx

94 lines
3.3 KiB
TypeScript
Raw Normal View History

2023-11-29 13:49:52 +00:00
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { Box, ButtonBase, Typography, useTheme } from "@mui/material";
2023-12-01 18:05:59 +00:00
import { uploadQuestionImage } from "@root/questions/actions";
2023-09-13 14:14:27 +00:00
import { CropModal } from "@ui_kit/Modal/CropModal";
import UploadBox from "@ui_kit/UploadBox";
import { type DragEvent } from "react";
import UploadIcon from "../../../assets/icons/UploadIcon";
2023-09-05 13:54:41 +00:00
import { UploadImageModal } from "./UploadImageModal";
2023-12-02 09:35:35 +00:00
import { setCropModal } from "@root/cropModal";
2023-12-01 18:05:59 +00:00
import { useCurrentQuiz } from "@root/quizes/hooks";
2023-12-02 09:35:35 +00:00
import { useDisclosure } from "../../../utils/useDisclosure";
2023-09-05 13:54:41 +00:00
type UploadImageProps = {
2023-11-29 13:49:52 +00:00
question: AnyTypedQuizQuestion;
2023-09-05 13:54:41 +00:00
};
2023-11-15 18:38:02 +00:00
export default function UploadImage({ question }: UploadImageProps) {
const theme = useTheme();
2023-12-01 18:05:59 +00:00
const quizQid = useCurrentQuiz()?.qid;
2023-12-02 09:35:35 +00:00
const [isCropModalOpen, openCropModal, closeCropModal] = useDisclosure();
const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();
2023-09-05 13:54:41 +00:00
2023-12-01 18:05:59 +00:00
const handleImageUpload = async (files: FileList | null) => {
if (!files?.length) return;
2023-09-05 13:54:41 +00:00
2023-12-01 18:05:59 +00:00
const url = await uploadQuestionImage(question.id, quizQid, files[0], (question, url) => {
question.content.back = url;
question.content.originalBack = url;
});
closeImageUploadModal();
2023-12-02 09:35:35 +00:00
setCropModal(files[0], url);
openCropModal();
};
2023-09-05 13:54:41 +00:00
const handleDrop = (event: DragEvent<HTMLDivElement>) => {
event.preventDefault();
event.stopPropagation();
handleImageUpload(event.dataTransfer.files);
};
2023-12-01 18:05:59 +00:00
function handleCropModalSaveClick(imageBlob: Blob) {
uploadQuestionImage(question.id, quizQid, imageBlob, (question, url) => {
question.content.back = url;
});
}
2023-09-05 13:54:41 +00:00
return (
<Box sx={{ padding: "20px" }}>
<Typography
sx={{
fontWeight: 500,
color: theme.palette.grey3.main,
mt: "11px",
mb: "14px",
}}
>
Загрузить изображение
</Typography>
<ButtonBase
onClick={openImageUploadModal}
sx={{
width: "100%",
maxWidth: "260px",
height: "120px",
}}
>
{question.content.back ?
<img
src={question.content.back}
alt="question background"
style={{
width: "100%",
height: "100%",
objectFit: "scale-down",
display: "block",
}}
/>
:
<UploadBox
handleDrop={handleDrop}
sx={{ maxWidth: "260px" }}
icon={<UploadIcon />}
text="5 MB максимум"
/>
}
</ButtonBase>
2023-12-02 09:35:35 +00:00
<UploadImageModal isOpen={isImageUploadOpen} onClose={closeImageUploadModal} imgHC={handleImageUpload} />
<CropModal isOpen={isCropModalOpen} onClose={closeCropModal} onSaveImageClick={handleCropModalSaveClick} />
</Box>
);
2023-09-05 13:54:41 +00:00
}