Feature/Upload_media

src/modules/details/components/ImageTag.tsx

@@ -4,24 +4,85 @@ import { s3GetPresignedUrl} from 'apis/utils/mediaUpload/awsmedia';
 import Loader from 'modules/Auth/components/Loader';
 import { useEffect, useState } from 'react';
 
-export const ImageS3Tag = ({ path }) => {
-  const [srcImg, setSrcImg] = useState<string | undefined>();
+export const MediaS3Tag = ({ path }: { path: string }) => {
+  const [srcFile, setSrcFile] = useState<string | undefined>();
   const [isLoading, setIsLoading] = useState<Boolean>(false);
+  const [fileType, setFileType] = useState<string | undefined>();
+
   useEffect(() => {
     setIsLoading(true);
     s3GetPresignedUrl(path)
-      .then((img) => {
+      .then((assetUrl) => {
         setIsLoading(false);
-        setSrcImg(img);
+        setSrcFile(assetUrl);
+        const baseUrl = assetUrl.split('?')[0]; 
+        const extension = baseUrl.split('.').pop()?.toLowerCase(); 
+
+        if (extension === 'pdf') {
+          setFileType('pdf');
+        } else if (['jpg', 'jpeg', 'png', 'gif'].includes(extension || '')) {
+          setFileType('image');
+        } else if (['xls', 'xlsx'].includes(extension)) {
+          setFileType('excel'); 
+        } else if (['mp4', 'webm', 'ogg'].includes(extension)) {
+          setFileType('video'); 
+        } else {
+          setFileType('unsupported'); 
+        }
       })
       .catch((e) => {
         console.log('unable to fetch', e);
         setIsLoading(false);
       });
-  }, []);
-  return isLoading ? (
-    <CircularProgress />
-  ) : (
-    <img src={srcImg} alt='Image' width={'200px'} height={'200px'}></img>
-  );
+  }, [path]);
+
+  if (isLoading) {
+    return <CircularProgress />;
+  }
+
+  if (fileType === 'pdf') {
+    return (
+      <img 
+        src="/images/pdf.png" 
+        alt="PDF Thumbnail" 
+        width="50px" 
+        height="50px" 
+        onClick={() => window.open(srcFile, '_blank')} 
+        style={{ cursor: 'pointer' }} 
+      />
+    );
+  } else if (fileType === 'image') {
+    return (
+      <img 
+        src={srcFile} 
+        alt="File" 
+        width="200px" 
+        height="200px" 
+      />
+    );
+  } else if (fileType === 'excel') {
+    return (
+      <img 
+        src="/images/sheets.png" 
+        alt="Excel Thumbnail" 
+        width="50px" 
+        height="50px" 
+        onClick={() => window.open(srcFile, '_blank')} 
+        style={{ cursor: 'pointer' }} 
+      />
+    );
+  } else if (fileType === 'video') {
+    const videoType = srcFile?.split('.').pop()?.toLowerCase() === 'mp4' ? 'video/mp4' : 'video/webm'; 
+    return (
+      <video
+        width="400" 
+        controls 
+        style={{ cursor: 'pointer' }}>
+        <source src={srcFile} type={videoType} />
+        Your browser does not support the video tag.
+      </video>
+    );
+  } else {
+    return <p>Unsupported file type</p>;
+  }
 };

src/modules/details/components/Timeline.tsx

@@ -11,7 +11,7 @@ import { Box, Chip, Paper, Typography } from '@mui/material';
 import { DateFormate, getLastDaysFrom } from 'apis/utils/date.utils';
 import { ticketStatusColours } from '../constants';
 import { ITicketActivity } from '../type';
-import { ImageS3Tag } from './ImageTag';
+import { MediaS3Tag } from './ImageTag';
 
 export const TimelineComponent = ({ activities }: any) => {
   return (
@@ -76,7 +76,7 @@ const TimeLineDescription = ({ activity }: { activity: ITicketActivity }) => {
           </p>
         )}
         {activity?.asset_url?.map((item) => (
-          <ImageS3Tag path={item as string} />
+          <MediaS3Tag path={item as string} />
         ))}
       </div>
     </Paper>

src/modules/details/index.tsx

@@ -25,7 +25,7 @@ import EditIcon from '@mui/icons-material/Edit';
 import { ticketStatusColours } from './constants';
 
 
-import { ImageS3Tag } from './components/ImageTag';
+import { MediaS3Tag } from './components/ImageTag';
 import { UserContext } from 'App';
 import { ROLES } from 'routes/roleConstants';
 
@@ -133,14 +133,14 @@ function Details() {
                     </TableCell>
                   </TableRow>
                   <TableRow>
-                    <TableCell>Image</TableCell>
+                    <TableCell>Attachment</TableCell>
                     <TableCell>
                       <Box
                         display='flex'
-                        sx={{ width: '300px', overflowX: 'scroll' }}
+                        sx={{ width: '300px' }}
                       >
                         {ticket?.asset_url?.map((item) => (
-                          <ImageS3Tag path={item} />
+                          <MediaS3Tag path={item} />
                         ))}
                       </Box>
                     </TableCell>

src/modules/shared/UploadBucket.tsx

@@ -4,7 +4,7 @@ import { Box } from '@mui/system';
 import { IconButton, Typography } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import { useState } from 'react';
-import { ALLOWED_TYPES } from './constants';
+import { ALLOWED_TYPES, MAX_FILE_SIZE } from './constants';
 
 export const UploadBucket = ({
   isLoading,
@@ -32,11 +32,20 @@ export const UploadBucket = ({
 
     if (invalidFile) {
       setErrorMessage(`Invalid file type: ${invalidFile.name}`);
-    } else {
-      setErrorMessage(null);
-      handleChange(selectedFiles);
+      return;
     }
+
+    const oversizedFile = selectedFiles.find((file) => file.size > MAX_FILE_SIZE);
+
+    if (oversizedFile) {
+      setErrorMessage(`File size exceeds limit: ${oversizedFile.name}`);
+      return;
+    }
+
+    setErrorMessage(null); 
+    handleChange(selectedFiles); 
   };
+
   return (
     <Box>
       <input

src/modules/shared/constants.ts

@@ -1 +1,5 @@
-export const ALLOWED_TYPES = ['image/png', 'image/jpeg', 'image/jpg'];
+export const ALLOWED_TYPES = ['image/png', 'image/jpeg', 'image/jpg', 'application/pdf','video/mp4', 'vedio/webm', 'vedio/ogg', 'application/vnd.ms-excel',
+'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
+
+export const MAX_FILE_SIZE = 5 * 1024 * 1024;
+