SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

chore: Restrict image uploads to JPG and PNG formats

Browse Source 
Updated file input to accept only .jpg, .jpeg, and .png files in the UploadImageModal component.
This commit is contained in:
ArtChaos189 2023-12-15 22:27:53 +03:00
parent f8c4d11728
commit f0dafad472
2 changed files with 244 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

291
src/pages/Questions/UploadImage/UploadImageModal.tsx
View File

@ -1,172 +1,155 @@
import { import { Typography, Box, useTheme, ButtonBase, Modal, TextField, InputAdornment } from "@mui/material";
Typography,
Box,
useTheme,
ButtonBase,
Modal,
TextField,
InputAdornment,
} from "@mui/material";
import UploadIcon from "../../../assets/icons/UploadIcon"; import UploadIcon from "../../../assets/icons/UploadIcon";
import SearchIcon from "../../../assets/icons/SearchIcon"; import SearchIcon from "../../../assets/icons/SearchIcon";
import UnsplashIcon from "../../../assets/icons/Unsplash.svg"; import UnsplashIcon from "../../../assets/icons/Unsplash.svg";
import { useRef, useState, type DragEvent } from "react"; import { useRef, useState, type DragEvent } from "react";
interface ModalkaProps { interface ModalkaProps {
isOpen: boolean; isOpen: boolean;
onClose: () => void; onClose: () => void;
handleImageChange: (file: File) => void; handleImageChange: (file: File) => void;
description?: string;
} }
export const UploadImageModal: React.FC<ModalkaProps> = ({ export const UploadImageModal: React.FC<ModalkaProps> = ({ handleImageChange, isOpen, onClose, description }) => {
handleImageChange, const theme = useTheme();
isOpen, const dropZone = useRef<HTMLDivElement>(null);
onClose, const [ready, setReady] = useState(false);
}) => {
const theme = useTheme();
const dropZone = useRef<HTMLDivElement>(null);
const [ready, setReady] = useState(false);
const handleDragEnter = (event: DragEvent<HTMLDivElement>) => { const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {
event.preventDefault(); event.preventDefault();
setReady(true); setReady(true);
}; };
const handleDrop = (event: DragEvent<HTMLDivElement>) => { const handleDrop = (event: DragEvent<HTMLDivElement>) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
const file = event.dataTransfer.files[0]; const file = event.dataTransfer.files[0];
if (!file) return; if (!file) return;
handleImageChange(file); handleImageChange(file);
}; };
return ( return (
<Modal <Modal
open={isOpen} open={isOpen}
onClose={onClose} onClose={onClose}
aria-labelledby="modal-modal-title" aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description" 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 <Box
sx={{ onDragOver={(event: DragEvent<HTMLDivElement>) => event.preventDefault()}
position: "absolute", onDrop={handleDrop}
top: "50%", ref={dropZone}
left: "50%", sx={{
transform: "translate(-50%, -50%)", width: "580px",
maxWidth: "690px", padding: "33px 10px 33px 55px",
bgcolor: "background.paper", display: "flex",
borderRadius: "12px", alignItems: "center",
boxShadow: 24, backgroundColor: theme.palette.background.default,
p: 0, border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
overflow: "hidden", borderRadius: "8px",
}} gap: "55px",
}}
onDragEnter={handleDragEnter} // Применяем обработчик onDragEnter напрямую
> >
<Box <UploadIcon />
sx={{ <Box>
display: "flex", <Typography sx={{ color: "#9A9AAF", fontWeight: "bold" }}>
flexDirection: "column", Загрузите или перетяните сюда файл
padding: "20px", </Typography>
background: theme.palette.background.default, <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
}} {description || "Принимает JPG, PNG, и GIF формат — максимум 5mb"}
> </Typography>
<Typography </Box>
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>
</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>
);
}; };

209
src/pages/startPage/FaviconDropZone.tsx
View File

@ -6,120 +6,125 @@ import { useState } from "react";
import { UploadImageModal } from "../../pages/Questions/UploadImage/UploadImageModal"; import { UploadImageModal } from "../../pages/Questions/UploadImage/UploadImageModal";
import { useDisclosure } from "../../utils/useDisclosure"; import { useDisclosure } from "../../utils/useDisclosure";
const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"]; const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
interface Props { interface Props {
imageUrl: string | null; imageUrl: string | null;
onImageUploadClick: (image: Blob) => void; onImageUploadClick: (image: Blob) => void;
onDeleteClick: () => void; onDeleteClick: () => void;
} }
export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDeleteClick }: Props) { export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDeleteClick }: Props) {
const theme = useTheme(); const theme = useTheme();
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const [isDropReady, setIsDropReady] = useState<boolean>(false); const [isDropReady, setIsDropReady] = useState<boolean>(false);
const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure(); const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();
if (!quiz) return null; if (!quiz) return null;
async function handleImageUpload(file: File) { async function handleImageUpload(file: File) {
if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик"); if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик");
if (!allowedFileTypes.includes(file.type)) return enqueueSnackbar("Допустимые форматы изображений: png, jpeg, gif"); if (!allowedFileTypes.includes(file.type)) return enqueueSnackbar("Допустимые форматы изображений: png, jpeg, gif");
onImageUploadClick(file); onImageUploadClick(file);
closeImageUploadModal(); closeImageUploadModal();
} }
const onDrop = (event: React.DragEvent<HTMLDivElement>) => { const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault(); event.preventDefault();
setIsDropReady(false); setIsDropReady(false);
const file = event.dataTransfer.files[0]; const file = event.dataTransfer.files[0];
if (!file || imageUrl) return; if (!file || imageUrl) return;
handleImageUpload(file); handleImageUpload(file);
}; };
return ( return (
<Box sx={{ <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", display: "flex",
gap: "10px", justifyContent: "center",
}}> alignItems: "center",
<UploadImageModal borderRadius: "8px",
isOpen={isImageUploadOpen} overflow: "hidden",
onClose={closeImageUploadModal} }}
handleImageChange={handleImageUpload} >
{imageUrl ? (
<img
src={imageUrl}
style={{
width: "100%",
height: "100%",
objectFit: "scale-down",
}}
/> />
<Box ) : (
onDragEnter={() => !imageUrl && setIsDropReady(true)} <UploadIcon />
onDragExit={() => setIsDropReady(false)} )}
onDragOver={e => e.preventDefault()} </ButtonBase>
onDrop={onDrop} </Box>
sx={{ <Box
width: "48px", sx={{
height: "48px", display: "flex",
backgroundColor: theme.palette.background.default, flexDirection: "column",
border: `1px solid ${isDropReady ? "red" : theme.palette.grey2.main}`, alignItems: "start",
borderRadius: "8px", }}
}}> >
<ButtonBase {imageUrl && (
onClick={imageUrl ? undefined : openImageUploadModal} <ButtonBase onClick={onDeleteClick}>
sx={{ <Typography
width: "100%", sx={{
height: "100%", color: theme.palette.orange.main,
display: "flex", fontSize: "16px",
justifyContent: "center", lineHeight: "19px",
alignItems: "center", textDecoration: "underline",
borderRadius: "8px", }}
overflow: "hidden", >
}} Удалить
> </Typography>
{imageUrl ? </ButtonBase>
<img )}
src={imageUrl} <Typography
style={{ sx={{
width: "100%", color: theme.palette.orange.main,
height: "100%", fontSize: "16px",
objectFit: "scale-down", lineHeight: "19px",
}} textDecoration: "underline",
/> mt: "auto",
: }}
<UploadIcon /> >
} 5 MB максимум
</ButtonBase> </Typography>
</Box> </Box>
<Box sx={{ </Box>
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>
);
};