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

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,7 +37,10 @@ export const IssueAttachmentItemList: FC<TIssueAttachmentItemList> = observer((p
   const issueAttachments = getAttachmentsByIssueId(issueId);
 
   const onDrop = useCallback(
-    (acceptedFiles: File[]) => {
+    (acceptedFiles: File[], rejectedFiles:FileRejection[] ) => {
+      const totalAttachedFiles = acceptedFiles.length +  rejectedFiles.length;
+
+      if(rejectedFiles.length===0){
         const currentFile: File = acceptedFiles[0];
         if (!currentFile || !workspaceSlug) return;
 
@@ -53,7 +57,26 @@ export const IssueAttachmentItemList: FC<TIssueAttachmentItemList> = observer((p
           })
         );
         setIsLoading(true);
-      handleAttachmentOperations.create(formData).finally(() => setIsLoading(false));
+        handleAttachmentOperations.create(formData)
+        .catch(()=>{
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: "File could not be attached. Try uploading again.",
+          })
+        })
+        .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]
   );

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,7 +34,10 @@ export const IssueAttachmentActionButton: FC<Props> = observer((props) => {
 
   // handlers
   const onDrop = useCallback(
-    (acceptedFiles: File[]) => {
+    (acceptedFiles: File[], rejectedFiles:FileRejection[] ) => {
+      const totalAttachedFiles = acceptedFiles.length + rejectedFiles.length;
+
+      if(rejectedFiles.length===0){
         const currentFile: File = acceptedFiles[0];
         if (!currentFile || !workspaceSlug) return;
 
@@ -50,14 +54,34 @@ export const IssueAttachmentActionButton: FC<Props> = observer((props) => {
           })
         );
         setIsLoading(true);
-      handleAttachmentOperations.create(formData).finally(() => {
+        handleAttachmentOperations.create(formData)
+        .catch(()=>{
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: "File could not be attached. Try uploading again.",
+          })
+        })
+        .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,