chore: Restrict image uploads to JPG and PNG formats
Updated file input to accept only .jpg, .jpeg, and .png files in the UploadImageModal component.
This commit is contained in:
ArtChaos189
parent
f8c4d11728
commit
f0dafad472
@ -1,172 +1,155 @@
|
||||
import {
|
||||
Typography,
|
||||
Box,
|
||||
useTheme,
|
||||
ButtonBase,
|
||||
Modal,
|
||||
TextField,
|
||||
InputAdornment,
|
||||
} from "@mui/material";
|
||||
import { Typography, Box, useTheme, ButtonBase, Modal, TextField, InputAdornment } from "@mui/material";
|
||||
import UploadIcon from "../../../assets/icons/UploadIcon";
|
||||
import SearchIcon from "../../../assets/icons/SearchIcon";
|
||||
import UnsplashIcon from "../../../assets/icons/Unsplash.svg";
|
||||
import { useRef, useState, type DragEvent } from "react";
|
||||
|
||||
|
||||
interface ModalkaProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
handleImageChange: (file: File) => void;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
handleImageChange: (file: File) => void;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export const UploadImageModal: React.FC<ModalkaProps> = ({
|
||||
handleImageChange,
|
||||
isOpen,
|
||||
onClose,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const dropZone = useRef<HTMLDivElement>(null);
|
||||
const [ready, setReady] = useState(false);
|
||||
export const UploadImageModal: React.FC<ModalkaProps> = ({ handleImageChange, isOpen, onClose, description }) => {
|
||||
const theme = useTheme();
|
||||
const dropZone = useRef<HTMLDivElement>(null);
|
||||
const [ready, setReady] = useState(false);
|
||||
|
||||
const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
setReady(true);
|
||||
};
|
||||
const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
setReady(true);
|
||||
};
|
||||
|
||||
const handleDrop = (event: DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const handleDrop = (event: DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const file = event.dataTransfer.files[0];
|
||||
if (!file) return;
|
||||
const file = event.dataTransfer.files[0];
|
||||
if (!file) return;
|
||||
|
||||
handleImageChange(file);
|
||||
};
|
||||
handleImageChange(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={isOpen}
|
||||
onClose={onClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
return (
|
||||
<Modal
|
||||
open={isOpen}
|
||||
onClose={onClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
maxWidth: "690px",
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: "12px",
|
||||
boxShadow: 24,
|
||||
p: 0,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: "20px",
|
||||
background: theme.palette.background.default,
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ marginBottom: "20px", fontWeight: "bold", color: "#4D4D4D" }}>
|
||||
Добавьте изображение
|
||||
</Typography>
|
||||
<ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
|
||||
<input
|
||||
onChange={(event) => event.target.files?.[0] && handleImageChange(event.target.files[0])}
|
||||
hidden
|
||||
accept=".jpg, .jpeg, .png"
|
||||
multiple
|
||||
type="file"
|
||||
data-cy="upload-image-input"
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
maxWidth: "690px",
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: "12px",
|
||||
boxShadow: 24,
|
||||
p: 0,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
onDragOver={(event: DragEvent<HTMLDivElement>) => event.preventDefault()}
|
||||
onDrop={handleDrop}
|
||||
ref={dropZone}
|
||||
sx={{
|
||||
width: "580px",
|
||||
padding: "33px 10px 33px 55px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
|
||||
borderRadius: "8px",
|
||||
gap: "55px",
|
||||
}}
|
||||
onDragEnter={handleDragEnter} // Применяем обработчик onDragEnter напрямую
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: "20px",
|
||||
background: theme.palette.background.default,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{ marginBottom: "20px", fontWeight: "bold", color: "#4D4D4D" }}
|
||||
>
|
||||
Добавьте изображение
|
||||
</Typography>
|
||||
<ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
|
||||
<input
|
||||
onChange={(event) => event.target.files?.[0] && handleImageChange(event.target.files[0])}
|
||||
hidden
|
||||
accept="image/*"
|
||||
multiple
|
||||
type="file"
|
||||
data-cy="upload-image-input"
|
||||
/>
|
||||
<Box
|
||||
onDragOver={(event: DragEvent<HTMLDivElement>) =>
|
||||
event.preventDefault()
|
||||
}
|
||||
onDrop={handleDrop}
|
||||
ref={dropZone}
|
||||
sx={{
|
||||
width: "580px",
|
||||
padding: "33px 10px 33px 55px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
|
||||
borderRadius: "8px",
|
||||
gap: "55px",
|
||||
}}
|
||||
onDragEnter={handleDragEnter} // Применяем обработчик onDragEnter напрямую
|
||||
>
|
||||
<UploadIcon />
|
||||
<Box>
|
||||
<Typography sx={{ color: "#9A9AAF", fontWeight: "bold" }}>
|
||||
Загрузите или перетяните сюда файл
|
||||
</Typography>
|
||||
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
|
||||
Принимает JPG, PNG, и GIF формат — максимум 5mb
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</ButtonBase>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
margin: "20px 0",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
color: "#4D4D4D",
|
||||
}}
|
||||
>
|
||||
Или выберите на фотостоке
|
||||
</Typography>
|
||||
<img src={UnsplashIcon} alt="" />
|
||||
</Box>
|
||||
<TextField
|
||||
id="search-in-unsplash"
|
||||
placeholder="Ищите изображения на английском языка"
|
||||
sx={{
|
||||
"& .MuiInputBase-input": {
|
||||
height: "48px",
|
||||
padding: "0 10px 0 0",
|
||||
},
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
borderRadius: "8px",
|
||||
},
|
||||
"& .Mui-focused .MuiOutlinedInput-notchedOutline": {
|
||||
border: "1px solid rgba(0, 0, 0, 0.23)",
|
||||
},
|
||||
"& .MuiInputBase-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline":
|
||||
{
|
||||
borderColor: "rgba(0, 0, 0, 0.23)",
|
||||
},
|
||||
}}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment
|
||||
position="start"
|
||||
sx={{
|
||||
outline: "none",
|
||||
"& svg > path": { stroke: "#9A9AAF" },
|
||||
}}
|
||||
>
|
||||
<SearchIcon />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<UploadIcon />
|
||||
<Box>
|
||||
<Typography sx={{ color: "#9A9AAF", fontWeight: "bold" }}>
|
||||
Загрузите или перетяните сюда файл
|
||||
</Typography>
|
||||
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
|
||||
{description || "Принимает JPG, PNG, и GIF формат — максимум 5mb"}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
</ButtonBase>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
margin: "20px 0",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
color: "#4D4D4D",
|
||||
}}
|
||||
>
|
||||
Или выберите на фотостоке
|
||||
</Typography>
|
||||
<img src={UnsplashIcon} alt="" />
|
||||
</Box>
|
||||
<TextField
|
||||
id="search-in-unsplash"
|
||||
placeholder="Ищите изображения на английском языка"
|
||||
sx={{
|
||||
"& .MuiInputBase-input": {
|
||||
height: "48px",
|
||||
padding: "0 10px 0 0",
|
||||
},
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
borderRadius: "8px",
|
||||
},
|
||||
"& .Mui-focused .MuiOutlinedInput-notchedOutline": {
|
||||
border: "1px solid rgba(0, 0, 0, 0.23)",
|
||||
},
|
||||
"& .MuiInputBase-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
|
||||
borderColor: "rgba(0, 0, 0, 0.23)",
|
||||
},
|
||||
}}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment
|
||||
position="start"
|
||||
sx={{
|
||||
outline: "none",
|
||||
"& svg > path": { stroke: "#9A9AAF" },
|
||||
}}
|
||||
>
|
||||
<SearchIcon />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@ -6,120 +6,125 @@ import { useState } from "react";
|
||||
import { UploadImageModal } from "../../pages/Questions/UploadImage/UploadImageModal";
|
||||
import { useDisclosure } from "../../utils/useDisclosure";
|
||||
|
||||
|
||||
const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
|
||||
|
||||
interface Props {
|
||||
imageUrl: string | null;
|
||||
onImageUploadClick: (image: Blob) => void;
|
||||
onDeleteClick: () => void;
|
||||
imageUrl: string | null;
|
||||
onImageUploadClick: (image: Blob) => void;
|
||||
onDeleteClick: () => void;
|
||||
}
|
||||
|
||||
export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDeleteClick }: Props) {
|
||||
const theme = useTheme();
|
||||
const quiz = useCurrentQuiz();
|
||||
const [isDropReady, setIsDropReady] = useState<boolean>(false);
|
||||
const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();
|
||||
const theme = useTheme();
|
||||
const quiz = useCurrentQuiz();
|
||||
const [isDropReady, setIsDropReady] = useState<boolean>(false);
|
||||
const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();
|
||||
|
||||
if (!quiz) return null;
|
||||
if (!quiz) return null;
|
||||
|
||||
async function handleImageUpload(file: File) {
|
||||
if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик");
|
||||
if (!allowedFileTypes.includes(file.type)) return enqueueSnackbar("Допустимые форматы изображений: png, jpeg, gif");
|
||||
async function handleImageUpload(file: File) {
|
||||
if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик");
|
||||
if (!allowedFileTypes.includes(file.type)) return enqueueSnackbar("Допустимые форматы изображений: png, jpeg, gif");
|
||||
|
||||
onImageUploadClick(file);
|
||||
closeImageUploadModal();
|
||||
}
|
||||
onImageUploadClick(file);
|
||||
closeImageUploadModal();
|
||||
}
|
||||
|
||||
const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
setIsDropReady(false);
|
||||
const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
setIsDropReady(false);
|
||||
|
||||
const file = event.dataTransfer.files[0];
|
||||
if (!file || imageUrl) return;
|
||||
const file = event.dataTransfer.files[0];
|
||||
if (!file || imageUrl) return;
|
||||
|
||||
handleImageUpload(file);
|
||||
};
|
||||
handleImageUpload(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
<UploadImageModal
|
||||
isOpen={isImageUploadOpen}
|
||||
onClose={closeImageUploadModal}
|
||||
handleImageChange={handleImageUpload}
|
||||
description="Принимает JPG, PNG — максимум 5mb"
|
||||
/>
|
||||
<Box
|
||||
onDragEnter={() => !imageUrl && setIsDropReady(true)}
|
||||
onDragExit={() => setIsDropReady(false)}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDrop={onDrop}
|
||||
sx={{
|
||||
width: "48px",
|
||||
height: "48px",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
border: `1px solid ${isDropReady ? "red" : theme.palette.grey2.main}`,
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
<ButtonBase
|
||||
onClick={imageUrl ? undefined : openImageUploadModal}
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
}}>
|
||||
<UploadImageModal
|
||||
isOpen={isImageUploadOpen}
|
||||
onClose={closeImageUploadModal}
|
||||
handleImageChange={handleImageUpload}
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: "8px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{imageUrl ? (
|
||||
<img
|
||||
src={imageUrl}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "scale-down",
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
onDragEnter={() => !imageUrl && setIsDropReady(true)}
|
||||
onDragExit={() => setIsDropReady(false)}
|
||||
onDragOver={e => e.preventDefault()}
|
||||
onDrop={onDrop}
|
||||
sx={{
|
||||
width: "48px",
|
||||
height: "48px",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
border: `1px solid ${isDropReady ? "red" : theme.palette.grey2.main}`,
|
||||
borderRadius: "8px",
|
||||
}}>
|
||||
<ButtonBase
|
||||
onClick={imageUrl ? undefined : openImageUploadModal}
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: "8px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{imageUrl ?
|
||||
<img
|
||||
src={imageUrl}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "scale-down",
|
||||
}}
|
||||
/>
|
||||
:
|
||||
<UploadIcon />
|
||||
}
|
||||
</ButtonBase>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "start",
|
||||
}}>
|
||||
{imageUrl &&
|
||||
<ButtonBase onClick={onDeleteClick}>
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.orange.main,
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
textDecoration: "underline",
|
||||
}}
|
||||
>
|
||||
Удалить
|
||||
</Typography>
|
||||
</ButtonBase>
|
||||
}
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.orange.main,
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
textDecoration: "underline",
|
||||
mt: "auto",
|
||||
}}
|
||||
>
|
||||
5 MB максимум
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
) : (
|
||||
<UploadIcon />
|
||||
)}
|
||||
</ButtonBase>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "start",
|
||||
}}
|
||||
>
|
||||
{imageUrl && (
|
||||
<ButtonBase onClick={onDeleteClick}>
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.orange.main,
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
textDecoration: "underline",
|
||||
}}
|
||||
>
|
||||
Удалить
|
||||
</Typography>
|
||||
</ButtonBase>
|
||||
)}
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.orange.main,
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
textDecoration: "underline",
|
||||
mt: "auto",
|
||||
}}
|
||||
>
|
||||
5 MB максимум
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user