SIMSBIOHUB-614: Fix file upload error handling.

app/src/components/attachments/FileUploadWithMeta.tsx

@@ -1,84 +1,52 @@
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import ReportMetaForm, { IReportMetaForm } from 'components/attachments/ReportMetaForm';
-import FileUpload, { IReplaceHandler } from 'components/file-upload/FileUpload';
-import {
-  IFileHandler,
-  IOnUploadSuccess,
-  IUploadHandler,
-  UploadFileStatus
-} from 'components/file-upload/FileUploadItem';
-import { AttachmentType, AttachmentTypeFileExtensions } from 'constants/attachments';
+import { UploadFileStatus } from 'components/file-upload/FileUploadItem';
+import { FileUploadSingleItem } from 'components/file-upload/FileUploadSingleItem';
+import { AttachmentTypeFileExtensions } from 'constants/attachments';
 import { useFormikContext } from 'formik';
-import React from 'react';
 
-export interface IFileUploadWithMetaProps {
-  attachmentType: AttachmentType.REPORT | AttachmentType.KEYX | AttachmentType.CFG | AttachmentType.OTHER;
-  uploadHandler: IUploadHandler;
-  fileHandler?: IFileHandler;
-  onSuccess?: IOnUploadSuccess;
-}
+export const FileUploadWithMeta = () => {
+  const { handleSubmit, setFieldValue, setFieldError, values, errors } = useFormikContext<IReportMetaForm>();
 
-export const FileUploadWithMeta: React.FC<IFileUploadWithMetaProps> = (props) => {
-  const { handleSubmit, setFieldValue, errors } = useFormikContext<IReportMetaForm>();
+  const onStatus = (status: UploadFileStatus) => {
+    console.log(status);
+  };
 
-  const fileHandler: IFileHandler = (file) => {
+  const onFile = (file: File | null) => {
     setFieldValue('attachmentFile', file);
-
-    props.fileHandler?.(file);
   };
 
-  const replaceHandler: IReplaceHandler = () => {
-    setFieldValue('attachmentFile', null);
+  const onError = (error: string) => {
+    setFieldError('attachmentFile', error);
   };
 
   return (
     <form onSubmit={handleSubmit}>
-      {props.attachmentType === AttachmentType.REPORT && (
-        <Box mb={3}>
-          <ReportMetaForm />
-        </Box>
-      )}
-      {props.attachmentType === AttachmentType.REPORT && (
-        <Box component="fieldset">
-          <Typography component="legend" variant="body1" id="report_upload">
-            Attach File
-          </Typography>
-          <FileUpload
-            uploadHandler={props.uploadHandler}
-            fileHandler={fileHandler}
-            onReplace={replaceHandler}
-            onSuccess={props.onSuccess}
-            dropZoneProps={{
-              maxNumFiles: 1,
-              multiple: false,
-              acceptedFileExtensions: AttachmentTypeFileExtensions.REPORT
-            }}
-            status={UploadFileStatus.STAGED}
-            replace={true}
-          />
-          {errors?.attachmentFile && (
-            <Box>
-              {/* TODO is errors.attachmentFile correct here? (added `as string` to appease compile warning) */}
-              <Typography style={{ fontSize: '12px', color: '#f44336' }}>{errors.attachmentFile as string}</Typography>
-            </Box>
-          )}
-        </Box>
-      )}
-      {props.attachmentType === AttachmentType.KEYX && (
-        <FileUpload
-          uploadHandler={props.uploadHandler}
-          fileHandler={fileHandler}
-          onSuccess={props.onSuccess}
-          dropZoneProps={{
-            acceptedFileExtensions: AttachmentTypeFileExtensions.KEYX
+      <Box mb={3}>
+        <ReportMetaForm />
+      </Box>
+      <Box component="fieldset">
+        <Typography component="legend" variant="body1" id="report_upload">
+          Attach File
+        </Typography>
+        <FileUploadSingleItem
+          file={values.attachmentFile}
+          onStatus={onStatus}
+          onFile={onFile}
+          onError={onError}
+          DropZoneProps={{
+            acceptedFileExtensions: AttachmentTypeFileExtensions.REPORT
           }}
-          enableErrorDetails={true}
+          status={UploadFileStatus.STAGED}
         />
-      )}
-      {props.attachmentType === AttachmentType.OTHER && (
-        <FileUpload uploadHandler={props.uploadHandler} onSuccess={props.onSuccess} />
-      )}
+        {errors?.attachmentFile && (
+          <Box>
+            {/* TODO is errors.attachmentFile correct here? (added `as string` to appease compile warning) */}
+            <Typography style={{ fontSize: '12px', color: '#f44336' }}>{errors.attachmentFile as string}</Typography>
+          </Box>
+        )}
+      </Box>
     </form>
   );
 };

app/src/components/dialog/attachments/FileUploadDialog.tsx

@@ -0,0 +1,55 @@
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import useTheme from '@mui/material/styles/useTheme';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { IDropZoneConfigProps } from 'components/file-upload/DropZone';
+import FileUpload from 'components/file-upload/FileUpload';
+import { IUploadHandler } from 'components/file-upload/FileUploadItem';
+import { IComponentDialogProps } from '../ComponentDialog';
+
+interface IFileUploadDialogProps extends IComponentDialogProps {
+  open: boolean;
+  dialogTitle: string;
+  uploadHandler: IUploadHandler;
+  onClose: () => void;
+  dropZoneProps?: IDropZoneConfigProps;
+}
+
+/**
+ *
+ *
+ * @param {IFileUploadDialogProps} props
+ * @return {*}
+ */
+export const FileUploadDialog = (props: IFileUploadDialogProps) => {
+  const { open, dialogTitle, uploadHandler, onClose, dropZoneProps } = props;
+
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <Dialog
+      fullScreen={fullScreen}
+      maxWidth="xl"
+      open={open}
+      aria-labelledby="file-upload-dialog-title"
+      aria-describedby="file-upload-dialog-description">
+      <DialogTitle id="file-upload-dialog-title">{dialogTitle}</DialogTitle>
+      <DialogContent>
+        <FileUpload uploadHandler={uploadHandler} dropZoneProps={dropZoneProps} />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="primary" variant="outlined">
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

app/src/components/dialog/attachments/FileUploadSingleItemDialog.tsx

@@ -0,0 +1,101 @@
+import { LoadingButton } from '@mui/lab';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import useTheme from '@mui/material/styles/useTheme';
+import Typography from '@mui/material/Typography';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { IDropZoneConfigProps } from 'components/file-upload/DropZone';
+import { UploadFileStatus } from 'components/file-upload/FileUploadItem';
+import { FileUploadSingleItem } from 'components/file-upload/FileUploadSingleItem';
+import { useEffect, useState } from 'react';
+
+interface IFileUploadSingleItemDialog {
+  open: boolean;
+  dialogTitle: string;
+  uploadButtonLabel: string;
+  onUpload: (file: File) => Promise<void>;
+  onClose?: () => void;
+  dropZoneProps: Pick<IDropZoneConfigProps, 'acceptedFileExtensions' | 'maxFileSize'>;
+}
+
+/**
+ *
+ *
+ * @param {IFileUploadSingleItemDialog} props
+ * @return {*}
+ */
+export const FileUploadSingleItemDialog = (props: IFileUploadSingleItemDialog) => {
+  const { open, dialogTitle, uploadButtonLabel, onUpload, onClose, dropZoneProps } = props;
+
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const [currentFile, setCurrentFile] = useState<File | null>(null);
+  const [status, setStatus] = useState<UploadFileStatus>(UploadFileStatus.STAGED);
+  const [error, setError] = useState<string>('');
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+
+  const isDisabled = !currentFile;
+
+  const handleUpload = () => {
+    if (!currentFile) {
+      return;
+    }
+
+    setIsUploading(true);
+    onUpload(currentFile).finally(() => setIsUploading(false));
+  };
+
+  useEffect(() => {
+    setCurrentFile(null);
+  }, [open]);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <Dialog
+      fullScreen={fullScreen}
+      maxWidth="xl"
+      open={open}
+      aria-labelledby="file-upload-dialog-title"
+      aria-describedby="file-upload-dialog-description">
+      <DialogTitle id="file-upload-dialog-title">{dialogTitle}</DialogTitle>
+      <DialogContent>
+        <FileUploadSingleItem
+          file={currentFile}
+          status={status}
+          onStatus={(status) => setStatus(status)}
+          onFile={(file) => {
+            setCurrentFile(file);
+            setError('');
+          }}
+          onError={(error) => setError(error)}
+          onCancel={() => {}}
+          DropZoneProps={dropZoneProps}
+        />
+        <Typography variant="body2" color="error">
+          {error}
+        </Typography>
+      </DialogContent>
+      <DialogActions>
+        <LoadingButton
+          loading={isUploading}
+          disabled={isDisabled}
+          onClick={() => handleUpload()}
+          color="primary"
+          variant="contained"
+          autoFocus>
+          {uploadButtonLabel}
+        </LoadingButton>
+        <Button onClick={onClose} color="primary" variant="outlined" disabled={isUploading}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};