import React, { useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { useDropzone } from "react-dropzone"; import { Transition, Dialog } from "@headlessui/react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // services import { FileService } from "services/file.service"; // hooks import useToast from "hooks/use-toast"; // ui import { Button } from "@plane/ui"; // icons import { UserCircle2 } from "lucide-react"; // constants import { MAX_FILE_SIZE } from "constants/common"; type Props = { handleRemove?: () => void; isOpen: boolean; isRemoving: boolean; onClose: () => void; onSuccess: (url: string) => void; value: string | null; }; // services const fileService = new FileService(); export const WorkspaceImageUploadModal: React.FC = observer((props) => { const { value, onSuccess, isOpen, onClose, isRemoving, handleRemove } = props; // states const [image, setImage] = useState(null); const [isImageUploading, setIsImageUploading] = useState(false); // router const router = useRouter(); const { workspaceSlug } = router.query; const { setToastAlert } = useToast(); const { workspace: { currentWorkspace }, appConfig: { envConfig }, } = useMobxStore(); const onDrop = (acceptedFiles: File[]) => setImage(acceptedFiles[0]); const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({ onDrop, accept: { "image/*": [".png", ".jpg", ".jpeg", ".svg", ".webp"], }, maxSize: envConfig?.file_size_limit ?? MAX_FILE_SIZE, multiple: false, }); const handleClose = () => { setImage(null); setIsImageUploading(false); onClose(); }; const handleSubmit = async () => { if (!image || (!workspaceSlug && router.pathname !== "/onboarding")) return; setIsImageUploading(true); const formData = new FormData(); formData.append("asset", image); formData.append("attributes", JSON.stringify({})); if (!workspaceSlug) return; fileService .uploadFile(workspaceSlug.toString(), formData) .then((res) => { const imageUrl = res.asset; onSuccess(imageUrl); setImage(null); if (value && currentWorkspace) fileService.deleteFile(currentWorkspace.id, value); }) .catch((err) => setToastAlert({ type: "error", title: "Error!", message: err?.error ?? "Something went wrong. Please try again.", }) ) .finally(() => setIsImageUploading(false)); }; return (
Upload Image
{image !== null || (value && value !== "") ? ( <> image ) : (
{isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
)}
{fileRejections.length > 0 && (

{fileRejections[0].errors[0].code === "file-too-large" ? "The image size cannot exceed 5 MB." : "Please upload a file in a valid format."}

)}

File formats supported- .jpeg, .jpg, .png, .webp, .svg

{handleRemove && ( )}
); });