Add JSDoc.

Add fallback catch to report upload.
Fix error popup not displaying error message in body of dialog for the csv upload dialogs.

app/src/components/attachments/FileUploadWithMeta.tsx

@@ -14,12 +14,9 @@ import { useFormikContext } from 'formik';
 export const FileUploadWithMeta = () => {
   const { handleSubmit, setFieldValue, setFieldError, values, errors } = useFormikContext<IReportMetaForm>();
 
-  const onStatus = (status: UploadFileStatus) => {
-    console.log(status);
-  };
-
   const onFile = (file: File | null) => {
     setFieldValue('attachmentFile', file);
+    setFieldError('attachmentFile', '');
   };
 
   const onError = (error: string) => {
@@ -37,7 +34,6 @@ export const FileUploadWithMeta = () => {
         </Typography>
         <FileUploadSingleItem
           file={values.attachmentFile}
-          onStatus={onStatus}
           onFile={onFile}
           onError={onError}
           DropZoneProps={{

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

@@ -11,10 +11,40 @@ import { IUploadHandler } from 'components/file-upload/FileUploadItem';
 import { IComponentDialogProps } from '../ComponentDialog';
 
 interface IFileUploadDialogProps extends IComponentDialogProps {
+  /**
+   * Set to `true` to open the dialog, `false` to close the dialog.
+   *
+   * @type {boolean}
+   * @memberof IFileUploadDialogProps
+   */
   open: boolean;
+  /**
+   * The title of the dialog.
+   *
+   * @type {string}
+   * @memberof IFileUploadDialogProps
+   */
   dialogTitle: string;
+  /**
+   * Callback fired when a file is added.
+   *
+   * @memberof IReportFileUploadDialogProps
+   */
   uploadHandler: IUploadHandler;
+  /**
+   * Callback fired when the dialog is closed.
+   *
+   * This function does not need to handle any errors, as the `FileUpload` component handles errors internally.
+   *
+   * @memberof IFileUploadDialogProps
+   */
   onClose: () => void;
+  /**
+   * Drop zone configuration properties.
+   *
+   * @type {IDropZoneConfigProps}
+   * @memberof IFileUploadDialogProps
+   */
   dropZoneProps?: IDropZoneConfigProps;
 }
 

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

@@ -32,6 +32,8 @@ export interface IReportFileUploadDialogProps {
   /**
    * Callback fired if the dialog is submitted (user clicks 'Save' or 'Submit', etc).
    *
+   * The function should handle any errors thrown.
+   *
    * @memberof IReportFileUploadDialogProps
    */
   onSubmit: (reportMeta: IReportMetaForm) => Promise<void>;
@@ -61,9 +63,12 @@ export const ReportFileUploadDialog: React.FC<IReportFileUploadDialogProps> = (p
   const onSubmit = (values: IReportMetaForm) => {
     setIsSubmitting(true);
 
-    props.onSubmit(values).finally(() => {
-      setIsSubmitting(false);
-    });
+    props
+      .onSubmit(values)
+      .catch() // Errors should be handled in the onSubmit function, squash errors here to prevent unhandled errors
+      .finally(() => {
+        setIsSubmitting(false);
+      });
   };
 
   if (!props.open) {

app/src/features/surveys/animals/list/components/AnimalListToolbar.tsx

@@ -7,6 +7,7 @@ import Typography from '@mui/material/Typography';
 import { FileUploadSingleItemDialog } from 'components/dialog/attachments/FileUploadSingleItemDialog';
 import { SurveyAnimalsI18N } from 'constants/i18n';
 import { DialogContext } from 'contexts/dialogContext';
+import { APIError } from 'hooks/api/useAxios';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import { useSurveyContext } from 'hooks/useContext';
 import { useContext, useState } from 'react';
@@ -37,11 +38,14 @@ export const AnimalListToolbar = (props: IAnimaListToolbarProps) => {
     try {
       await biohubApi.survey.importCrittersFromCsv(file, surveyContext.projectId, surveyContext.surveyId);
       surveyContext.critterDataLoader.refresh(surveyContext.projectId, surveyContext.surveyId);
-    } catch (err: any) {
+    } catch (error) {
+      const apiError = error as APIError;
+
       dialogContext.setErrorDialog({
         dialogTitle: SurveyAnimalsI18N.importRecordsErrorDialogTitle,
         dialogText: SurveyAnimalsI18N.importRecordsErrorDialogText,
-        dialogErrorDetails: [err.message],
+        dialogError: apiError.message,
+        dialogErrorDetails: apiError.errors,
         open: true,
         onClose: () => {
           dialogContext.setErrorDialog({ open: false });

app/src/features/surveys/observations/observations-table/import-obsevations/ImportObservationsButton.tsx

@@ -6,6 +6,7 @@ import { FileUploadSingleItemDialog } from 'components/dialog/attachments/FileUp
 import { ObservationsTableI18N } from 'constants/i18n';
 import { DialogContext } from 'contexts/dialogContext';
 import { SurveyContext } from 'contexts/surveyContext';
+import { APIError } from 'hooks/api/useAxios';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import { useContext, useState } from 'react';
 
@@ -89,11 +90,14 @@ export const ImportObservationsButton = (props: IImportObservationsButtonProps)
       });
 
       onSuccess?.();
-    } catch (apiError: any) {
+    } catch (error) {
+      const apiError = error as APIError;
+
       dialogContext.setErrorDialog({
         dialogTitle: ObservationsTableI18N.importRecordsErrorDialogTitle,
         dialogText: ObservationsTableI18N.importRecordsErrorDialogText,
-        dialogErrorDetails: [apiError.message],
+        dialogError: apiError.message,
+        dialogErrorDetails: apiError.errors,
         open: true,
         onClose: () => {
           dialogContext.setErrorDialog({ open: false });

app/src/features/surveys/observations/sampling-sites/components/ImportObservationsButton.tsx

@@ -4,6 +4,7 @@ import { FileUploadSingleItemDialog } from 'components/dialog/attachments/FileUp
 import { ObservationsTableI18N } from 'constants/i18n';
 import { DialogContext } from 'contexts/dialogContext';
 import { SurveyContext } from 'contexts/surveyContext';
+import { APIError } from 'hooks/api/useAxios';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import { useContext, useState } from 'react';
 
@@ -106,11 +107,14 @@ export const ImportObservationsButton = (props: IImportObservationsButtonProps)
       });
 
       onSuccess?.();
-    } catch (apiError: any) {
+    } catch (error) {
+      const apiError = error as APIError;
+
       dialogContext.setErrorDialog({
         dialogTitle: ObservationsTableI18N.importRecordsErrorDialogTitle,
         dialogText: ObservationsTableI18N.importRecordsErrorDialogText,
-        dialogErrorDetails: [apiError.message],
+        dialogError: apiError.message,
+        dialogErrorDetails: apiError.errors,
         open: true,
         onClose: () => {
           dialogContext.setErrorDialog({ open: false });