Add attachments to existing row in workbench

specifyweb/frontend/js_src/lib/components/WbActions/WbSave.tsx

@@ -12,6 +12,34 @@ import { loadingBar } from '../Molecules';
 import { Dialog } from '../Molecules/Dialog';
 import type { Workbench } from '../WorkBench/WbView';
 
+export const handleWorkbenchSave = async (
+  workbench: Workbench,
+  searchRef: React.MutableRefObject<HTMLInputElement | null>,
+  checkDeletedFail: (statusCode: number) => void,
+  handleSpreadsheetUpToDate: () => void,
+) => {
+  // Clear validation
+  overwriteReadOnly(workbench.dataset, 'rowresults', null);
+  workbench.validation.stopLiveValidation();
+
+  // Send data
+  ping(`/api/workbench/rows/${workbench.dataset.id}/`, {
+    method: 'PUT',
+    body: workbench.data,
+    expectedErrors: [Http.NO_CONTENT, Http.NOT_FOUND],
+  })
+    .then((status) => checkDeletedFail(status))
+    .then(() => {
+      handleSpreadsheetUpToDate();
+      workbench.cells.cellMeta = [];
+      workbench.utils?.searchCells(
+        { key: 'SettingsChange' },
+        searchRef.current
+      );
+      workbench.hot?.render();
+    });
+};
+
 export function WbSave({
   workbench,
   hasUnsavedChanges,
@@ -28,32 +56,19 @@ export function WbSave({
   const [showProgressBar, openProgressBar, closeProgressBar] =
     useBooleanState();
 
-  const handleSave = () => {
-    // Clear validation
-    overwriteReadOnly(workbench.dataset, 'rowresults', null);
-    workbench.validation.stopLiveValidation();
-
+  const handleSave = async (): Promise<void> => {
     // Show saving progress bar
     openProgressBar();
 
-    // Send data
-    ping(`/api/workbench/rows/${workbench.dataset.id}/`, {
-      method: 'PUT',
-      body: workbench.data,
-      expectedErrors: [Http.NO_CONTENT, Http.NOT_FOUND],
-    })
-      .then((status) => checkDeletedFail(status))
-      .then(() => {
-        handleSpreadsheetUpToDate();
-        workbench.cells.cellMeta = [];
-        workbench.utils?.searchCells(
-          { key: 'SettingsChange' },
-          searchRef.current
-        );
-        workbench.hot?.render();
-        closeProgressBar();
-      });
-  };
+    await handleWorkbenchSave(
+      workbench,
+      searchRef,
+      checkDeletedFail,
+      handleSpreadsheetUpToDate,
+    );
+
+    closeProgressBar();
+  }
 
   return (
     <>

specifyweb/frontend/js_src/lib/components/WbAttachmentViewer/index.tsx

@@ -30,6 +30,7 @@ import { serializeResource } from '../DataModel/serializers';
 import type { Attachment } from '../DataModel/types';
 import { Dialog, dialogClassNames } from '../Molecules/Dialog';
 import { NotFoundView } from '../Router/NotFoundView';
+import { Slider } from '../FormSliders/Slider';
 
 const { parseCacheKey } = exportsForTests;
 
@@ -131,6 +132,13 @@ export function WbAttachmentViewerView(): JSX.Element {
       header={attachmentsText.attachments()}
       headerButtons={
         <div className="flex items-center gap-2 md:gap-2 ml-auto">
+          <Slider
+            value={selectedAttachment}
+            count={attachmentIds?.length ?? 1}
+            onChange={(newValue: number) => {
+              setSelectedAttachment(newValue)
+            }}
+          />
           <Button.Secondary
             onClick={(): void => {
               removeCache('workBenchAttachmentViewer', viewerId);

specifyweb/frontend/js_src/lib/components/WbImportAttachments/index.tsx

@@ -10,25 +10,15 @@ import { useNavigate } from 'react-router-dom';
 import { useBooleanState } from '../../hooks/useBooleanState';
 import { attachmentsText } from '../../localization/attachments';
 import { commonText } from '../../localization/common';
-import { ajax } from '../../utils/ajax';
 import { f } from '../../utils/functools';
 import type { RA } from '../../utils/types';
 import { Container, H2 } from '../Atoms';
 import { Progress } from '../Atoms';
 import { Button } from '../Atoms/Button';
-import { uploadFile } from '../Attachments/attachments';
-import type { SerializedRecord } from '../DataModel/helperTypes';
-import type { SpecifyResource } from '../DataModel/legacyTypes';
 import {
-  deserializeResource,
   serializeResource,
 } from '../DataModel/serializers';
 import { tables } from '../DataModel/tables';
-import type {
-  Attachment,
-  Spdataset,
-  SpDataSetAttachment,
-} from '../DataModel/types';
 import { raise } from '../Errors/Crash';
 import { useMenuItem } from '../Header/MenuContext';
 import { userInformation } from '../InitialContext/userInformation';
@@ -42,6 +32,9 @@ import {
   ATTACHMENTS_COLUMN,
   attachmentsToCell,
   BASE_TABLE_NAME,
+  uploadFiles,
+  createDataSetAttachments,
+  saveDataSetAttachments,
 } from '../WorkBench/attachmentHelpers';
 
 export function WbImportAttachmentsView(): JSX.Element {
@@ -65,58 +58,6 @@ export function WbImportAttachmentsView(): JSX.Element {
   );
 }
 
-function uploadFiles(
-  files: RA<File>,
-  handleProgress: (progress: (progress: number | undefined) => number) => void
-): RA<Promise<SpecifyResource<Attachment>>> {
-  return files.map(async (file) =>
-    uploadFile(file)
-      .then(async (attachment) =>
-        attachment === undefined
-          ? Promise.reject(`Upload failed for file ${file.name}`)
-          : attachment
-      )
-      .finally(() =>
-        handleProgress((progress) =>
-          typeof progress === 'number' ? progress + 1 : 1
-        )
-      )
-  );
-}
-
-async function createDataSetAttachments(
-  attachments: RA<SpecifyResource<Attachment>>,
-  dataSet: SpecifyResource<Spdataset>
-): Promise<RA<SpecifyResource<SpDataSetAttachment>>> {
-  return Promise.all(
-    attachments.map(
-      (attachment) =>
-        new tables.SpDataSetAttachment.Resource({
-          attachment: attachment as never,
-          spdataset: dataSet.url(),
-          ordinal: 0,
-        })
-    )
-  );
-}
-
-async function saveDataSetAttachments(
-  dataSetAttachments: RA<SpecifyResource<SpDataSetAttachment>>
-): Promise<RA<SpecifyResource<SpDataSetAttachment>>> {
-  return ajax<RA<SerializedRecord<SpDataSetAttachment>>>(
-    `/bulk_copy/bulk/${tables.SpDataSetAttachment.name.toLowerCase()}/`,
-    {
-      method: 'POST',
-      headers: { Accept: 'application/json' },
-      body: dataSetAttachments.map((dataSetAttachment) =>
-        serializeResource(dataSetAttachment)
-      ),
-    }
-  ).then(({ data }) =>
-    data.map((resource) => deserializeResource(serializeResource(resource)))
-  );
-}
-
 function FilesPicked({ files }: { readonly files: RA<File> }): JSX.Element {
   const navigate = useNavigate();
   const [fileUploadProgress, setFileUploadProgress] = React.useState<