@pega/react-sdk-overrides 0.23.26 → 0.23.28

package/lib/widget/Attachment/Attachment.tsx

@@ -1,42 +1,63 @@
 /* eslint-disable react/jsx-boolean-value */
+/* eslint-disable react/no-array-index-key */
+import { useState, useEffect, useCallback } from 'react';
+import { CircularProgress, IconButton, Menu, MenuItem, Button } from '@material-ui/core';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import download from 'downloadjs';
 
-import { Button } from '@material-ui/core';
-import React, { useState, useEffect } from 'react';
-import { buildFilePropsFromResponse, getIconFromFileType, validateMaxSize, getIconForAttachment } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
-import './Attachment.css';
-import SummaryList from '@pega/react-sdk-components/lib/components/widget/SummaryList'
-import { CircularProgress } from "@material-ui/core";
-import download from "downloadjs";
+import { buildFilePropsFromResponse, getIconFromFileType, validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { isInfinity23OrHigher } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-declare const PCore: any;
+import './Attachment.css';
 
-function getCurrentAttachmentsList(context) {
-  return PCore.getStoreValue('.attachmentsList', 'context_data', context) || [];
+interface AttachmentProps extends Omit<PConnFieldProps, 'value'> {
+  // If any, enter additional props that only exist on this component
+  value: any;
+  allowMultiple: string;
+  extensions: string;
 }
 
-export default function Attachment(props) {
-  const {value, getPConnect, label} = props;
+const getAttachmentKey = (name = '') => (name ? `attachmentsList.${name}` : 'attachmentsList');
+
+const getCurrentAttachmentsList = (key, context) => {
+  return PCore.getStoreValue(`.${key}`, 'context_data', context) || [];
+};
+
+const updateAttachmentState = (pConn, key, attachments) => {
+  PCore.getStateUtils().updateState(pConn.getContextName(), key, attachments, {
+    pageReference: 'context_data',
+    isArrayDeepMerge: false
+  });
+};
+
+export default function Attachment(props: AttachmentProps) {
+  const { value, getPConnect, label, validatemessage, allowMultiple, extensions, displayMode } = props;
   /* this is a temporary fix because required is supposed to be passed as a boolean and NOT as a string */
   let { required, disabled } = props;
-  [required, disabled] = [required, disabled].map(
-    prop => prop === true || (typeof prop === 'string' && prop === 'true')
-  );
-  let arFileList$: Array<any> = [];
+  [required, disabled] = [required, disabled].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
   const pConn = getPConnect();
   const caseID = PCore.getStoreValue('.pyID', 'caseInfo.content', pConn.getContextName());
-  let fileTemp: any = {};
 
   let categoryName = '';
   if (value && value.pyCategoryName) {
     categoryName = value.pyCategoryName;
   }
-
-  let valueRef = pConn.getStateProps().value;
+  const deleteIcon = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
+  const srcImg = Utils.getImageSrc('document-doc', Utils.getSDKStaticConentUrl());
+  let valueRef = (pConn.getStateProps() as any).value;
   valueRef = valueRef.indexOf('.') === 0 ? valueRef.substring(1) : valueRef;
-  const [file, setFile] = useState(fileTemp);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const [files, setFiles] = useState<any[]>(() =>
+    value?.pxResults && +value.pyCount > 0 ? value.pxResults.map(f => buildFilePropsFromResponse(f)) : []
+  );
+  const [filesWithError, setFilesWithError] = useState<any[]>([]);
+  const [toggleUploadBegin, setToggleUploadBegin] = useState(false);
 
   const resetAttachmentStoredState = () => {
-    PCore.getStateUtils().updateState(pConn.getContextName(), 'attachmentsList', undefined, {
+    PCore.getStateUtils().updateState(pConn.getContextName(), getAttachmentKey(isInfinity23OrHigher() ? valueRef : ''), undefined, {
       pageReference: 'context_data',
       isArrayDeepMerge: false
     });
@@ -47,426 +68,387 @@ export default function Attachment(props) {
     download(atob(data), fileData);
   };
 
-  function _downloadFileFromList(fileObj: any) {
+  const downloadFile = (fileObj: any) => {
+    setAnchorEl(null);
     PCore.getAttachmentUtils()
+      // @ts-ignore - 3rd parameter "responseEncoding" should be optional
       .downloadAttachment(fileObj.pzInsKey, pConn.getContextName())
-      .then((content) => {
-        const extension = fileObj.pyAttachName.split(".").pop();
+      .then((content: any) => {
+        const extension = fileObj.pyAttachName.split('.').pop();
         fileDownload(content.data, fileObj.pyFileName, extension);
       })
       .catch(() => {});
-  }
-
-  function setNewFiles(arFiles) {
-    let index = 0;
-    for (const item of arFiles) {
-      if (!validateMaxSize(item, 5)) {
-        item.error = true;
-        item.meta = "File is too big. Max allowed size is 5MB.";
-      }
-      item.mimeType = item.type;
-      item.icon = getIconFromFileType(item.type);
-      item.ID = `${new Date().getTime()}I${index}`;
-      index+=1;
-    }
-    return arFiles;
-  }
-
-  function getFiles(arFiles: Array<any>) {
-    return setNewFiles(arFiles);
-  }
+  };
 
-  function getNewListUtilityItemProps({
-    att,
-    cancelFile,
-    downloadFile,
-    deleteFile,
-    removeFile
-  }) {
-    let actions;
-    if (att.progress && att.progress !== 100) {
-      actions = [
-        {
-          id: `Cancel-${att.ID}`,
-          text: "Cancel",
-          icon: "times",
-          onClick: cancelFile
-        }
-      ];
-    } else if (att.links) {
-      const isFile = att.type === "FILE";
-      const ID = att.ID.replace(/\s/gi, "");
-      const actionsMap = new Map([
-        [
-          "download",
-          {
-            id: `download-${ID}`,
-            text: isFile ? "Download" : "Open",
-            icon: isFile ? "download" : "open",
-            onClick: downloadFile
+  const deleteFile = useCallback(
+    file => {
+      setAnchorEl(null);
+      let attachmentsList: any[] = [];
+      let currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(valueRef), pConn.getContextName());
+
+      // If file to be deleted is the one added in previous stage i.e. for which a file instance is created in server
+      // no need to filter currentAttachmentList as we will get another entry of file in redux with delete & label
+      // eslint-disable-next-line no-unsafe-optional-chaining
+      if (value && value?.pxResults && +value?.pyCount > 0 && file.responseProps && file?.responseProps?.pzInsKey !== 'temp') {
+        const updatedAttachments = files.map(f => {
+          if (f.responseProps && f.responseProps.pzInsKey === file.responseProps.pzInsKey) {
+            return { ...f, delete: true, label: valueRef };
           }
-        ],
-        [
-          "delete",
-          {
-            id: `Delete-${ID}`,
-            text: "Delete",
-            icon: "trash",
-            onClick: deleteFile
-          }
-        ]
-      ]);
-      actions = [];
-      actionsMap.forEach((action, actionKey) => {
-        if (att.links[actionKey]) {
-          actions.push(action);
+          return f;
+        });
+
+        // updating the redux store to help form-handler in passing the data to delete the file from server
+        updateAttachmentState(pConn, getAttachmentKey(valueRef), [...updatedAttachments]);
+        setFiles(current => {
+          const newlyAddedFiles = current.filter(f => !!f.ID);
+          const filesPostDelete = current.filter(
+            f => f.responseProps?.pzInsKey !== 'temp' && f.responseProps?.pzInsKey !== file.responseProps?.pzInsKey
+          );
+          attachmentsList = [...filesPostDelete, ...newlyAddedFiles];
+          return attachmentsList;
+        });
+      } //  if the file being deleted is the added in this stage  i.e. whose data is not yet created in server
+      else {
+        // filter newly added files in this stage, later the updated current stage files will be added to redux once files state is updated in below setFiles()
+        currentAttachmentList = currentAttachmentList.filter(f => f.label !== valueRef);
+        setFiles(current => {
+          attachmentsList = current.filter(f => f.ID !== file.ID);
+          return attachmentsList;
+        });
+        updateAttachmentState(pConn, getAttachmentKey(valueRef), [...currentAttachmentList, ...attachmentsList]);
+        if (file.inProgress) {
+          // @ts-ignore - 3rd parameter "responseEncoding" should be optional
+          PCore.getAttachmentUtils().cancelRequest(file.ID, pConn.getContextName());
         }
+      }
+
+      setToggleUploadBegin(false);
+      setFilesWithError(prevFilesWithError => {
+        return prevFilesWithError.filter(f => f.ID !== file.ID);
       });
-    } else if (att.error) {
-      actions = [
-        {
-          id: `Remove-${att.ID}`,
-          text: "Remove",
-          icon: "trash",
-          onClick: removeFile
+    },
+    [pConn, value, valueRef, filesWithError]
+  );
+
+  const onUploadProgress = () => {};
+
+  const errorHandler = (isFetchCanceled, attachedFile) => {
+    return error => {
+      if (!isFetchCanceled(error)) {
+        let uploadFailMsg = pConn.getLocalizedValue('Something went wrong', '', '');
+        if (error.response && error.response.data && error.response.data.errorDetails) {
+          uploadFailMsg = pConn.getLocalizedValue(error.response.data.errorDetails[0].localizedValue, '', '');
         }
-      ];
-    }
-    return  {
-      id: att.ID,
-      visual: {
-        icon: getIconForAttachment(att),
-        progress: att.progress === 100 ? undefined: att.progress,
-      },
-      primary: {
-        type: att.type,
-        name: att.error ? att.fileName : att.name,
-        icon: "trash",
-        click: removeFile,
-      },
-      secondary: {
-        text: att.meta,
-        error: att.error
-      },
-      actions
+        setFiles(current => {
+          return current.map(f => {
+            if (f.ID === attachedFile.ID) {
+              f.props.meta = uploadFailMsg;
+              f.props.error = true;
+              f.props.onDelete = () => deleteFile(f);
+              f.props.icon = getIconFromFileType(f.type);
+              f.props.name = pConn.getLocalizedValue('Unable to upload file', '', '');
+              f.inProgress = false;
+              const fieldName = (pConn.getStateProps() as any).value;
+              const context = pConn.getContextName();
+              // set errors to property to block submit even on errors in file upload
+              PCore.getMessageManager().addMessages({
+                // @ts-ignore
+                messages: [
+                  {
+                    type: 'error',
+                    message: pConn.getLocalizedValue('Error with one or more files', '', '')
+                  }
+                ],
+                property: fieldName,
+                pageReference: pConn.getPageReference(),
+                context
+              });
+              delete f.props.progress;
+            }
+            return f;
+          });
+        });
+      }
+      throw error;
     };
   };
 
-  const onFileAdded = (event) => {
-   const addedFile = event.target.files[0];
-    setFile({
-      props: {
-        name: addedFile.name,
-        icon: getIconFromFileType(addedFile.type),
-      },
-      inProgress: true
-    });
-    const arFiles$ = getFiles(event.target.files);
-    const myFiles: any = Array.from(arFiles$);
-
-    const onUploadProgress = () => {};
+  const validateFileExtension = (fileObj, allowedExtensions) => {
+    if (!allowedExtensions) {
+      return true;
+    }
+    const allowedExtensionList = allowedExtensions
+      .toLowerCase()
+      .split(',')
+      .map(item => item.replaceAll('.', '').trim());
+    const extension = fileObj.name.split('.').pop().toLowerCase();
+    return allowedExtensionList.includes(extension);
+  };
 
-    const errorHandler = (isFetchCanceled) => {
-      return (error) => {
-        if (!isFetchCanceled(error)) {
-          let uploadFailMsg = pConn.getLocalizedValue('Something went wrong');
-          if (error.response && error.response.data && error.response.data.errorDetails) {
-            uploadFailMsg = pConn.getLocalizedValue(error.response.data.errorDetails[0].localizedValue);
-          }
-          myFiles[0].meta = uploadFailMsg;
-          myFiles[0].error = true;
-          myFiles[0].fileName = pConn.getLocalizedValue('Unable to upload file');
-          arFileList$ = myFiles.map((att) => {
-            return getNewListUtilityItemProps({
-              att,
-              downloadFile: null,
-              cancelFile: null,
-              deleteFile: null,
-              removeFile: null
-            });
-          });
-          setFile((current) => {
-            return {
-              ...current,
-              props: {
-                ...current.props,
-                arFileList$
-              },
-              inProgress: false,
-              attachmentUploaded: true,
-              showMenuIcon: false
-            };
-          });
-        }
-        throw error;
-      };
-    };
+  const clearFieldErrorMessages = () => {
+    const fieldName = (pConn.getStateProps() as any).value;
+    const context = pConn.getContextName();
+    // @ts-ignore
+    PCore.getMessageManager().clearMessages({
+      type: PCore.getConstants().MESSAGES.MESSAGES_TYPE_ERROR,
+      property: fieldName,
+      pageReference: pConn.getPageReference(),
+      context
+    });
+  };
 
-    PCore.getAttachmentUtils()
-      .uploadAttachment(
-        myFiles[0],
-        onUploadProgress,
-        errorHandler,
-        pConn.getContextName()
-      )
-      .then((fileRes) => {
-        let reqObj;
-        if (PCore.getPCoreVersion()?.includes('8.7')) {
-          reqObj = {
-            type: "File",
-            attachmentFieldName: valueRef,
-            category: categoryName,
-            ID: fileRes.ID
-          };
-          pConn.attachmentsInfo = reqObj;
-        } else {
-          reqObj = {
-            type: "File",
-            label: valueRef,
-            category: categoryName,
-            handle: fileRes.ID,
-            ID: fileRes.clientFileID
-          };
-          const currentAttachmentList = getCurrentAttachmentsList(pConn.getContextName()).filter(
-            (f) => f.label !== valueRef
-          );
-          PCore.getStateUtils().updateState(
-            pConn.getContextName(),
-            'attachmentsList',
-            [...currentAttachmentList, reqObj],
-            {
-              pageReference: 'context_data',
-              isArrayDeepMerge: false
-            }
-          );
+  const onFileAdded = event => {
+    let addedFiles = Array.from(event.target.files);
+    addedFiles = allowMultiple === 'true' ? addedFiles : [addedFiles[0]];
+    const maxAttachmentSize = PCore.getEnvironmentInfo().getMaxAttachmentSize() || '5';
+    const tempFilesToBeUploaded = [
+      ...addedFiles.map((f: any, index) => {
+        f.ID = `${new Date().getTime()}I${index}`;
+        f.inProgress = true;
+        f.props = {
+          type: f.type,
+          name: f.name,
+          icon: getIconFromFileType(f.type),
+          onDelete: () => deleteFile(f)
+        };
+        if (!validateMaxSize(f, maxAttachmentSize)) {
+          f.props.error = true;
+          f.props.meta = pConn.getLocalizedValue(`File is too big. Max allowed size is ${maxAttachmentSize}MB.`, '', '');
+        } else if (!validateFileExtension(f, extensions)) {
+          f.props.error = true;
+          f.props.meta = `${pConn.getLocalizedValue('File has invalid extension. Allowed extensions are:', '', '')} ${extensions.replaceAll(
+            '.',
+            ''
+          )}`;
         }
-        const fieldName = pConn.getStateProps().value;
-        const context = pConn.getContextName();
-
-        PCore.getMessageManager().clearMessages({
-          type: PCore.getConstants().MESSAGES.MESSAGES_TYPE_ERROR,
-          property: fieldName,
-          pageReference: pConn.getPageReference(),
-          context
-        });
-        myFiles[0].meta = "Uploaded Successfully";
-
-        arFileList$ = myFiles.map((att) => {
-          return getNewListUtilityItemProps({
-            att,
-            downloadFile: null,
-            cancelFile: null,
-            deleteFile: null,
-            removeFile: null
+        if (f.props.error) {
+          const fieldName = (pConn.getStateProps() as any).value;
+          const context = pConn.getContextName();
+          PCore.getMessageManager().addMessages({
+            // @ts-ignore
+            messages: [
+              {
+                type: 'error',
+                message: pConn.getLocalizedValue('Error with one or more files', '', '')
+              }
+            ],
+            property: fieldName,
+            pageReference: pConn.getPageReference(),
+            context
           });
-        });
-        setFile((current) => {
-          return {
-            ...current,
-            props: {
-              ...current.props,
-              arFileList$
-            },
-            inProgress: false,
-            attachmentUploaded: true,
-            showMenuIcon: false
-          };
-        });
+        }
+        return f;
       })
-
-      .catch(() => {
-        // just catching the rethrown error at uploadAttachment
-        // to handle Unhandled rejections
-      });
+    ];
+    const tempFilesWithError = tempFilesToBeUploaded.filter(f => f.props.error);
+    if (tempFilesWithError.length > 0) {
+      setFilesWithError(tempFilesWithError);
+    }
+    setFiles(current => (allowMultiple !== 'true' ? [...tempFilesToBeUploaded] : [...current, ...tempFilesToBeUploaded]));
+    setToggleUploadBegin(true);
   };
 
-  function _removeFileFromList(item: any, list) {
-    const arFileList = file.props ? file.props.arFileList$ : list;
-    const fileIndex = arFileList.findIndex(element => element?.id === item?.id);
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
-      if (value) {
-        pConn.attachmentsInfo = {
-          type: "File",
-          attachmentFieldName: valueRef,
-          delete: true
-        };
-      }
-      if (fileIndex > -1) { arFileList.splice(parseInt(fileIndex, 10), 1) };
-      setFile((current) => {
-        return {
-          ...current,
-          props: {
-            ...current.props,
-            arFileList
+  const uploadFiles = useCallback(() => {
+    const filesToBeUploaded = files
+      .filter(e => {
+        const isFileUploaded = e.props && e.props.progress === 100;
+        const fileHasError = e.props && e.props.error;
+        const isFileUploadedinLastStep = e.responseProps && e.responseProps.pzInsKey;
+        return !isFileUploaded && !fileHasError && !isFileUploadedinLastStep;
+      })
+      .map(f =>
+        window.PCore.getAttachmentUtils().uploadAttachment(
+          f,
+          () => {
+            onUploadProgress();
           },
-        };
-      });
-    } else {
-      const attachmentsList = [];
-      const currentAttachmentList = getCurrentAttachmentsList(pConn.getContextName()).filter(
-        (f) => f.label !== valueRef
-      );
-      if (value && value.pxResults && +value.pyCount > 0) {
-        const deletedFile = {
-          type: "File",
-          label: valueRef,
-          delete: true,
-          responseProps: {
-            pzInsKey: arFileList[fileIndex].id
+          isFetchCanceled => {
+            return errorHandler(isFetchCanceled, f);
           },
-        };
-        // updating the redux store to help form-handler in passing the data to delete the file from server
-        PCore.getStateUtils().updateState(
-          pConn.getContextName(),
-          'attachmentsList',
-          [...currentAttachmentList, deletedFile],
-          {
-            pageReference: 'context_data',
-            isArrayDeepMerge: false
-          }
-        );
-      } else {
-        PCore.getStateUtils().updateState(
-          pConn.getContextName(),
-          'attachmentsList',
-          [...currentAttachmentList, ...attachmentsList],
-          {
-            pageReference: 'context_data',
-            isArrayDeepMerge: false
+          pConn.getContextName()
+        )
+      );
+    Promise.allSettled(filesToBeUploaded)
+      .then((fileResponses: any) => {
+        fileResponses = fileResponses.filter(fr => fr.status !== 'rejected'); // in case of deleting an in progress file, promise gets cancelled but still enters then block
+        if (fileResponses.length > 0) {
+          setFiles(current => {
+            const tempFilesUploaded = [...current];
+            tempFilesUploaded.forEach(f => {
+              const index = fileResponses.findIndex((fr: any) => fr.value.clientFileID === f.ID);
+              if (index >= 0) {
+                f.props.meta = pConn.getLocalizedValue('Uploaded successfully', '', '');
+                f.props.progress = 100;
+                f.inProgress = false;
+                f.handle = fileResponses[index].value.ID;
+                f.label = valueRef;
+                f.category = categoryName;
+                f.responseProps = {
+                  pzInsKey: 'temp',
+                  pyAttachName: f.props.name
+                };
+              }
+            });
+            return tempFilesUploaded;
+          });
+
+          if (filesWithError.length === 0) {
+            clearFieldErrorMessages();
           }
-        );
-      }
-      if (fileIndex > -1) { arFileList.splice(parseInt(fileIndex, 10), 1) };
-      setFile((current) => {
-        return {
-          ...current,
-          props: {
-            ...current.props,
-            arFileList
-          },
-        };
+        }
+        setToggleUploadBegin(false);
+      })
+      .catch(error => {
+        // eslint-disable-next-line no-console
+        console.log(error);
+        setToggleUploadBegin(false);
       });
-    }
-  }
+  }, [files, filesWithError]);
 
   useEffect(() => {
-    if (value && value.pxResults && +value.pyCount > 0) {
-    fileTemp = buildFilePropsFromResponse(value.pxResults[0]);
-
-    if (fileTemp.responseProps) {
-      if (!pConn.attachmentsInfo) {
-        pConn.attachmentsInfo = {
-          type: "File",
-          attachmentFieldName: valueRef,
-          category: categoryName
-        };
-      }
+    if (toggleUploadBegin && files.length > 0) {
+      uploadFiles();
+    }
+  }, [toggleUploadBegin]);
 
-      if (fileTemp.responseProps.pzInsKey && !fileTemp.responseProps.pzInsKey.includes("temp")) {
-
-        fileTemp.props.type = fileTemp.responseProps.pyMimeFileExtension;
-        fileTemp.props.mimeType = fileTemp.responseProps.pyMimeFileExtension;
-        fileTemp.props.ID = fileTemp.responseProps.pzInsKey;
-        // create the actions for the "more" menu on the attachment
-        const arMenuList: Array<any> = [];
-        let oMenu: any = {};
-
-        oMenu.icon = "download";
-        oMenu.text = "Download";
-        oMenu.onClick = () => { _downloadFileFromList(value.pxResults[0])}
-        arMenuList.push(oMenu);
-        oMenu = {};
-        oMenu.icon = "trash";
-        oMenu.text = "Delete";
-        oMenu.onClick = () => { _removeFileFromList(arFileList$[0], arFileList$)}
-        arMenuList.push(oMenu);
-
-        arFileList$.push(getNewListUtilityItemProps({
-          att: fileTemp.props,
-          downloadFile: null,
-          cancelFile: null,
-          deleteFile: null,
-          removeFile: null
-        }));
-        arFileList$[0].actions = arMenuList;
-
-        setFile((current) => {
-          return {
-            ...current,
-            props: {
-              ...current.props,
-              arFileList$
-            },
-            inProgress: false,
-            attachmentUploaded: true,
-            showMenuIcon: true
-          };
-        });
-      }
+  useEffect(() => {
+    if (files.length > 0 && displayMode !== 'DISPLAY_ONLY') {
+      const currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(valueRef), pConn.getContextName());
+      // block duplicate files to redux store when added 1 after another to prevent multiple duplicates being added to the case on submit
+      const tempFiles = files.filter(f => currentAttachmentList.findIndex(fr => fr.ID === f.ID) === -1 && !f.inProgress && f.responseProps);
 
-      if (fileTemp) {
-        const currentAttachmentList = getCurrentAttachmentsList(pConn.getContextName());
-        const index = currentAttachmentList.findIndex(element => element.props.ID === fileTemp.props.ID);
-        let tempFiles: any = [];
-        if (index < 0) {
-          tempFiles = [fileTemp];
-        }
-        PCore.getStateUtils().updateState(
-          pConn.getContextName(),
-          'attachmentsList',
-          [...currentAttachmentList, ...tempFiles],
-          {
-            pageReference: 'context_data',
-            isArrayDeepMerge: false
-          }
-        );
-      }
+      const updatedAttList = [...currentAttachmentList, ...tempFiles];
+      updateAttachmentState(pConn, getAttachmentKey(valueRef), updatedAttList);
     }
+  }, [files]);
+
+  useEffect(() => {
+    if (filesWithError.length === 0) {
+      clearFieldErrorMessages();
     }
-    PCore.getPubSubUtils().subscribe(
-      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION,
-      resetAttachmentStoredState,
-      caseID
-    );
+  }, [filesWithError]);
+
+  useEffect(() => {
+    let tempUploadedFiles = getCurrentAttachmentsList(getAttachmentKey(valueRef), pConn.getContextName());
+    tempUploadedFiles = tempUploadedFiles.filter(f => f.label === valueRef);
+    setFiles(current => {
+      return [
+        ...current.map(f => {
+          return f.responseProps.pzInsKey && !f.responseProps.pzInsKey.includes('temp')
+            ? {
+                ...f,
+                props: {
+                  ...f.props,
+                  onDelete: () => deleteFile(f)
+                }
+              }
+            : { ...f };
+        }),
+        ...tempUploadedFiles
+      ];
+    });
+    PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, resetAttachmentStoredState, caseID);
     return () => {
       PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, caseID);
     };
   }, []);
 
-  let content = (
-    <div className='file-div'>
-        {file.inProgress && (<div className="progress-div"><CircularProgress /></div>)}
-        <div hidden={true} id="attachment-ID">{valueRef}</div>
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const content = (
+    <div style={{ marginBottom: '8px' }}>
+      <div className={`${disabled ? 'file-disabled' : ''} ${validatemessage === '' ? 'file-div' : 'file-div-error'}`}>
+        <div hidden={true} id='attachment-ID'>
+          {valueRef}
+        </div>
         <label htmlFor={valueRef}>
           <input
             style={{ display: 'none' }}
             id={valueRef}
             name='upload-photo'
             type='file'
+            multiple={allowMultiple === 'true'}
             required={required}
+            disabled={disabled}
             onChange={onFileAdded}
           />
-          <Button variant='outlined' color='primary' component="span">
-            Upload file
+          <Button style={{ textTransform: 'none' }} variant='outlined' color='primary' component='span'>
+            {allowMultiple === 'true' ? 'Upload files' : 'Upload a file'}
           </Button>
         </label>
+      </div>
     </div>
   );
 
-  if (file && file.attachmentUploaded && file.props.arFileList$ && file.props.arFileList$.length > 0) {
-    content = (
-      <div>
-         {file.showMenuIcon && (<SummaryList arItems$={file.props.arFileList$} menuIconOverrideAction$={_removeFileFromList}></SummaryList>)}
-         {!file.showMenuIcon && (<SummaryList menuIconOverride$='trash' arItems$={file.props.arFileList$} menuIconOverrideAction$={_removeFileFromList}></SummaryList>)}
-      </div>
-
-    );
-  }
+  const fileDisplay = (
+    <div>
+      {files &&
+        files.length > 0 &&
+        files.map((item, index) => {
+          return (
+            <div key={index} className='psdk-utility-card'>
+              <div className='psdk-utility-card-icon'>
+                {!item.inProgress && <img className='psdk-utility-card-svg-icon' src={srcImg} />}
+                {item.inProgress && (
+                  <div>
+                    <CircularProgress />
+                  </div>
+                )}
+              </div>
+              <div className='psdk-utility-card-main'>
+                <div className='psdk-utility-card-main-primary-label'>{item.props.name}</div>
+                {item.props.meta && <div style={{ color: item.props.error ? 'red' : undefined }}>{item.props.meta}</div>}
+              </div>
+              <div className='psdk-utility-action'>
+                {item.ID && (
+                  <button type='button' className='psdk-utility-button' aria-label='Delete Attachment' onClick={() => deleteFile(item)}>
+                    <img className='psdk-utility-card-action-svg-icon' src={deleteIcon} />
+                  </button>
+                )}
+                {!item.ID && (
+                  <div>
+                    <IconButton
+                      id='setting-button'
+                      aria-controls={open ? 'file-menu' : undefined}
+                      aria-expanded={open ? 'true' : undefined}
+                      aria-haspopup='true'
+                      onClick={handleClick}
+                    >
+                      <MoreVertIcon />
+                    </IconButton>
+                    <Menu style={{ marginTop: '3rem' }} id='file-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+                      <MenuItem
+                        style={{ fontSize: '14px' }}
+                        key='download'
+                        onClick={() => downloadFile(item.responseProps ? item.responseProps : {})}
+                      >
+                        Download
+                      </MenuItem>
+                      <MenuItem style={{ fontSize: '14px' }} key='delete' onClick={() => deleteFile(item)}>
+                        Delete
+                      </MenuItem>
+                    </Menu>
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+    </div>
+  );
 
   return (
     <div className='file-upload-container'>
       <span className={`label ${required ? 'file-label' : ''}`}>{label}</span>
-      <section>{content}</section>
+      {((files.length === 0 && allowMultiple !== 'true') || allowMultiple === 'true') && <section>{content}</section>}
+      {validatemessage !== '' ? <span className='file-error'>{validatemessage}</span> : ''}
+      {files && files.length > 0 && <section>{fileDisplay}</section>}
     </div>
   );
 }