fix: handled attachment upload filename size error in the issue detail (#3485)

* fix: handled attachment upload filename size error in the issue detail

* ui: profile detail sidebar border

web/components/issues/attachment/attachment-detail.tsx

@@ -38,7 +38,6 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = (props) => {
   const attachment = attachmentId && getAttachmentById(attachmentId);
 
   if (!attachment) return <></>;
-
   return (
     <>
       <IssueAttachmentDeleteModal

web/components/issues/attachment/attachment-upload.tsx

@@ -5,6 +5,8 @@ import { useDropzone } from "react-dropzone";
 import { useApplication } from "hooks/store";
 // constants
 import { MAX_FILE_SIZE } from "constants/common";
+// helpers
+import { generateFileName } from "helpers/attachment.helper";
 // types
 import { TAttachmentOperations } from "./root";
 
@@ -26,15 +28,17 @@ export const IssueAttachmentUpload: React.FC<Props> = observer((props) => {
   const [isLoading, setIsLoading] = useState(false);
 
   const onDrop = useCallback((acceptedFiles: File[]) => {
-    if (!acceptedFiles[0] || !workspaceSlug) return;
+    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", acceptedFiles[0]);
+    formData.append("asset", uploadedFile);
     formData.append(
       "attributes",
       JSON.stringify({
-        name: acceptedFiles[0].name,
-        size: acceptedFiles[0].size,
+        name: uploadedFile.name,
+        size: uploadedFile.size,
       })
     );
     setIsLoading(true);

web/components/profile/sidebar.tsx

@@ -60,7 +60,7 @@ export const ProfileSidebar = observer(() => {
   ];
 
   return (
-    <div className="w-full flex-shrink-0 overflow-y-auto shadow-custom-shadow-sm md:h-full md:w-80">
+    <div className="w-full flex-shrink-0 overflow-y-auto shadow-custom-shadow-sm md:h-full md:w-80 border-l border-custom-border-100">
       {userProjectsData ? (
         <>
           <div className="relative h-32">

web/helpers/attachment.helper.ts

@@ -1,3 +1,14 @@
+export const generateFileName = (fileName: string) => {
+  const date = new Date();
+  const timestamp = date.getTime();
+
+  const _fileName = getFileName(fileName);
+  const nameWithoutExtension = _fileName.length > 80 ? _fileName.substring(0, 80) : _fileName;
+  const extension = getFileExtension(fileName);
+
+  return `${nameWithoutExtension}-${timestamp}.${extension}`;
+};
+
 export const getFileExtension = (filename: string) => filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2);
 
 export const getFileName = (fileName: string) => {

web/store/issue/issue-details/attachment.store.ts

@@ -1,5 +1,9 @@
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import set from "lodash/set";
+import update from "lodash/update";
+import concat from "lodash/concat";
+import uniq from "lodash/uniq";
+import pull from "lodash/pull";
 // services
 import { IssueAttachmentService } from "services/issue";
 // types
@@ -83,10 +87,13 @@ export class IssueAttachmentStore implements IIssueAttachmentStore {
     try {
       const response = await this.issueAttachmentService.getIssueAttachment(workspaceSlug, projectId, issueId);
 
-      runInAction(() => {
-        this.attachments[issueId] = response.map((attachment) => attachment.id);
-        response.forEach((attachment) => set(this.attachmentMap, attachment.id, attachment));
-      });
+      if (response && response.length > 0) {
+        const _attachmentIds = response.map((attachment) => attachment.id);
+        runInAction(() => {
+          update(this.attachments, [issueId], (attachmentIds = []) => uniq(concat(attachmentIds, _attachmentIds)));
+          response.forEach((attachment) => set(this.attachmentMap, attachment.id, attachment));
+        });
+      }
 
       return response;
     } catch (error) {
@@ -98,10 +105,11 @@ export class IssueAttachmentStore implements IIssueAttachmentStore {
     try {
       const response = await this.issueAttachmentService.uploadIssueAttachment(workspaceSlug, projectId, issueId, data);
 
-      runInAction(() => {
-        this.attachments[issueId].push(response.id);
-        set(this.attachmentMap, response.id, response);
-      });
+      if (response && response.id)
+        runInAction(() => {
+          update(this.attachments, [issueId], (attachmentIds = []) => uniq(concat(attachmentIds, [response.id])));
+          set(this.attachmentMap, response.id, response);
+        });
 
       return response;
     } catch (error) {
@@ -118,12 +126,13 @@ export class IssueAttachmentStore implements IIssueAttachmentStore {
         attachmentId
       );
 
-      const reactionIndex = this.attachments[issueId].findIndex((_comment) => _comment === attachmentId);
-      if (reactionIndex >= 0)
-        runInAction(() => {
-          this.attachments[issueId].splice(reactionIndex, 1);
-          delete this.attachmentMap[attachmentId];
+      runInAction(() => {
+        update(this.attachments, [issueId], (attachmentIds = []) => {
+          if (attachmentIds.includes(attachmentId)) pull(attachmentIds, attachmentId);
+          return attachmentIds;
         });
+        delete this.attachmentMap[attachmentId];
+      });
 
       return response;
     } catch (error) {