From a7ff3abea3ea8a0edaa9954f54ca567e169e79a6 Mon Sep 17 00:00:00 2001 From: sharma01ketan Date: Mon, 26 Aug 2024 15:22:03 +0530 Subject: [PATCH] Fix: Error Toast Message for Issue Attachment --- .../attachment/attachment-item-list.tsx | 57 ++++++++++++----- .../attachments/quick-action-button.tsx | 64 +++++++++++++------ 2 files changed, 84 insertions(+), 37 deletions(-) diff --git a/web/core/components/issues/attachment/attachment-item-list.tsx b/web/core/components/issues/attachment/attachment-item-list.tsx index 75881e27127..a0126b25121 100644 --- a/web/core/components/issues/attachment/attachment-item-list.tsx +++ b/web/core/components/issues/attachment/attachment-item-list.tsx @@ -1,8 +1,9 @@ import { FC, useCallback, useState } from "react"; import { observer } from "mobx-react"; -import { useDropzone } from "react-dropzone"; +import { FileRejection, useDropzone } from "react-dropzone"; import { UploadCloud } from "lucide-react"; // hooks +import {TOAST_TYPE, setToast } from "@plane/ui"; import { MAX_FILE_SIZE } from "@/constants/common"; import { generateFileName } from "@/helpers/attachment.helper"; import { useInstance, useIssueDetail } from "@/hooks/store"; @@ -36,24 +37,46 @@ export const IssueAttachmentItemList: FC = observer((p const issueAttachments = getAttachmentsByIssueId(issueId); const onDrop = useCallback( - (acceptedFiles: File[]) => { - const currentFile: File = acceptedFiles[0]; - if (!currentFile || !workspaceSlug) return; + (acceptedFiles: File[], rejectedFiles:FileRejection[] ) => { + const totalAttachedFiles = acceptedFiles.length + rejectedFiles.length; - const uploadedFile: File = new File([currentFile], generateFileName(currentFile.name), { - type: currentFile.type, - }); - const formData = new FormData(); - formData.append("asset", uploadedFile); - formData.append( - "attributes", - JSON.stringify({ - name: uploadedFile.name, - size: uploadedFile.size, + if(rejectedFiles.length===0){ + const currentFile: File = acceptedFiles[0]; + if (!currentFile || !workspaceSlug) return; + + const uploadedFile: File = new File([currentFile], generateFileName(currentFile.name), { + type: currentFile.type, + }); + const formData = new FormData(); + formData.append("asset", uploadedFile); + formData.append( + "attributes", + JSON.stringify({ + name: uploadedFile.name, + size: uploadedFile.size, + }) + ); + setIsLoading(true); + handleAttachmentOperations.create(formData) + .catch(()=>{ + setToast({ + type: TOAST_TYPE.ERROR, + title: "Error!", + message: "File could not be attached. Try uploading again.", + }) }) - ); - setIsLoading(true); - handleAttachmentOperations.create(formData).finally(() => setIsLoading(false)); + .finally(() => setIsLoading(false)); + return; + } + + setToast({ + type: TOAST_TYPE.ERROR, + title: "Error!", + message: (totalAttachedFiles>1)? + "Only one file can be uploaded at a time." : + "File must be 5MB or less.", + }) + return; }, [handleAttachmentOperations, workspaceSlug] ); diff --git a/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx b/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx index 2d7a5de86f4..01923b21068 100644 --- a/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx +++ b/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx @@ -1,8 +1,9 @@ "use client"; import React, { FC, useCallback, useState } from "react"; import { observer } from "mobx-react"; -import { useDropzone } from "react-dropzone"; +import { FileRejection, useDropzone } from "react-dropzone"; import { Plus } from "lucide-react"; +import {TOAST_TYPE, setToast } from "@plane/ui"; // constants import { MAX_FILE_SIZE } from "@/constants/common"; // helper @@ -33,31 +34,54 @@ export const IssueAttachmentActionButton: FC = observer((props) => { // handlers const onDrop = useCallback( - (acceptedFiles: File[]) => { - const currentFile: File = acceptedFiles[0]; - if (!currentFile || !workspaceSlug) return; + (acceptedFiles: File[], rejectedFiles:FileRejection[] ) => { + const totalAttachedFiles = acceptedFiles.length + rejectedFiles.length; - const uploadedFile: File = new File([currentFile], generateFileName(currentFile.name), { - type: currentFile.type, - }); - const formData = new FormData(); - formData.append("asset", uploadedFile); - formData.append( - "attributes", - JSON.stringify({ - name: uploadedFile.name, - size: uploadedFile.size, + if(rejectedFiles.length===0){ + const currentFile: File = acceptedFiles[0]; + if (!currentFile || !workspaceSlug) return; + + const uploadedFile: File = new File([currentFile], generateFileName(currentFile.name), { + type: currentFile.type, + }); + const formData = new FormData(); + formData.append("asset", uploadedFile); + formData.append( + "attributes", + JSON.stringify({ + name: uploadedFile.name, + size: uploadedFile.size, + }) + ); + setIsLoading(true); + handleAttachmentOperations.create(formData) + .catch(()=>{ + setToast({ + type: TOAST_TYPE.ERROR, + title: "Error!", + message: "File could not be attached. Try uploading again.", + }) }) - ); - setIsLoading(true); - handleAttachmentOperations.create(formData).finally(() => { - setLastWidgetAction("attachments"); - setIsLoading(false); + .finally(() => { + setLastWidgetAction("attachments"); + setIsLoading(false); }); + return; + } + + setToast({ + type: TOAST_TYPE.ERROR, + title: "Error!", + message: (totalAttachedFiles>1)? + "Only one file can be uploaded at a time." : + "File must be 5MB or less.", + }) + return; }, [handleAttachmentOperations, workspaceSlug] ); + const { getRootProps, getInputProps } = useDropzone({ onDrop, maxSize: config?.file_size_limit ?? MAX_FILE_SIZE, @@ -71,4 +95,4 @@ export const IssueAttachmentActionButton: FC = observer((props) => { {customButton ? customButton : } ); -}); +}); \ No newline at end of file