import React, { useCallback, useState } from "react"; import { useRouter } from "next/router"; import { mutate } from "swr"; // react-dropzone import { useDropzone } from "react-dropzone"; // toast import useToast from "hooks/use-toast"; // fetch key import { ISSUE_ATTACHMENTS } from "constants/fetch-keys"; // services import issuesService from "services/issues.service"; // type import { IIssueAttachment } from "types"; const maxFileSize = 5 * 1024 * 1024; // 5 MB export const IssueAttachmentUpload = () => { const [isLoading, setIsLoading] = useState(false); const router = useRouter(); const { workspaceSlug, projectId, issueId } = router.query; const { setToastAlert } = useToast(); const onDrop = useCallback((acceptedFiles: File[]) => { if (!acceptedFiles[0] || !workspaceSlug) return; const formData = new FormData(); formData.append("asset", acceptedFiles[0]); formData.append( "attributes", JSON.stringify({ name: acceptedFiles[0].name, size: acceptedFiles[0].size, }) ); setIsLoading(true); issuesService .uploadIssueAttachment( workspaceSlug as string, projectId as string, issueId as string, formData ) .then((res) => { mutate( ISSUE_ATTACHMENTS(issueId as string), (prevData) => [res, ...(prevData ?? [])], false ); setToastAlert({ type: "success", title: "Success!", message: "File added successfully.", }); setIsLoading(false); }) .catch((err) => { setIsLoading(false); setToastAlert({ type: "error", title: "error!", message: "Something went wrong. please check file type & size (max 5 MB)", }); }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({ onDrop, maxSize: maxFileSize, multiple: false, disabled: isLoading }); const fileError = fileRejections.length > 0 ? `Invalid file type or size (max ${maxFileSize / 1024 / 1024} MB)` : null; return (
{isDragActive ? (

Drop here...

) : fileError ? (

{fileError}

) : isLoading ? (

Uploading....

) : (

Drag and drop/Click to add

)}
); };