update accept UploadImageModal
This commit is contained in:
parent
9ce829f98f
commit
194c3aade5
@ -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<ModalkaProps> = ({ handleImageChange, isOpen, onClose, description }) => {
|
||||
export const UploadImageModal: React.FC<ModalkaProps> = ({
|
||||
handleImageChange,
|
||||
isOpen,
|
||||
onClose,
|
||||
accept,
|
||||
description,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const dropZone = useRef<HTMLDivElement>(null);
|
||||
const [ready, setReady] = useState(false);
|
||||
@ -31,6 +40,10 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({ handleImageChange, is
|
||||
handleImageChange(file);
|
||||
};
|
||||
|
||||
const acceptedFormats = accept ? accept.map((format) => "." + format).join(", ") : "";
|
||||
|
||||
console.log(acceptedFormats);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={isOpen}
|
||||
@ -67,7 +80,7 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({ handleImageChange, is
|
||||
<input
|
||||
onChange={(event) => 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"
|
||||
|
@ -52,6 +52,7 @@ export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDelete
|
||||
onClose={closeImageUploadModal}
|
||||
handleImageChange={handleImageUpload}
|
||||
description="Принимает JPG, PNG — максимум 5mb"
|
||||
accept={["jpeg", "jpg", "png"]}
|
||||
/>
|
||||
<Box
|
||||
onDragEnter={() => !imageUrl && setIsDropReady(true)}
|
||||
|
Loading…
Reference in New Issue
Block a user