(fix) O3-3682 - Refactor File Picker Component and Fix Multiple Selection Support

src/api/index.ts

@@ -1,4 +1,4 @@
-import { fhirBaseUrl, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { createAttachment, fhirBaseUrl, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import { encounterRepresentation } from '../constants';
 import { type OpenmrsForm, type PatientIdentifier, type PatientProgramPayload } from '../types';
 import { isUuid } from '../utils/boolean-utils';
@@ -18,34 +18,41 @@ export function saveEncounter(abortController: AbortController, payload, encount
   });
 }
 
-export function saveAttachment(patientUuid, field, conceptUuid, date, encounterUUID, abortController) {
-  const url = `${restBaseUrl}/attachment`;
-
-  const content = field.meta.submission?.newValue?.value;
-  const cameraUploadType = typeof content === 'string' && content?.split(';')[0].split(':')[1].split('/')[1];
-
-  const formData = new FormData();
-  const fileCaption = field.id;
-
-  formData.append('fileCaption', fileCaption);
-  formData.append('patient', patientUuid);
-
-  if (typeof content === 'object') {
-    formData.append('file', content);
-  } else {
-    formData.append('file', new File([''], `camera-upload.${cameraUploadType}`), `camera-upload.${cameraUploadType}`);
-    formData.append('base64Content', content);
+export function saveAttachment(
+  patientUuid: string, 
+  field: any, 
+  conceptUuid: string, 
+  date: string, 
+  encounterUUID: string, 
+  abortController: AbortController
+) {
+  // Normalize files to ensure we always work with an array
+  const files = field.meta.submission?.newValue 
+    ? (Array.isArray(field.meta.submission.newValue) 
+      ? field.meta.submission.newValue 
+      : [field.meta.submission.newValue])
+    : [];
+
+  // If no files, return a resolved promise
+  if (files.length === 0) {
+    return Promise.resolve([]);
   }
-  formData.append('encounter', encounterUUID);
-  formData.append('obsDatetime', date);
 
-  return openmrsFetch(url, {
-    method: 'POST',
-    signal: abortController.signal,
-    body: formData,
-  });
+  const attachmentPromises = files.map(file => 
+    createAttachment(patientUuid, {
+      fileDescription: field.id,
+      fileName: file.fileName || `upload.${file.fileType || 'jpg'}`,
+      file: file.file,
+      base64Content: file.base64Content,
+      fileType: file.fileType || 'image/jpeg'
+    })
+  );
+
+  return Promise.all(attachmentPromises);
 }
 
+
+
 export function getAttachmentByUuid(patientUuid: string, encounterUuid: string, abortController: AbortController) {
   const attachmentUrl = `${restBaseUrl}/attachment`;
   return openmrsFetch(`${attachmentUrl}?patient=${patientUuid}&encounter=${encounterUuid}`, {

src/components/field-label/field-label.scss

@@ -8,4 +8,5 @@
 .questionLabel {
   display: flex;
   align-items: center;
-}
+  font: bolder;
+}

src/components/inputs/file/file.component.tsx

@@ -1,159 +1,161 @@
-import React, { useState, useMemo, useCallback } from 'react';
-import { FileUploader, Button } from '@carbon/react';
+import React, { useMemo, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { isTrue } from '../../../utils/boolean-utils';
-import Camera from './camera/camera.component';
-import { Close, DocumentPdf } from '@carbon/react/icons';
+import { Layer, Button } from '@carbon/react';
+import { Add, CloseFilled } from '@carbon/react/icons';
+import { DocumentPdf } from '@carbon/react/icons';
 import styles from './file.scss';
-import { type FormFieldInputProps } from '../../../types';
 import { useFormProviderContext } from '../../../provider/form-provider';
-import { isViewMode } from '../../../utils/common-utils';
+import { type FormFieldInputProps } from '../../../types';
+import { isTrue } from '../../../utils/boolean-utils';
+import { shouldUseInlineLayout } from '../../../utils/form-helper';
 import FieldValueView from '../../value/view/field-value-view.component';
 import FieldLabel from '../../field-label/field-label.component';
+import {
+  createAttachment,
+  showModal,
+  showSnackbar,
+  type UploadedFile,
+  useLayoutType,
+} from '@openmrs/esm-framework';
+import { useAllowedFileExtensions } from '@openmrs/esm-patient-common-lib';
+import { FormGroup } from '@carbon/react';
 
-type DataSourceType = 'filePicker' | 'camera' | null;
-
-const File: React.FC<FormFieldInputProps> = ({ field, value, setFieldValue }) => {
+const File: React.FC<FormFieldInputProps> = ({ field, value, errors, setFieldValue }) => {
   const { t } = useTranslation();
-  const [cameraWidgetVisible, setCameraWidgetVisible] = useState(false);
-  const [imagePreview, setImagePreview] = useState(null);
-  const [dataSource, setDataSource] = useState<DataSourceType>(null);
-  const { sessionMode } = useFormProviderContext();
+  const isTablet = useLayoutType() === 'tablet';
+  const { layoutType, sessionMode, workspaceLayout } = useFormProviderContext();
+  const {allowedFileExtensions} = useAllowedFileExtensions();
 
-  const labelDescription = useMemo(() => {
-    return field.questionOptions.allowedFileTypes
-      ? t(
-          'fileUploadDescription',
-          `Upload one of the following file types: ${field.questionOptions.allowedFileTypes.map(
-            (eachItem) => ` ${eachItem}`,
-          )}`,
-        )
-      : t('fileUploadDescriptionAny', 'Upload any file type');
-  }, [field.questionOptions.allowedFileTypes, t]);
+  const isInline = useMemo(() => {
+    if (['view', 'embedded-view'].includes(sessionMode) || isTrue(field.readonly)) {
+      return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
+    }
+    return false;
+  }, [sessionMode, field.readonly, field.inlineRendering, layoutType, workspaceLayout]);
 
-  const handleFilePickerChange = useCallback(
-    (event) => {
-      // TODO: Add multiple file upload support; see: https://openmrs.atlassian.net/browse/O3-3682
-      const [selectedFile]: File[] = Array.from(event.target.files);
-      setImagePreview(null);
-      setFieldValue(selectedFile);
-    },
-    [setFieldValue],
-  );
+  const showFileCaptureModal = useCallback(() => {
+  const allowedExtensions = Array.isArray(allowedFileExtensions)
+    ? allowedFileExtensions.filter((ext) => !/pdf/i.test(ext))
+    : [];
 
-  const handleCameraImageChange = useCallback(
-    (newImage) => {
-      setImagePreview(newImage);
-      setCameraWidgetVisible(false);
-      setFieldValue(newImage);
+  const close = showModal('capture-photo-modal', {
+    saveFile: (file: UploadedFile) => {
+      if (file) {
+        // Transform the file to match the previous structure
+        const transformedFile = {
+          value: {
+            ...file,
+            bytesContentFamily: file.fileType?.includes('pdf') ? 'PDF' : 'IMAGE',
+          }
+        };
+
+        setFieldValue((prevValue) => {
+          const updatedValue = Array.isArray(prevValue) 
+            ? [...prevValue, transformedFile.value]
+            : [transformedFile.value];
+
+          return updatedValue;
+        });
+      }
+      close();
+      return Promise.resolve();
     },
-    [setFieldValue],
-  );
+    closeModal: () => close(),
+    allowedExtensions,
+    collectDescription: true,
+    multipleFiles: true,
+  });
+}, [allowedFileExtensions, setFieldValue]);
+
+
+  const handleRemoveFile = (index: number) => {
+    setFieldValue((prevValue) => {
+      const updatedFiles = Array.isArray(prevValue) ? [...prevValue] : [];
+      updatedFiles.splice(index, 1);
+      return updatedFiles;
+    });
 
-  if (isViewMode(sessionMode) && !value) {
+    showSnackbar({
+      title: t('fileRemoved', 'File removed'),
+      kind: 'success',
+      isLowContrast: true,
+    });
+  };
+
+  if (['view', 'embedded-view'].includes(sessionMode)) {
     return (
-      <FieldValueView label={t(field.label)} value={null} conceptName={field.meta.concept?.display} isInline={false} />
+      <FieldValueView
+        label={t(field.label)}
+        value={value}
+        conceptName={field.meta?.concept?.display}
+        isInline={isInline}
+      />
     );
   }
 
-  return isViewMode(sessionMode) ? (
-    <div>
-      <div className={styles.label}>{t(field.label)}</div>
-      <div className={styles.editModeImage}>
-        <div className={styles.imageContent}>
-          {value.bytesContentFamily === 'PDF' ? (
-            <div className={styles.pdfThumbnail} role="button" tabIndex={0}>
-              <DocumentPdf size={24} />
-            </div>
-          ) : (
-            <img src={value.src} alt={t('preview', 'Preview')} width="200px" />
-          )}
-        </div>
-      </div>
-    </div>
-  ) : (
-    <div>
-      <div className={styles.label}>
-        <FieldLabel field={field} />
-      </div>
-      <div className={styles.uploadSelector}>
-        <div className={styles.selectorButton}>
-          <Button disabled={isTrue(field.readonly)} onClick={() => setDataSource('filePicker')}>
-            {t('uploadImage', 'Upload image')}
-          </Button>
-        </div>
-        <div className={styles.selectorButton}>
-          <Button disabled={isTrue(field.readonly)} onClick={() => setDataSource('camera')}>
-            {t('cameraCapture', 'Camera capture')}
-          </Button>
-        </div>
-      </div>
-      {!dataSource && value && (
-        <div className={styles.editModeImage}>
-          <div className={styles.imageContent}>
-            {value.bytesContentFamily === 'PDF' ? (
-              <div className={styles.pdfThumbnail} role="button" tabIndex={0}>
-                <DocumentPdf size={24} />
-              </div>
-            ) : (
-              <img src={value.src} alt="Preview" width="200px" />
-            )}
-          </div>
-        </div>
-      )}
-      {dataSource === 'filePicker' && (
-        <div className={styles.fileUploader}>
-          <FileUploader
-            accept={field.questionOptions.allowedFileTypes ?? []}
-            buttonKind="primary"
-            buttonLabel={t('addFile', 'Add files')}
-            filenameStatus="edit"
-            iconDescription={t('clearFile', 'Clear file')}
-            labelDescription={labelDescription}
-            labelTitle={t('upload', 'Upload')}
-            // TODO: Add multiple file upload support; see: https://openmrs.atlassian.net/browse/O3-3682
-            // multiple={field.questionOptions.allowMultiple}
-            onChange={handleFilePickerChange}
-          />
-        </div>
-      )}
-      {dataSource === 'camera' && (
-        <div className={styles.cameraUploader}>
-          <div className={styles.camButton}>
-            <p className={styles.titleStyles}>Camera</p>
-            <p className={styles.descriptionStyles}>Capture image via camera</p>
-            <Button onClick={() => setCameraWidgetVisible((prevState) => !prevState)} size="md">
-              {cameraWidgetVisible ? t('closeCamera', 'Close camera') : t('addCameraImage', 'Add camera image')}
+  return (
+    !field.isHidden && (
+      <div className={styles.boldedLabel}>
+        <Layer>
+          <FormGroup
+            legendText={<FieldLabel field={field} />}
+            className={styles.boldedLegend}
+            disabled={field.isDisabled}
+            invalid={errors?.length > 0}
+          >
+          <div className={styles.fileInputContainer}>
+            <p className={styles.helperText}>
+              {t('imageUploadHelperText', "Upload images or files to add to your form.")}
+            </p>
+            <Button
+              className={styles.uploadButton}
+              kind={isTablet ? 'ghost' : 'tertiary'}
+              onClick={showFileCaptureModal}
+              renderIcon={(props) => <Add size={16} {...props} />}
+              disabled={isTrue(field.readonly)}
+            >
+              {t('uploadFile', 'Upload file')}
             </Button>
-          </div>
-          {cameraWidgetVisible && (
-            <div className={styles.cameraPreview}>
-              <Camera handleImages={handleCameraImageChange} />
-            </div>
-          )}
-          {imagePreview && (
-            <div className={styles.capturedImage}>
-              <div className={styles.imageContent}>
-                <img src={imagePreview} alt={t('preview', 'Preview')} width="200px" />
-                <div className={styles.caption}>
-                  <p>{t('uploadedPhoto', 'Uploaded photo')}</p>
-                  <div
-                    tabIndex={0}
-                    role="button"
-                    onClick={() => {
-                      setImagePreview(null);
-                    }}
-                    className={styles.closeIcon}>
-                    <Close />
+
+            <div className={styles.fileThumbnailGrid}>
+              {Array.isArray(value) && value.map((file, index) => (
+                <div key={index} className={styles.fileThumbnailItem}>
+                  <div className={styles.fileThumbnailContainer}>
+                    {file.fileType?.includes('pdf') || file.bytesContentFamily === 'PDF' ? (
+                      <div className={styles.pdfThumbnail}>
+                        <DocumentPdf size={24} />
+                      </div>
+                    ) : (
+                      <img
+                        className={styles.fileThumbnail}
+                        src={file.base64Content || file.src}
+                        alt={file.fileDescription ?? file.fileName}
+                      />
+                    )}
                   </div>
+                  <Button 
+                    kind="ghost" 
+                    className={styles.removeButton} 
+                    onClick={() => handleRemoveFile(index)}
+                    aria-label={t('removeFile', 'Remove file')}
+                  >
+                    <CloseFilled size={16} className={styles.closeIcon} />
+                  </Button>
                 </div>
-              </div>
+              ))}
             </div>
-          )}
-        </div>
-      )}
-    </div>
+
+            {errors.length > 0 && (
+              <div className={styles.errorMessage}>
+                {errors[0]?.message}
+              </div>
+            )}
+          </div>
+          </FormGroup>
+        </Layer>
+      </div>
+    )
   );
 };
 
-export default File;
+export default File;