Fix: Error Toast Message for Issue Attachment (#5424)

makeplane · Aug 26, 2024 · 4689ebe · 4689ebe
1 parent 0dce67b
commit 4689ebe
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 37 deletions.
diff --git 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<TIssueAttachmentItemList> = 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
@@ -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<Props> = 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<Props> = observer((props) => {
       {customButton ? customButton : <Plus className="h-4 w-4" />}
     </button>
   );
-});
+});