diff --git a/api/src/services/import-services/import-csv.test.ts b/api/src/services/import-services/import-csv.test.ts
index 66955e21ee..81a957e429 100644
--- a/api/src/services/import-services/import-csv.test.ts
+++ b/api/src/services/import-services/import-csv.test.ts
@@ -26,11 +26,13 @@ describe('importCSV', () => {
 
     const getWorksheetStub = sinon.stub(worksheetUtils, 'getDefaultWorksheet').returns(mockWorksheet);
     const validateCsvFileStub = sinon.stub(worksheetUtils, 'validateCsvFile').returns(true);
+    const getWorksheetRowsStub = sinon.stub(worksheetUtils, 'getWorksheetRowObjects').returns([{ ID: '1' }]);
 
     const data = await importCSV(mockCsv, importer);
 
     expect(getWorksheetStub).to.have.been.called.calledOnceWithExactly(worksheetUtils.constructXLSXWorkbook(mockCsv));
     expect(validateCsvFileStub).to.have.been.called.calledOnceWithExactly(mockWorksheet, importer.columnValidator);
+    expect(getWorksheetRowsStub).to.have.been.called.calledOnceWithExactly(mockWorksheet);
     expect(importer.insert).to.have.been.called.calledOnceWithExactly(true);
     expect(data).to.be.true;
   });
@@ -45,6 +47,7 @@ describe('importCSV', () => {
     };
 
     sinon.stub(worksheetUtils, 'validateCsvFile').returns(false);
+    sinon.stub(worksheetUtils, 'getWorksheetRowObjects').returns([{ ID: '1' }]);
 
     try {
       await importCSV(mockCsv, importer);
@@ -78,16 +81,41 @@ describe('importCSV', () => {
 
     sinon.stub(worksheetUtils, 'getDefaultWorksheet').returns(mockWorksheet);
     sinon.stub(worksheetUtils, 'validateCsvFile').returns(true);
+    sinon.stub(worksheetUtils, 'getWorksheetRowObjects').returns([{ BAD_ID: '1' }]);
 
     try {
       await importCSV(mockCsv, importer);
       expect.fail();
     } catch (err: any) {
-      expect(importer.validateRows).to.have.been.calledOnceWithExactly([], mockWorksheet);
-      expect(err.message).to.be.eql(`Failed to import Critter CSV. Column data validator failed.`);
+      expect(importer.validateRows).to.have.been.calledOnceWithExactly([{ BAD_ID: '1' }], mockWorksheet);
+      expect(err.message).to.be.eql(`Cell validator failed. Cells have invalid reference values.`);
       expect(err.errors[0]).to.be.eql({
         csv_row_errors: mockValidation.error.issues
       });
     }
   });
+
+  it('should throw error if CSV contains no rows', async () => {
+    const mockCsv = new MediaFile('file', 'file', Buffer.from(''));
+    const mockWorksheet = {};
+    const mockValidation = { success: false, error: { issues: [{ row: 1, message: 'invalidated' }] } };
+
+    const importer: CSVImportStrategy<any> = {
+      columnValidator: { ID: { type: 'string' } },
+      validateRows: sinon.stub().returns(mockValidation),
+      insert: sinon.stub().resolves(true)
+    };
+
+    sinon.stub(worksheetUtils, 'getDefaultWorksheet').returns(mockWorksheet);
+    sinon.stub(worksheetUtils, 'validateCsvFile').returns(true);
+    sinon.stub(worksheetUtils, 'getWorksheetRowObjects').returns([]);
+
+    try {
+      await importCSV(mockCsv, importer);
+      expect.fail();
+    } catch (err: any) {
+      expect(importer.validateRows).to.not.have.been.called;
+      expect(err.message).to.be.eql(`Row validator failed. No rows found in the CSV file.`);
+    }
+  });
 });
diff --git a/api/src/services/import-services/import-csv.ts b/api/src/services/import-services/import-csv.ts
index 6cee607e8b..3fbcb9313e 100644
--- a/api/src/services/import-services/import-csv.ts
+++ b/api/src/services/import-services/import-csv.ts
@@ -49,13 +49,17 @@ export const importCSV = async <ValidatedRow, InsertReturn>(
   // Convert the worksheet into an array of records
   const worksheetRows = getWorksheetRowObjects(worksheet);
 
+  if (!worksheetRows.length) {
+    throw new ApiGeneralError(`Row validator failed. No rows found in the CSV file.`);
+  }
+
   // Validate the CSV rows with reference data
   const validation = await importer.validateRows(worksheetRows, worksheet);
 
   // Throw error is row validation failed and inject validation errors
   // The validation errors can be either custom (Validation) or Zod (SafeParseReturn)
   if (!validation.success) {
-    throw new ApiGeneralError(`Failed to import Critter CSV. Column data validator failed.`, [
+    throw new ApiGeneralError(`Cell validator failed. Cells have invalid reference values.`, [
       { csv_row_errors: validation.error.issues },
       'importCSV->_validate->_validateRows'
     ]);
diff --git a/api/src/utils/logger.test.ts b/api/src/utils/logger.test.ts
index 1fc7585831..e1c83987a6 100644
--- a/api/src/utils/logger.test.ts
+++ b/api/src/utils/logger.test.ts
@@ -27,7 +27,9 @@ describe('logger', () => {
     });
 
     it('sets the log level for the console transport', () => {
+      //const myLogger1 = require('./logger').getLogger('myLoggerA');
       const myLogger1 = getLogger('myLoggerA');
+
       expect(myLogger1.transports[1].level).to.equal('info');
 
       setLogLevel('debug');
diff --git a/api/src/utils/logger.ts b/api/src/utils/logger.ts
index cefe86ba19..8377cef755 100644
--- a/api/src/utils/logger.ts
+++ b/api/src/utils/logger.ts
@@ -75,7 +75,15 @@ export const getLogger = function (logLabel: string) {
         })(),
         winston.format.timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }),
         winston.format.prettyPrint({ colorize: false, depth: 10 })
-      )
+      ),
+      options: {
+        // https://nodejs.org/api/fs.html#file-system-flags
+        // Open file for reading and appending. The file is created if it does not exist.
+        flags: 'a+',
+        // https://nodejs.org/api/fs.html#fs_fs_createwritestream_path_options
+        // Set the file mode to be readable and writable by all users.
+        mode: 0o666
+      }
     })
   );
 
diff --git a/app/src/components/file-upload/FileUploadItem.tsx b/app/src/components/file-upload/FileUploadItem.tsx
index 39ac6e8dcc..8a293edf08 100644
--- a/app/src/components/file-upload/FileUploadItem.tsx
+++ b/app/src/components/file-upload/FileUploadItem.tsx
@@ -1,18 +1,11 @@
-import { mdiFileOutline } from '@mdi/js';
-import Icon from '@mdi/react';
-import Box from '@mui/material/Box';
-import { grey } from '@mui/material/colors';
-import ListItem from '@mui/material/ListItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import axios, { AxiosProgressEvent, CancelTokenSource } from 'axios';
-import FileUploadItemErrorDetails from 'components/file-upload/FileUploadItemErrorDetails';
 import FileUploadItemSubtext from 'components/file-upload/FileUploadItemSubtext';
 import { APIError } from 'hooks/api/useAxios';
 import useIsMounted from 'hooks/useIsMounted';
 import React, { useCallback, useEffect, useState } from 'react';
 import { v4 } from 'uuid';
 import FileUploadItemActionButton from './FileUploadItemActionButton';
+import { FileUploadItemContent } from './FileUploadItemContent';
 import FileUploadItemProgressBar from './FileUploadItemProgressBar';
 
 export enum UploadFileStatus {
@@ -283,56 +276,18 @@ const FileUploadItem = (props: IFileUploadItemProps) => {
   }, [initiateCancel, isSafeToCancel, props]);
 
   return (
-    <ListItem
-      key={file.name}
-      secondaryAction={<MemoizedActionButton status={status} onCancel={() => setInitiateCancel(true)} />}
-      sx={{
-        flexWrap: 'wrap',
-        borderStyle: 'solid',
-        borderWidth: '1px',
-        borderRadius: '6px',
-        background: grey[100],
-        borderColor: grey[300],
-        '& + li': {
-          mt: 1
-        },
-        '& .MuiListItemSecondaryAction-root': {
-          top: '36px'
-        },
-        '&:last-child': {
-          borderBottomStyle: 'solid',
-          borderBottomWidth: '1px',
-          borderBottomColor: grey[300]
-        }
-      }}>
-      <ListItemIcon>
-        <Icon path={mdiFileOutline} size={1.25} style={error ? { color: 'error.main' } : { color: 'text.secondary' }} />
-      </ListItemIcon>
-      <ListItemText
-        primary={file.name}
-        secondary={<Subtext file={file} status={status} progress={progress} error={error} />}
-        sx={{
-          '& .MuiListItemText-primary': {
-            fontWeight: 700
-          }
-        }}></ListItemText>
-
-      <Box
-        sx={{
-          ml: 5,
-          width: '100%',
-          '& .MuiLinearProgress-root': {
-            mb: 1
-          }
-        }}>
-        <MemoizedProgressBar status={status} progress={progress} />
-      </Box>
-      {props.enableErrorDetails && (
-        <Box sx={{ mt: 1, ml: 5, width: '100%' }}>
-          <FileUploadItemErrorDetails error={error} errorDetails={errorDetails} />
-        </Box>
-      )}
-    </ListItem>
+    <FileUploadItemContent
+      file={file}
+      status={status}
+      progress={progress}
+      error={error}
+      errorDetails={errorDetails}
+      enableErrorDetails={props.enableErrorDetails}
+      onCancel={() => setInitiateCancel(true)}
+      SubtextComponent={Subtext}
+      ActionButtonComponent={MemoizedActionButton as any}
+      ProgressBarComponent={MemoizedProgressBar as any}
+    />
   );
 };
 
diff --git a/app/src/components/file-upload/FileUploadItemContent.tsx b/app/src/components/file-upload/FileUploadItemContent.tsx
new file mode 100644
index 0000000000..93a002d221
--- /dev/null
+++ b/app/src/components/file-upload/FileUploadItemContent.tsx
@@ -0,0 +1,110 @@
+import { mdiFileOutline } from '@mdi/js';
+import Icon from '@mdi/react';
+import Box from '@mui/material/Box';
+import { grey } from '@mui/material/colors';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import FileUploadItemErrorDetails from 'components/file-upload/FileUploadItemErrorDetails';
+import { IFileUploadItemProps, UploadFileStatus } from './FileUploadItem';
+import FileUploadItemActionButton from './FileUploadItemActionButton';
+import FileUploadItemProgressBar from './FileUploadItemProgressBar';
+import FileUploadItemSubtext from './FileUploadItemSubtext';
+
+type FileUploadItemContentProps = Omit<IFileUploadItemProps, 'uploadHandler' | 'onSuccess' | 'fileHandler'> & {
+  /**
+   * The file upload status.
+   *
+   * @type {UploadFileStatus}
+   * @memberof FileUploadItemContentProps
+   */
+  status: UploadFileStatus;
+  /**
+   * The progress of the file upload.
+   *
+   * @type {number}
+   * @memberof FileUploadItemContentProps
+   */
+  progress: number;
+  /**
+   * Additional error details.
+   *
+   * @type {Array<{ _id: string; message: string }>}
+   * @memberof FileUploadItemContentProps
+   */
+  errorDetails?: Array<{ _id: string; message: string }>;
+};
+
+/**
+ * File upload item content. The UI layout of a file upload item.
+ *
+ * @param {FileUploadItemContentProps} props
+ * @returns {*}
+ */
+export const FileUploadItemContent = (props: FileUploadItemContentProps) => {
+  /**
+   * Sensible defaults for the subtext, action button, and progress bar components.
+   *
+   **/
+  const Subtext = props.SubtextComponent ?? FileUploadItemSubtext;
+  const ActionButton = props.ActionButtonComponent ?? FileUploadItemActionButton;
+  const ProgressBar = props.ProgressBarComponent ?? FileUploadItemProgressBar;
+
+  return (
+    <ListItem
+      key={props.file.name}
+      secondaryAction={<ActionButton status={props.status} onCancel={props.onCancel} />}
+      sx={{
+        flexWrap: 'wrap',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderRadius: '6px',
+        background: grey[100],
+        borderColor: grey[300],
+        '& + li': {
+          mt: 1
+        },
+        '& .MuiListItemSecondaryAction-root': {
+          top: '36px'
+        },
+        '&:last-child': {
+          borderBottomStyle: 'solid',
+          borderBottomWidth: '1px',
+          borderBottomColor: grey[300]
+        }
+      }}>
+      <ListItemIcon>
+        <Icon
+          path={mdiFileOutline}
+          size={1.25}
+          style={props.error ? { color: 'error.main' } : { color: 'text.secondary' }}
+        />
+      </ListItemIcon>
+      <ListItemText
+        primary={props.file.name}
+        secondary={<Subtext file={props.file} status={props.status} progress={props.progress} error={props.error} />}
+        sx={{
+          '& .MuiListItemText-primary': {
+            fontWeight: 700
+          }
+        }}
+      />
+
+      <Box
+        sx={{
+          ml: 5,
+          width: '100%',
+          '& .MuiLinearProgress-root': {
+            mb: 1
+          }
+        }}>
+        <ProgressBar status={props.status} progress={props.progress} />
+      </Box>
+      {props.enableErrorDetails && (
+        <Box sx={{ mt: 1, ml: 5, width: '100%' }}>
+          <FileUploadItemErrorDetails error={props.error} errorDetails={props.errorDetails} />
+        </Box>
+      )}
+    </ListItem>
+  );
+};
diff --git a/app/src/components/file-upload/FileUploadSingleItem.tsx b/app/src/components/file-upload/FileUploadSingleItem.tsx
new file mode 100644
index 0000000000..5b6060e7ca
--- /dev/null
+++ b/app/src/components/file-upload/FileUploadSingleItem.tsx
@@ -0,0 +1,133 @@
+import { grey } from '@mui/material/colors';
+import { Box } from '@mui/system';
+import DropZone, { IDropZoneConfigProps } from 'components/file-upload/DropZone';
+import { UploadFileStatus } from 'components/file-upload/FileUploadItem';
+import { FileUploadItemContent } from 'components/file-upload/FileUploadItemContent';
+import { FileRejection } from 'react-dropzone';
+
+type FileUploadSingleItemProps = {
+  /**
+   * The uploaded file via the dropzone.
+   *
+   * @type {File | null}
+   * @memberof FileUploadSingleItemProps
+   */
+  file: File | null;
+  /**
+   * The status of the file upload.
+   *
+   * @type {UploadFileStatus}
+   * @memberof FileUploadSingleItemProps
+   */
+  status: UploadFileStatus;
+  /**
+   * The error message of the file upload.
+   *
+   * @type {string}
+   * @memberof FileUploadSingleItemProps
+   */
+  error?: string;
+  /**
+   * The progress of the file upload.
+   *
+   * @type {number}
+   * @memberof FileUploadSingleItemProps
+   */
+  progress?: number;
+  /**
+   * Callback when file is uploaded via the dropzone.
+   *
+   * @type {(file: File | null) => void}
+   * @memberof FileUploadSingleItemProps
+   */
+  onFile: (file: File | null) => void;
+  /**
+   * Optional callback to subscribe to the internal status changes.
+   *
+   * @type {(status: UploadFileStatus) => void}
+   * @memberof FileUploadSingleItemProps
+   */
+  onStatus?: (status: UploadFileStatus) => void;
+  /**
+   * Optional callback to subscribe to the internal error changes.
+   *
+   * @type {(error: string) => void}
+   * @memberof FileUploadSingleItemProps
+   */
+  onError?: (error: string) => void;
+  /**
+   * Optional callback when the user cancels the upload.
+   *
+   * @type {() => void}
+   * @memberof FileUploadSingleItemProps
+   */
+  onCancel?: () => void;
+  /**
+   * Subset of Dropzone configuration props.
+   *
+   * @type {Pick<IDropZoneConfigProps, 'acceptedFileExtensions' | 'maxFileSize'>}
+   * @memberof FileUploadSingleItemProps
+   */
+  DropZoneProps?: Pick<IDropZoneConfigProps, 'acceptedFileExtensions' | 'maxFileSize'>;
+};
+
+/**
+ * `FileUploadSingleItem` a stateless component with full control of the file upload process via props.
+ * Implements multiple callback functions to explictly handle events during the file upload.
+ *
+ * Note: This is different than the `FileUpload` component where the state is handled internally, and
+ * supports multiple file uploads.
+ *
+ * @param {FileUploadSingleItemProps} props
+ * @returns {*}
+ */
+export const FileUploadSingleItem = (props: FileUploadSingleItemProps) => {
+  return (
+    <>
+      {props.file ? (
+        <FileUploadItemContent
+          file={props.file}
+          error={props.error}
+          status={props.status}
+          onCancel={() => {
+            props.onStatus?.(UploadFileStatus.PENDING);
+            props.onFile(null);
+            props.onCancel?.();
+          }}
+          progress={props.progress ?? 0}
+        />
+      ) : (
+        <Box
+          sx={{
+            clear: 'both',
+            borderRadius: '6px',
+            borderStyle: 'dashed',
+            borderWidth: '2px',
+            borderColor: grey[500],
+            transition: 'all ease-out 0.2s',
+            '&:hover, &:focus': {
+              borderColor: 'primary.main',
+              backgroundColor: grey[100]
+            },
+            cursor: 'pointer'
+          }}>
+          <DropZone
+            onFiles={(acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
+              if (acceptedFiles.length) {
+                props.onStatus?.(UploadFileStatus.STAGED);
+                props.onFile(acceptedFiles[0]);
+              } else {
+                props.onStatus?.(UploadFileStatus.FAILED);
+                props.onFile(null);
+                props.onError?.(rejectedFiles[0].errors[0].message);
+              }
+            }}
+            maxNumFiles={1}
+            multiple={false}
+            {...props.DropZoneProps}
+          />
+        </Box>
+      )}
+    </>
+  );
+};
diff --git a/app/src/contexts/dialogContext.tsx b/app/src/contexts/dialogContext.tsx
index 13a855f1f9..714117fcc7 100644
--- a/app/src/contexts/dialogContext.tsx
+++ b/app/src/contexts/dialogContext.tsx
@@ -55,7 +55,7 @@ export interface IDialogContext {
 
 export interface ISnackbarProps {
   open: boolean;
-  onClose: () => void;
+  onClose?: () => void;
   snackbarMessage: ReactNode;
   snackbarAutoCloseMs?: number; //ms
 }
@@ -89,10 +89,7 @@ export const defaultErrorDialogProps: IErrorDialogProps = {
 
 export const defaultSnackbarProps: ISnackbarProps = {
   snackbarMessage: '',
-  open: false,
-  onClose: () => {
-    // default do nothing
-  }
+  open: false
 };
 
 export const DialogContext = createContext<IDialogContext>({
@@ -128,7 +125,7 @@ export const DialogContextProvider: React.FC<React.PropsWithChildren> = (props)
   };
 
   const setSnackbar = function (partialProps: Partial<ISnackbarProps>) {
-    setSnackbarProps({ ...snackbarProps, ...partialProps });
+    setSnackbarProps({ onClose: () => setSnackbar({ open: false }), ...snackbarProps, ...partialProps });
   };
 
   const setErrorDialog = function (partialProps: Partial<IErrorDialogProps>) {
@@ -155,10 +152,10 @@ export const DialogContextProvider: React.FC<React.PropsWithChildren> = (props)
         }}
         open={snackbarProps.open}
         autoHideDuration={snackbarProps?.snackbarAutoCloseMs ?? 6000}
-        onClose={() => setSnackbar({ open: false })}
+        onClose={snackbarProps.onClose}
         message={snackbarProps.snackbarMessage}
         action={
-          <IconButton size="small" aria-label="close" color="inherit" onClick={() => setSnackbar({ open: false })}>
+          <IconButton size="small" aria-label="close" color="inherit" onClick={snackbarProps.onClose}>
             <CloseIcon fontSize="small" />
           </IconButton>
         }
diff --git a/app/src/features/surveys/SurveyRouter.tsx b/app/src/features/surveys/SurveyRouter.tsx
index 1ee306311c..6aac3c9c36 100644
--- a/app/src/features/surveys/SurveyRouter.tsx
+++ b/app/src/features/surveys/SurveyRouter.tsx
@@ -48,9 +48,11 @@ const SurveyRouter: React.FC = () => {
         <ProjectRoleRouteGuard
           validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
           validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
-          <AnimalPageContextProvider>
-            <AnimalRouter />
-          </AnimalPageContextProvider>
+          <DialogContextProvider>
+            <AnimalPageContextProvider>
+              <AnimalRouter />
+            </AnimalPageContextProvider>
+          </DialogContextProvider>
         </ProjectRoleRouteGuard>
       </RouteWithTitle>
 
diff --git a/app/src/features/surveys/animals/AnimalRouter.tsx b/app/src/features/surveys/animals/AnimalRouter.tsx
index 6ca4d02e44..ed68c95faa 100644
--- a/app/src/features/surveys/animals/AnimalRouter.tsx
+++ b/app/src/features/surveys/animals/AnimalRouter.tsx
@@ -1,6 +1,5 @@
 import { ProjectRoleRouteGuard } from 'components/security/RouteGuards';
 import { PROJECT_PERMISSION, SYSTEM_ROLE } from 'constants/roles';
-import { DialogContextProvider } from 'contexts/dialogContext';
 import { TaxonomyContextProvider } from 'contexts/taxonomyContext';
 import { CreateCapturePage } from 'features/surveys/animals/profile/captures/capture-form/create/CreateCapturePage';
 import { EditCapturePage } from 'features/surveys/animals/profile/captures/capture-form/edit/EditCapturePage';
@@ -13,6 +12,7 @@ import { getTitle } from 'utils/Utils';
 import { CreateAnimalPage } from './animal-form/create/CreateAnimalPage';
 import { EditAnimalPage } from './animal-form/edit/EditAnimalPage';
 import { SurveyAnimalPage } from './AnimalPage';
+import { CreateCSVCapturesPage } from './profile/captures/import-captures/CreateCSVCapturesPage';
 
 /**
  * Router for all `/admin/projects/:id/surveys/:survey_id/animals/*` pages.
@@ -35,9 +35,7 @@ export const AnimalRouter: React.FC = () => {
         <ProjectRoleRouteGuard
           validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
           validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
-          <DialogContextProvider>
-            <SurveyAnimalPage />
-          </DialogContextProvider>
+          <SurveyAnimalPage />
         </ProjectRoleRouteGuard>
       </RouteWithTitle>
 
@@ -48,9 +46,18 @@ export const AnimalRouter: React.FC = () => {
         <ProjectRoleRouteGuard
           validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
           validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
-          <DialogContextProvider>
-            <CreateAnimalPage />
-          </DialogContextProvider>
+          <CreateAnimalPage />
+        </ProjectRoleRouteGuard>
+      </RouteWithTitle>
+
+      <RouteWithTitle
+        exact
+        path={'/admin/projects/:id/surveys/:survey_id/animals/captures'}
+        title={getTitle('Create Captures')}>
+        <ProjectRoleRouteGuard
+          validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
+          validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
+          <CreateCSVCapturesPage />
         </ProjectRoleRouteGuard>
       </RouteWithTitle>
 
@@ -74,9 +81,7 @@ export const AnimalRouter: React.FC = () => {
         <ProjectRoleRouteGuard
           validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
           validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
-          <DialogContextProvider>
-            <CreateCapturePage />
-          </DialogContextProvider>
+          <CreateCapturePage />
         </ProjectRoleRouteGuard>
       </RouteWithTitle>
 
@@ -87,9 +92,7 @@ export const AnimalRouter: React.FC = () => {
         <ProjectRoleRouteGuard
           validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
           validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
-          <DialogContextProvider>
-            <EditCapturePage />
-          </DialogContextProvider>
+          <EditCapturePage />
         </ProjectRoleRouteGuard>
       </RouteWithTitle>
 
@@ -100,9 +103,7 @@ export const AnimalRouter: React.FC = () => {
         <ProjectRoleRouteGuard
           validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
           validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
-          <DialogContextProvider>
-            <CreateMortalityPage />
-          </DialogContextProvider>
+          <CreateMortalityPage />
         </ProjectRoleRouteGuard>
       </RouteWithTitle>
 
@@ -113,9 +114,7 @@ export const AnimalRouter: React.FC = () => {
         <ProjectRoleRouteGuard
           validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
           validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
-          <DialogContextProvider>
-            <EditMortalityPage />
-          </DialogContextProvider>
+          <EditMortalityPage />
         </ProjectRoleRouteGuard>
       </RouteWithTitle>
     </Switch>
diff --git a/app/src/features/surveys/animals/list/components/AnimalListToolbar.tsx b/app/src/features/surveys/animals/list/components/AnimalListToolbar.tsx
index 3b31c76861..37d95485bb 100644
--- a/app/src/features/surveys/animals/list/components/AnimalListToolbar.tsx
+++ b/app/src/features/surveys/animals/list/components/AnimalListToolbar.tsx
@@ -96,7 +96,8 @@ export const AnimalListToolbar = (props: IAnimaListToolbarProps) => {
           color="primary"
           onClick={() => setOpenImportDialog(true)}
           startIcon={<Icon path={mdiFileDocumentPlusOutline} size={1} />}
-          sx={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0, '& .MuiButton-startIcon': { mx: 0 } }}></Button>
+          sx={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0, '& .MuiButton-startIcon': { mx: 0 } }}
+        />
         <IconButton
           edge="end"
           sx={{ ml: 1 }}
diff --git a/app/src/features/surveys/animals/profile/captures/components/AnimalCapturesToolbar.tsx b/app/src/features/surveys/animals/profile/captures/components/AnimalCapturesToolbar.tsx
index 14e7be7575..e2691b65ac 100644
--- a/app/src/features/surveys/animals/profile/captures/components/AnimalCapturesToolbar.tsx
+++ b/app/src/features/surveys/animals/profile/captures/components/AnimalCapturesToolbar.tsx
@@ -1,9 +1,11 @@
-import { mdiPlus } from '@mdi/js';
+import { mdiFileDocumentPlusOutline, mdiPlus } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
+import { useSurveyContext } from 'hooks/useContext';
+import { Link as RouterLink } from 'react-router-dom';
 
 interface ICapturesToolbarProps {
   capturesCount: number;
@@ -19,6 +21,8 @@ interface ICapturesToolbarProps {
 export const AnimalCapturesToolbar = (props: ICapturesToolbarProps) => {
   const { capturesCount, onAddAnimalCapture } = props;
 
+  const surveyContext = useSurveyContext();
+
   return (
     <Toolbar
       disableGutters
@@ -42,9 +46,18 @@ export const AnimalCapturesToolbar = (props: ICapturesToolbarProps) => {
           variant="contained"
           color="primary"
           onClick={onAddAnimalCapture}
-          startIcon={<Icon path={mdiPlus} size={1} />}>
+          startIcon={<Icon path={mdiPlus} size={1} />}
+          sx={{ mr: 0.2, borderTopRightRadius: 0, borderBottomRightRadius: 0 }}>
           Add Capture
         </Button>
+        <Button
+          variant="contained"
+          color="primary"
+          component={RouterLink}
+          to={`/admin/projects/${surveyContext.projectId}/surveys/${surveyContext.surveyId}/animals/captures`}
+          startIcon={<Icon path={mdiFileDocumentPlusOutline} size={1} />}
+          sx={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0, '& .MuiButton-startIcon': { mx: 0 } }}
+        />
       </Box>
     </Toolbar>
   );
diff --git a/app/src/features/surveys/animals/profile/captures/import-captures/CreateCSVCapturesPage.tsx b/app/src/features/surveys/animals/profile/captures/import-captures/CreateCSVCapturesPage.tsx
new file mode 100644
index 0000000000..88abed1acf
--- /dev/null
+++ b/app/src/features/surveys/animals/profile/captures/import-captures/CreateCSVCapturesPage.tsx
@@ -0,0 +1,338 @@
+import LoadingButton from '@mui/lab/LoadingButton';
+import { Box, Divider } from '@mui/material';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
+import Link from '@mui/material/Link';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import axios, { AxiosProgressEvent } from 'axios';
+import HorizontalSplitFormComponent from 'components/fields/HorizontalSplitFormComponent';
+import { UploadFileStatus } from 'components/file-upload/FileUploadItem';
+import { FileUploadSingleItem } from 'components/file-upload/FileUploadSingleItem';
+import PageHeader from 'components/layout/PageHeader';
+import { useBiohubApi } from 'hooks/useBioHubApi';
+import { useAnimalPageContext, useDialogContext, useProjectContext, useSurveyContext } from 'hooks/useContext';
+import { SKIP_CONFIRMATION_DIALOG, useUnsavedChangesDialog } from 'hooks/useUnsavedChangesDialog';
+import { useCallback, useMemo, useState } from 'react';
+import { Prompt, useHistory } from 'react-router';
+import { Link as RouterLink } from 'react-router-dom';
+import { downloadFile } from 'utils/file-utils';
+import { getAxiosProgress } from 'utils/Utils';
+import { getCapturesCSVTemplate, getMarkingsCSVTemplate, getMeasurementsCSVTemplate } from './utils/templates';
+
+type CSVFilesStatus = {
+  captures: { file: File | null; status: UploadFileStatus; progress: number; error?: string };
+  measurements: { file: File | null; status: UploadFileStatus; progress: number; error?: string };
+  markings: { file: File | null; status: UploadFileStatus; progress: number; error?: string };
+};
+
+type UpdateFileState = {
+  fileType: keyof CSVFilesStatus;
+} & {
+  file?: File | null;
+  status?: UploadFileStatus;
+  progress?: number;
+  error?: string;
+};
+
+/**
+ * Page to create Captures + Measurements + Markings from CSV files.
+ *
+ * @returns {*}
+ */
+export const CreateCSVCapturesPage = () => {
+  const history = useHistory();
+  const biohubApi = useBiohubApi();
+
+  const { locationChangeInterceptor } = useUnsavedChangesDialog();
+  const dialogContext = useDialogContext();
+
+  const projectContext = useProjectContext();
+  const surveyContext = useSurveyContext();
+  const animalPageContext = useAnimalPageContext();
+
+  const { projectId, surveyId } = surveyContext;
+
+  // Initialize the file upload states
+  const [files, setFiles] = useState<CSVFilesStatus>({
+    captures: { file: null, status: UploadFileStatus.PENDING, progress: 0 },
+    measurements: { file: null, status: UploadFileStatus.PENDING, progress: 0 },
+    markings: { file: null, status: UploadFileStatus.PENDING, progress: 0 }
+  });
+
+  // When any of the files are uploading
+  const isUploading = useMemo(() => {
+    return Object.values(files).some(
+      (key) => key.status === UploadFileStatus.UPLOADING || key.status === UploadFileStatus.FINISHING_UPLOAD
+    );
+  }, [files]);
+
+  const cancelToken = axios.CancelToken.source();
+
+  /**
+   * Update a specific file's state.
+   *
+   * @param {UpdateFileState} config - Partial state to update.
+   * @example handleFileState({ fileType: 'captures', status: UploadFileStatus.COMPLETE, progress: 100 });
+   */
+  const handleFileState = (config: UpdateFileState) => {
+    setFiles((prevState) => ({ ...prevState, [config.fileType]: { ...prevState[config.fileType], ...config } }));
+  };
+
+  /**
+   * Handle a file upload and update the uploading state.
+   *
+   * @async
+   * @param {keyof typeof files} fileType - The type of file being uploaded ie: `captures`.
+   * @param {(file: File | null) => void} onUpload - The callback to handle the file upload.
+   * @returns {Promise<UploadFileStatus>} Returns the final `UploadFileStatus` to prevent race condtions.
+   */
+  const handleFileUpload = useCallback(
+    async (
+      fileType: keyof typeof files,
+      onUpload: (file: File, onProgress: (progressEvent: AxiosProgressEvent) => void) => Promise<unknown>
+    ) => {
+      // If the file exists and is in the `STAGED` state, upload the file.
+      if (files[fileType].file && files[fileType].status === UploadFileStatus.STAGED) {
+        try {
+          handleFileState({ fileType, status: UploadFileStatus.UPLOADING });
+
+          // Pass the file and the onProgress callback to the upload handler
+          await onUpload(files[fileType].file as File, (progressEvent: AxiosProgressEvent) => {
+            // Update the progress of the file upload
+            handleFileState({ fileType, progress: getAxiosProgress(progressEvent) });
+
+            if (progressEvent.loaded === progressEvent.total) {
+              handleFileState({ fileType, status: UploadFileStatus.FINISHING_UPLOAD });
+            }
+          });
+
+          handleFileState({ fileType, status: UploadFileStatus.COMPLETE });
+
+          return UploadFileStatus.COMPLETE; // Return the final status to prevent race conditions with state
+        } catch (error: any) {
+          handleFileState({ fileType, status: UploadFileStatus.FAILED, error: error.message ?? 'Unknown error' });
+
+          return UploadFileStatus.FAILED; // Return the final status to prevent race conditions with state
+        }
+      }
+      return files[fileType].status;
+    },
+    [files]
+  );
+
+  /**
+   * Handle all file uploads in order. `Captures` take precedence over `Measurements` and `Markings`.
+   *
+   * Why? `Measurements` and `Markings` are dependent on `Captures` existing before they can be uploaded.
+   *
+   * @async
+   * @returns {Promise<void>}
+   */
+  const handleAllFileUploads = async () => {
+    // Attempt to upload the captures first
+    const captureStatus = await handleFileUpload('captures', (file, onProgress) =>
+      biohubApi.survey.importCapturesFromCsv(file, projectId, surveyId, cancelToken, onProgress)
+    );
+
+    // If the Captures CSV upload failed, don't attempt to upload Measurements or Markings
+    if (captureStatus === UploadFileStatus.FAILED) {
+      return;
+    }
+
+    // Measurements / Markings can be uploaded in parallel
+    const [measurementStatus, markingStatus] = await Promise.all([
+      handleFileUpload('measurements', (file, onProgress) =>
+        biohubApi.survey.importMeasurementsFromCsv(file, projectId, surveyId, cancelToken, onProgress)
+      ),
+      handleFileUpload('markings', (file, onProgress) =>
+        biohubApi.survey.importMarkingsFromCsv(file, projectId, surveyId, cancelToken, onProgress)
+      )
+    ]);
+
+    if (measurementStatus === UploadFileStatus.FAILED || markingStatus === UploadFileStatus.FAILED) {
+      return;
+    }
+
+    dialogContext.setSnackbar({
+      open: true,
+      snackbarMessage: (
+        <Typography variant="body2" component="div">
+          CSV files uploaded successfully.
+        </Typography>
+      )
+    });
+
+    if (animalPageContext.selectedAnimal) {
+      animalPageContext.critterDataLoader.refresh(projectId, surveyId, animalPageContext.selectedAnimal.critter_id);
+    }
+
+    history.push(`/admin/projects/${projectId}/surveys/${surveyId}/animals`, SKIP_CONFIRMATION_DIALOG);
+  };
+
+  /**
+   * On cancel, navigate back to the animals page.
+   *
+   * @returns {void}
+   */
+  const handleCancel = (): void => {
+    cancelToken.cancel();
+    history.push(`/admin/projects/${projectId}/surveys/${surveyId}/animals`);
+  };
+
+  return (
+    <>
+      <Prompt when={true} message={locationChangeInterceptor} />
+      <PageHeader
+        title="Create Captures"
+        breadCrumbJSX={
+          <Breadcrumbs aria-label="breadcrumb" separator={'>'}>
+            <Link component={RouterLink} underline="hover" to={`/admin/projects/${projectId}/`}>
+              {projectContext.projectDataLoader.data?.projectData.project.project_name}
+            </Link>
+            <Link component={RouterLink} underline="hover" to={`/admin/projects/${projectId}/surveys/${surveyId}`}>
+              {surveyContext.surveyDataLoader.data?.surveyData.survey_details.survey_name}
+            </Link>
+            <Link
+              component={RouterLink}
+              underline="hover"
+              to={`/admin/projects/${projectId}/surveys/${surveyId}/animals`}>
+              Manage Animals
+            </Link>
+            <Typography variant="body2" component="span" color="textSecondary" aria-current="page">
+              Create Captures
+            </Typography>
+          </Breadcrumbs>
+        }
+        buttonJSX={
+          <Stack flexDirection="row" gap={1}>
+            <LoadingButton
+              disabled={isUploading}
+              loading={isUploading}
+              color="primary"
+              variant="contained"
+              onClick={handleAllFileUploads}>
+              Upload
+            </LoadingButton>
+            <Button disabled={isUploading} color="primary" variant="outlined" onClick={handleCancel}>
+              Cancel
+            </Button>
+          </Stack>
+        }
+      />
+
+      <Container maxWidth="xl" sx={{ py: 3 }}>
+        <Paper sx={{ p: 5 }}>
+          <Stack gap={5}>
+            <HorizontalSplitFormComponent title="Captures" summary="Upload the capture times and locations">
+              <Box sx={{ display: 'flex', flexDirection: 'column' }} gap={2}>
+                <Button
+                  sx={{ ml: 'auto', textTransform: 'none', fontWeight: 'regular' }}
+                  variant="outlined"
+                  size="small"
+                  onClick={() => {
+                    downloadFile(getCapturesCSVTemplate(), 'SIMS-captures-template.csv');
+                  }}>
+                  Download Template
+                </Button>
+                <FileUploadSingleItem
+                  {...files.captures}
+                  onStatus={(status) => handleFileState({ fileType: 'captures', status })}
+                  onFile={(file) => handleFileState({ fileType: 'captures', file })}
+                  onError={(error) => handleFileState({ fileType: 'captures', error })}
+                  onCancel={() =>
+                    handleFileState({
+                      fileType: 'captures',
+                      status: UploadFileStatus.PENDING,
+                      error: undefined,
+                      progress: undefined
+                    })
+                  }
+                  DropZoneProps={{ acceptedFileExtensions: '.csv' }}
+                />
+              </Box>
+            </HorizontalSplitFormComponent>
+            <Divider />
+
+            <HorizontalSplitFormComponent title="Measurements" summary="Upload measurements taken during the captures">
+              <Box sx={{ display: 'flex', flexDirection: 'column' }} gap={2}>
+                <Button
+                  sx={{ ml: 'auto', textTransform: 'none', fontWeight: 'regular' }}
+                  variant="outlined"
+                  size="small"
+                  onClick={() => {
+                    downloadFile(getMeasurementsCSVTemplate(), 'SIMS-measurements-template.csv');
+                  }}>
+                  Download Template
+                </Button>
+                <FileUploadSingleItem
+                  {...files.measurements}
+                  onStatus={(status) => handleFileState({ fileType: 'measurements', status })}
+                  onFile={(file) => handleFileState({ fileType: 'measurements', file })}
+                  onError={(error) => handleFileState({ fileType: 'measurements', error })}
+                  onCancel={() =>
+                    handleFileState({
+                      fileType: 'measurements',
+                      status: UploadFileStatus.PENDING,
+                      error: undefined,
+                      progress: undefined
+                    })
+                  }
+                  DropZoneProps={{ acceptedFileExtensions: '.csv' }}
+                />
+              </Box>
+            </HorizontalSplitFormComponent>
+            <Divider />
+
+            <HorizontalSplitFormComponent title="Markings" summary="Upload markings applied during the captures">
+              <Box sx={{ display: 'flex', flexDirection: 'column' }} gap={2}>
+                <Button
+                  sx={{ ml: 'auto', textTransform: 'none', fontWeight: 'regular' }}
+                  variant="outlined"
+                  size="small"
+                  onClick={() => {
+                    downloadFile(getMarkingsCSVTemplate(), 'SIMS-markings-template.csv');
+                  }}>
+                  Download Template
+                </Button>
+                <FileUploadSingleItem
+                  {...files.markings}
+                  onStatus={(status) => handleFileState({ fileType: 'markings', status })}
+                  onFile={(file) => handleFileState({ fileType: 'markings', file })}
+                  onError={(error) => handleFileState({ fileType: 'markings', error })}
+                  onCancel={() =>
+                    handleFileState({
+                      fileType: 'markings',
+                      status: UploadFileStatus.PENDING,
+                      error: undefined,
+                      progress: undefined
+                    })
+                  }
+                  DropZoneProps={{ acceptedFileExtensions: '.csv' }}
+                />
+              </Box>
+            </HorizontalSplitFormComponent>
+            <Divider />
+          </Stack>
+
+          <Stack mt={4} flexDirection="row" justifyContent="flex-end" gap={1}>
+            <LoadingButton
+              loading={isUploading}
+              type="submit"
+              variant="contained"
+              color="primary"
+              onClick={handleAllFileUploads}
+              disabled={isUploading}>
+              Upload
+            </LoadingButton>
+            <Button disabled={isUploading} variant="outlined" color="primary" onClick={handleCancel}>
+              Cancel
+            </Button>
+          </Stack>
+        </Paper>
+      </Container>
+    </>
+  );
+};
diff --git a/app/src/features/surveys/animals/profile/captures/import-captures/utils/templates.ts b/app/src/features/surveys/animals/profile/captures/import-captures/utils/templates.ts
new file mode 100644
index 0000000000..c6101422b3
--- /dev/null
+++ b/app/src/features/surveys/animals/profile/captures/import-captures/utils/templates.ts
@@ -0,0 +1,50 @@
+import { getCSVTemplate } from 'utils/file-utils';
+
+/**
+ * Get CSV template for measurements.
+ *
+ * @returns {string} Encoded CSV template
+ */
+export const getMeasurementsCSVTemplate = (): string => {
+  return getCSVTemplate(['ALIAS', 'CAPTURE_DATE', 'CAPTURE_TIME']);
+};
+
+/**
+ * Get CSV template for captures.
+ *
+ * @returns {string} Encoded CSV template
+ */
+export const getCapturesCSVTemplate = (): string => {
+  return getCSVTemplate([
+    'ALIAS',
+    'CAPTURE_DATE',
+    'CAPTURE_TIME',
+    'CAPTURE_LATITUDE',
+    'CAPTURE_LONGITUDE',
+    'RELEASE_DATE',
+    'RELEASE_TIME',
+    'RELEASE_LATITUDE',
+    'RELEASE_LONGITUDE',
+    'RELEASE_COMMENT',
+    'CAPTURE_COMMENT'
+  ]);
+};
+
+/**
+ * Get CSV template for markings.
+ *
+ * @returns {string} Encoded CSV template
+ */
+export const getMarkingsCSVTemplate = (): string => {
+  return getCSVTemplate([
+    'ALIAS',
+    'CAPTURE_DATE',
+    'CAPTURE_TIME',
+    'BODY_LOCATION',
+    'MARKING_TYPE',
+    'IDENTIFIER',
+    'PRIMARY_COLOUR',
+    'SECONDARY_COLOUR',
+    'COMMENT'
+  ]);
+};
diff --git a/app/src/hooks/api/useSurveyApi.ts b/app/src/hooks/api/useSurveyApi.ts
index a9df91cb9d..c2c9929419 100644
--- a/app/src/hooks/api/useSurveyApi.ts
+++ b/app/src/hooks/api/useSurveyApi.ts
@@ -587,6 +587,102 @@ const useSurveyApi = (axios: AxiosInstance) => {
     return data;
   };
 
+  /**
+   * Bulk upload Captures from CSV.
+   *
+   * @async
+   * @param {File} file - Captures CSV.
+   * @param {number} projectId
+   * @param {number} surveyId
+   * @returns {Promise<number[]>}
+   */
+  const importCapturesFromCsv = async (
+    file: File,
+    projectId: number,
+    surveyId: number,
+    cancelTokenSource?: CancelTokenSource,
+    onProgress?: (progressEvent: AxiosProgressEvent) => void
+  ): Promise<{ survey_critter_ids: number[] }> => {
+    const formData = new FormData();
+
+    formData.append('media', file);
+
+    const { data } = await axios.post(
+      `/api/project/${projectId}/survey/${surveyId}/critters/captures/import`,
+      formData,
+      {
+        cancelToken: cancelTokenSource?.token,
+        onUploadProgress: onProgress
+      }
+    );
+
+    return data;
+  };
+
+  /**
+   * Bulk upload Markings from CSV.
+   *
+   * @async
+   * @param {File} file - Captures CSV.
+   * @param {number} projectId
+   * @param {number} surveyId
+   * @returns {Promise<number[]>}
+   */
+  const importMarkingsFromCsv = async (
+    file: File,
+    projectId: number,
+    surveyId: number,
+    cancelTokenSource?: CancelTokenSource,
+    onProgress?: (progressEvent: AxiosProgressEvent) => void
+  ): Promise<{ survey_critter_ids: number[] }> => {
+    const formData = new FormData();
+
+    formData.append('media', file);
+
+    const { data } = await axios.post(
+      `/api/project/${projectId}/survey/${surveyId}/critters/markings/import`,
+      formData,
+      {
+        cancelToken: cancelTokenSource?.token,
+        onUploadProgress: onProgress
+      }
+    );
+
+    return data;
+  };
+
+  /**
+   * Bulk upload Measurements from CSV.
+   *
+   * @async
+   * @param {File} file - Captures CSV.
+   * @param {number} projectId
+   * @param {number} surveyId
+   * @returns {Promise<number[]>}
+   */
+  const importMeasurementsFromCsv = async (
+    file: File,
+    projectId: number,
+    surveyId: number,
+    cancelTokenSource?: CancelTokenSource,
+    onProgress?: (progressEvent: AxiosProgressEvent) => void
+  ): Promise<{ survey_critter_ids: number[] }> => {
+    const formData = new FormData();
+
+    formData.append('media', file);
+
+    const { data } = await axios.post(
+      `/api/project/${projectId}/survey/${surveyId}/critters/measurements/import`,
+      formData,
+      {
+        cancelToken: cancelTokenSource?.token,
+        onUploadProgress: onProgress
+      }
+    );
+
+    return data;
+  };
+
   return {
     createSurvey,
     getSurveyForView,
@@ -612,9 +708,12 @@ const useSurveyApi = (axios: AxiosInstance) => {
     getCritterById,
     updateDeployment,
     getCritterTelemetry,
+    importCrittersFromCsv,
+    importCapturesFromCsv,
+    importMarkingsFromCsv,
+    importMeasurementsFromCsv,
     endDeployment,
-    deleteDeployment,
-    importCrittersFromCsv
+    deleteDeployment
   };
 };
 
diff --git a/app/src/utils/Utils.tsx b/app/src/utils/Utils.tsx
index 994630cd65..11b7867e36 100644
--- a/app/src/utils/Utils.tsx
+++ b/app/src/utils/Utils.tsx
@@ -1,4 +1,5 @@
 import Typography from '@mui/material/Typography';
+import { AxiosProgressEvent } from 'axios';
 import { SYSTEM_IDENTITY_SOURCE } from 'constants/auth';
 import { DATE_FORMAT, TIME_FORMAT } from 'constants/dateTimeFormats';
 import { default as dayjs } from 'dayjs';
@@ -479,3 +480,15 @@ export const getRandomHexColor = (seed: number, min = 120, max = 180): string =>
  * @return {*}  {value is T}
  */
 export const isDefined = <T,>(value: T | undefined | null): value is T => value !== undefined && value !== null;
+
+/**
+ * Gets the progress percentage from an Axios ProgressEvent.
+ *
+ * Note: Axios will fire a `progress event` 3 times a second.
+ *
+ * @param {AxiosProgressEvent} progressEvent - Axios progress event
+ *
+ */
+export const getAxiosProgress = (progressEvent: AxiosProgressEvent) => {
+  return Math.round((progressEvent.loaded / (progressEvent.total || 1)) * 100);
+};
diff --git a/app/src/utils/file-utils.ts b/app/src/utils/file-utils.ts
new file mode 100644
index 0000000000..6fddb9881d
--- /dev/null
+++ b/app/src/utils/file-utils.ts
@@ -0,0 +1,24 @@
+/**
+ * Get CSV template from a list of column headers.
+ *
+ * @param {string[]} headers - CSV column headers
+ * @returns {string} Encoded CSV template
+ */
+export const getCSVTemplate = (headers: string[]) => {
+  return 'data:text/csv;charset=utf-8,' + headers.join(',') + '\n';
+};
+
+/**
+ * Download a file client side.
+ *
+ * @param {string} fileContents - String representing the file contents
+ * @param {string} fileName - The name of the file to download
+ */
+export const downloadFile = (fileContents: string, fileName: string) => {
+  const encodedUri = encodeURI(fileContents);
+  const link = document.createElement('a');
+  link.setAttribute('href', encodedUri);
+  link.setAttribute('download', fileName);
+  document.body.appendChild(link);
+  link.click();
+};