fix: cannot upload attachment files in docker (#241)

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseAttachmentsEditor.tsx

@@ -1,8 +1,11 @@
 import { Image, Button, Tooltip, Card, CardBody } from '@heroui/react';
-import { AttachmentType, CaseMessages } from '@/types/case';
 import { Trash, ArrowDownToLine, ArrowUpFromLine } from 'lucide-react';
-import { isImage } from './isImage';
 import { ChangeEvent, DragEvent } from 'react';
+import { isImage } from './isImage';
+import { AttachmentType, CaseMessages } from '@/types/case';
+import Config from '@/config/config';
+
+const apiServer = Config.apiServer;
 
 type Props = {
   isDisabled: boolean;
@@ -23,8 +26,8 @@ export default function CaseAttachmentsEditor({
   onFilesInput,
   messages,
 }: Props) {
-  let images: AttachmentType[] = [];
-  let others: AttachmentType[] = [];
+  const images: AttachmentType[] = [];
+  const others: AttachmentType[] = [];
 
   attachments.forEach((attachment) => {
     if (isImage(attachment)) {
@@ -39,7 +42,11 @@ export default function CaseAttachmentsEditor({
         {images.map((image, index) => (
           <Card key={index} radius="sm" className="mt-2 me-2 max-w-md">
             <CardBody>
-              <Image alt={image.title} src={image.path} className="object-cover h-40 w-40" />
+              <Image
+                alt={image.title}
+                src={`${apiServer}/uploads/${image.filename}`}
+                className="object-cover h-40 w-40"
+              />
               <div className="flex items-center justify-between">
                 <p>{image.title}</p>
                 <Tooltip content={messages.delete}>

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/attachmentControl.test.ts

@@ -22,16 +22,16 @@ describe('attachment control', () => {
       id: 1,
       title: '',
       detail: '',
-      path: '',
+      filename: '',
       createdAt: new Date(),
       updatedAt: new Date(),
       caseAttachments: sampleCaseAttachment,
     };
 
-    sampleAttachment.path = 'public/uploads/abc.png';
+    sampleAttachment.filename = 'abc.png';
     expect(isImage(sampleAttachment)).toBe(true);
 
-    sampleAttachment.path = 'public/uploads/abc.mp3';
+    sampleAttachment.filename = 'abc.mp3';
     expect(isImage(sampleAttachment)).toBe(false);
   });
 });

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/isImage.ts

@@ -1,8 +1,8 @@
 import { AttachmentType } from '@/types/case';
 
 function isImage(attachmentFile: AttachmentType) {
-  let path = attachmentFile.path;
-  let extension = path.substring(path.lastIndexOf('.') + 1).toLowerCase();
+  const filename = attachmentFile.filename;
+  const extension = filename.substring(filename.lastIndexOf('.') + 1).toLowerCase();
   if (
     extension === 'png' ||
     extension === 'jpg' ||

frontend/types/case.ts

@@ -53,7 +53,7 @@ type AttachmentType = {
   id: number;
   title: string;
   detail: string;
-  path: string;
+  filename: string;
   createdAt: Date;
   updatedAt: Date;
   caseAttachments: CaseAttachmentType;