import { Group, Text, rem, Stack, createStyles, ActionIcon, Modal, Box, UnstyledButton, Image, Slider, Center, Button, } from '@mantine/core'; import { IconUpload, IconPhoto, IconX, IconLock, IconRotateClockwise2, IconRotateClockwise, IconArrowsMoveHorizontal, IconArrowsMoveVertical, } from '@tabler/icons-react'; import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE } from '@mantine/dropzone'; import { useEffect, useRef, useState } from 'react'; import Cropper, { ReactCropperElement } from 'react-cropper'; import 'cropperjs/dist/cropper.css'; const useStyles = createStyles((theme) => ({ dropzone: {}, dropzoneAccept: {}, dropzoneReject: {}, dropzoneIdle: {}, imageOutputBox: { position: 'relative', width: '80px', height: '80px', }, imageOutputDelete: { position: 'absolute', top: '0%', right: 0, zIndex: 1, padding: 5, borderRadius: 100, }, actionButton: { '&.mantine-UnstyledButton-root': { borderRadius: theme.radius.md, '&:active': { transform: 'scale(1)', }, }, }, actionButtonGroup: { '.mantine-UnstyledButton-root': { borderRadius: 0, '&:active': { transform: 'scale(1)', }, '&:first-child': { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderTopLeftRadius: theme.radius.md, borderBottomLeftRadius: theme.radius.md, }, '&:last-child': { borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderTopRightRadius: theme.radius.md, borderBottomRightRadius: theme.radius.md, }, '&:not(:last-child)': { borderRight: 'none', }, '&:not(:first-child)': { borderLeft: 'none', }, }, }, })); type ImageUploaderProps = Partial & { images: string[]; limit: number; }; interface PhotoEditorModalProps { opened: boolean; setOpened: (value: boolean) => void; images: string[]; setImages(value:string[]): void; selectedImage: string | null ; setSelectedImage: (value: string) => void; } function PhotoEditorModal(props: PhotoEditorModalProps) { const { classes, theme } = useStyles(); const [Zoom, setZoom] = useState(0); const [rotate, setRotate] = useState(0); // [1 const cropperRef = useRef(null); const { selectedImage, setSelectedImage, opened, setOpened, images, setImages } = props; const [croppedImage, setCroppedImage] = useState(null); const cropper = cropperRef.current?.cropper; const [aspectRatio] = useState(cropper?.getImageData().aspectRatio); const [flipConfig, setFlipConfig] = useState({ hasFlippedY: false, hasFlippedX: false, }); function handleFlipX() { setFlipConfig({ ...flipConfig, hasFlippedX: !flipConfig.hasFlippedX, hasFlippedY: false, }); cropper?.scaleX(-cropper!.getData().scaleX || -1); } function handleFlipY() { setFlipConfig({ ...flipConfig, hasFlippedY: !flipConfig.hasFlippedY, hasFlippedX: false, }); cropper?.scaleY(-cropper!.getData().scaleY || -1); } const [movable, setMovable] = useState(false); const onCrop = () => { // console.log(cropper); const image = cropper?.getCroppedCanvas().toDataURL(); setCroppedImage(image as string); // setSelectedImage(image); }; useEffect(() => { cropperRef.current?.cropper.rotate(rotate); }, [rotate]); useEffect(() => { if (movable) { cropper?.setDragMode('move'); } else { cropper?.setDragMode('crop'); } }, [movable]); function handleSave() { // setImages(()=> images.find) const index = images.indexOf(selectedImage as string); if (index !== -1) { images[index] = String(croppedImage); setImages(images); } setSelectedImage(croppedImage as string); } const ASPECT_RATIO = { '16-9': 1.7777777777777777, '4-3': 1.3333333333333333, '1-1': 1, '2-3': 0.666666667, free: NaN, }; return ( setOpened(false)} size="xl" centered styles={{ body: { padding: 0, }, }} > {selectedImage && ( { setMovable(!movable); }} > { console.log(cropper?.getImageData().aspectRatio); cropper?.setAspectRatio(ASPECT_RATIO.free); }} > Free cropperRef.current?.cropper.setAspectRatio(ASPECT_RATIO['4-3'])} > 4:3 cropper?.setAspectRatio(ASPECT_RATIO['16-9'])} > 16:9 cropper?.setAspectRatio(ASPECT_RATIO['1-1'])} > 1:1 {/* Zoom Actions */} cropper?.zoom(-0.1)} >

{ setZoom(value); }} />

cropper?.zoom(Zoom + 0.1)} > {/* Rotate 360deg Actions */} cropper?.rotate(-90)} >

{ setRotate(value); }} />

cropper?.rotate(90)} > {/* Rotate 180deg Actions */} )} {!selectedImage && No image selected} ); } export function generateBase64FromImage(imageFile: File | Blob) { const reader = new FileReader(); const promise = new Promise((resolve, reject) => { reader.onload = (e: any) => resolve(e.target.result); reader.onerror = (err) => reject(err); }); reader.readAsDataURL(imageFile); return promise; } export function ImageUploader(props: ImageUploaderProps) { const { classes, theme } = useStyles(); const [opened, setOpened] = useState(false); const [images, setImages] = useState(props.images || []); const [selectedImage, setSelectedImage] = useState(null); // [1 const limit = props.limit || 5; function handleRemoveImage(image: string) { setImages((prev) => prev.filter((_image) => image !== _image)); } return ( { console.log(files); if (files.length > 0) { generateBase64FromImage(files[0]).then((res: any) => { setImages([...images, res]); setSelectedImage(res); setOpened(true); // clearTimeout(timdoe); }); } }} onReject={(files) => { console.log(files); }} maxSize={3 * 1024 ** 2} maxFiles={limit} disabled={images.length >= limit} accept={IMAGE_MIME_TYPE} {...props} >

Drag images here or click to select files You can upload up to{' '} {limit - images.length} {' '} images

{images.map((image, index) => ( handleRemoveImage(image)} > { setSelectedImage(image); setOpened(true); }} role="button" tabIndex={0} arai-label="image-box" >

))} ); }

Image Uploader