123 lines
3.6 KiB
TypeScript
123 lines
3.6 KiB
TypeScript
import { Box, ButtonBase, Typography, useTheme } from "@mui/material";
|
|
import { useMemo, useState } from "react";
|
|
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
|
import { useTranslation } from "react-i18next";
|
|
import { enqueueSnackbar } from "notistack";
|
|
import { ACCEPT_SEND_FILE_TYPES_MAP } from "@/components/ViewPublicationPage/tools/fileUpload";
|
|
import UploadIcon from "@icons/UploadIcon";
|
|
import { uploadFile } from "@/utils/fileUpload";
|
|
import { useQuizStore } from "@/stores/useQuizStore";
|
|
|
|
interface ImageCardProps {
|
|
questionId: string;
|
|
imageUrl: string;
|
|
isOwn?: boolean;
|
|
onImageUpload?: (fileUrl: string) => void;
|
|
}
|
|
|
|
const useFileUpload = (questionId: string, onImageUpload?: (fileUrl: string) => void) => {
|
|
const { t } = useTranslation();
|
|
const [isSending, setIsSending] = useState(false);
|
|
const [currentImageUrl, setCurrentImageUrl] = useState<string | null>(null);
|
|
const { quizId, preview } = useQuizStore();
|
|
|
|
const handleFileUpload = async (file: File | undefined) => {
|
|
if (isSending || !file) return;
|
|
|
|
const result = await uploadFile({
|
|
file,
|
|
questionId,
|
|
quizId,
|
|
fileType: "picture",
|
|
preview,
|
|
onSuccess: (fileUrl) => {
|
|
setCurrentImageUrl(URL.createObjectURL(file));
|
|
onImageUpload?.(fileUrl);
|
|
},
|
|
onError: (error) => {
|
|
console.error(error);
|
|
enqueueSnackbar(t(error.message));
|
|
},
|
|
onProgress: () => {
|
|
setIsSending(true);
|
|
},
|
|
});
|
|
|
|
setIsSending(false);
|
|
};
|
|
|
|
return {
|
|
isSending,
|
|
currentImageUrl,
|
|
handleFileUpload,
|
|
};
|
|
};
|
|
|
|
export const ImageCard = ({ questionId, imageUrl, isOwn, onImageUpload }: ImageCardProps) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
const isMobile = useRootContainerSize() < 450;
|
|
const isTablet = useRootContainerSize() < 850;
|
|
const [isDropzoneHighlighted, setIsDropzoneHighlighted] = useState(false);
|
|
const { currentImageUrl, handleFileUpload } = useFileUpload(questionId, onImageUpload);
|
|
|
|
const onDrop = (event: React.DragEvent<HTMLLabelElement>) => {
|
|
event.preventDefault();
|
|
setIsDropzoneHighlighted(false);
|
|
|
|
const file = event.dataTransfer.files[0];
|
|
handleFileUpload(file);
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ width: "100%", height: "300px", position: "relative" }}>
|
|
<img
|
|
src={currentImageUrl || imageUrl}
|
|
style={{
|
|
display: "block",
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "cover",
|
|
borderRadius: "12px 12px 0 0",
|
|
}}
|
|
alt=""
|
|
/>
|
|
{isOwn && (
|
|
<Box
|
|
component="label"
|
|
sx={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
width: "100%",
|
|
height: "100%",
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
opacity: isDropzoneHighlighted ? 1 : 0,
|
|
transition: "opacity 0.2s",
|
|
"&:hover": {
|
|
opacity: 1,
|
|
},
|
|
borderRadius: "12px 12px 0 0",
|
|
cursor: "pointer",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
onDragEnter={() => setIsDropzoneHighlighted(true)}
|
|
onDragLeave={() => setIsDropzoneHighlighted(false)}
|
|
onDragOver={(event) => event.preventDefault()}
|
|
onDrop={onDrop}
|
|
>
|
|
<input
|
|
onChange={({ target }) => handleFileUpload(target.files?.[0])}
|
|
hidden
|
|
accept={ACCEPT_SEND_FILE_TYPES_MAP.picture.join(",")}
|
|
type="file"
|
|
/>
|
|
<UploadIcon color="#FFFFFF" />
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|