(fix) O3-3627: Hide filetype extension for image attachment

e2e/specs/attachments.spec.ts

@@ -57,7 +57,7 @@ test('Add and remove an attachment', async ({ page }) => {
   });
 
   await test.step('Then I should see the file I uploaded displayed in the attachments table', async () => {
-    await expect(page.getByRole('button', { name: /brainScan.jpeg/i })).toBeVisible();
+    await expect(page.getByRole('button', { name: /brainScan/i })).toBeVisible();
   });
 
   await test.step('When I click on the `Table view` tab', async () => {
@@ -78,7 +78,7 @@ test('Add and remove an attachment', async ({ page }) => {
   });
 
   await test.step('And I should not see the deleted attachment in the list', async () => {
-    await expect(page.getByRole('button', { name: /brainScan.jpeg/i })).not.toBeVisible();
+    await expect(page.getByRole('button', { name: /brainScan/i })).not.toBeVisible();
   });
 
   await test.step('And the attachments table should be empty', async () => {

packages/esm-patient-attachments-app/src/camera-media-uploader/file-review.component.tsx

@@ -70,20 +70,28 @@ const FilePreview: React.FC<FilePreviewProps> = ({
   clearData,
 }) => {
   const { t } = useTranslation();
-  const [fileName, setFileName] = useState(uploadedFile.fileName);
+  const { allowedExtensions } = useContext(CameraMediaUploaderContext);
+  const fileExtension = uploadedFile.fileName.match(/\.[^\\/.]+$/)?.[0] || '';
+  const [fileName, setFileName] = useState(uploadedFile.fileName.replace(/\.[^\\/.]+$/, ''));
   const [fileDescription, setFileDescription] = useState(uploadedFile.fileDescription);
   const [emptyName, setEmptyName] = useState(false);
 
   const saveImageOrPdf = useCallback(
     (event: SyntheticEvent) => {
       event.preventDefault();
+
+      const sanitizedFileName = allowedExtensions.reduce((name, ext) => {
+        const regex = new RegExp(`\\.(${ext})+$`, 'i');
+        return name.replace(regex, '');
+      }, fileName);
+
       onSaveFile?.({
         ...uploadedFile,
-        fileName,
+        fileName: `${sanitizedFileName}${fileExtension}`,
         fileDescription,
       });
     },
-    [onSaveFile, fileName, fileDescription, uploadedFile],
+    [onSaveFile, fileName, fileExtension, allowedExtensions, fileDescription, uploadedFile],
   );
 
   const cancelCapture = useCallback(
@@ -177,4 +185,4 @@ const FilePreview: React.FC<FilePreviewProps> = ({
   );
 };
 
-export default FileReviewContainer;
+export default FileReviewContainer;

packages/esm-patient-attachments-app/src/camera-media-uploader/media-uploader.component.tsx

@@ -90,8 +90,12 @@ const MediaUploaderComponent = () => {
       <p className="cds--label-description">
         {t('fileUploadSizeConstraints', 'Size limit is {{fileSize}}MB', {
           fileSize: maxFileSize,
-        })}
-        .
+        })}.
+      </p>
+      <p className='cds--label-description'>
+         {t('supportedFiletypes', 'Supported files are {{supportedFiles}}',{
+          supportedFiles: allowedExtensions?.join(', '),
+          })}.
       </p>
       <div className={styles.uploadFile}>
         <FileUploaderDropContainer

packages/esm-patient-attachments-app/src/utils.ts

@@ -28,7 +28,7 @@ export function createGalleryEntry(data: AttachmentResponse): Attachment {
   return {
     id: data.uuid,
     src: `${window.openmrsBase}${attachmentUrl}/${data.uuid}/bytes`,
-    filename: data.filename,
+    filename: data.filename.replace(/\.[^\\/.]+$/, ''),
     description: data.comment,
     dateTime: formatDate(new Date(data.dateTime), {
       mode: 'wide',