diff --git a/src/pages/Questions/UploadImage/UploadImageModal.tsx b/src/pages/Questions/UploadImage/UploadImageModal.tsx index 39b63879..d722e81f 100644 --- a/src/pages/Questions/UploadImage/UploadImageModal.tsx +++ b/src/pages/Questions/UploadImage/UploadImageModal.tsx @@ -4,14 +4,23 @@ import SearchIcon from "../../../assets/icons/SearchIcon"; import UnsplashIcon from "../../../assets/icons/Unsplash.svg"; import { useRef, useState, type DragEvent } from "react"; +type ImageFormat = "jpg" | "jpeg" | "png" | "gif"; + interface ModalkaProps { isOpen: boolean; onClose: () => void; handleImageChange: (file: File) => void; description?: string; + accept?: ImageFormat[]; } -export const UploadImageModal: React.FC = ({ handleImageChange, isOpen, onClose, description }) => { +export const UploadImageModal: React.FC = ({ + handleImageChange, + isOpen, + onClose, + accept, + description, +}) => { const theme = useTheme(); const dropZone = useRef(null); const [ready, setReady] = useState(false); @@ -31,6 +40,10 @@ export const UploadImageModal: React.FC = ({ handleImageChange, is handleImageChange(file); }; + const acceptedFormats = accept ? accept.map((format) => "." + format).join(", ") : ""; + + console.log(acceptedFormats); + return ( = ({ handleImageChange, is event.target.files?.[0] && handleImageChange(event.target.files[0])} hidden - accept=".jpg, .jpeg, .png" + accept={acceptedFormats || ".jpg, .jpeg, .png , .gif"} multiple type="file" data-cy="upload-image-input" diff --git a/src/pages/startPage/FaviconDropZone.tsx b/src/pages/startPage/FaviconDropZone.tsx index 3ec9ae97..1a401921 100644 --- a/src/pages/startPage/FaviconDropZone.tsx +++ b/src/pages/startPage/FaviconDropZone.tsx @@ -52,6 +52,7 @@ export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDelete onClose={closeImageUploadModal} handleImageChange={handleImageUpload} description="Принимает JPG, PNG — максимум 5mb" + accept={["jpeg", "jpg", "png"]} /> !imageUrl && setIsDropReady(true)}