diff --git a/specifyweb/frontend/js_src/lib/components/Attachments/__tests__/AttachmentCell.test.tsx b/specifyweb/frontend/js_src/lib/components/Attachments/__tests__/AttachmentCell.test.tsx
index 2271d67b4a2..762c2dccfda 100644
--- a/specifyweb/frontend/js_src/lib/components/Attachments/__tests__/AttachmentCell.test.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Attachments/__tests__/AttachmentCell.test.tsx
@@ -8,7 +8,7 @@ import attachmentSettings from '../../../tests/ajax/static/context/attachment_se
 import { requireContext } from "../../../tests/helpers";
 import { mount } from "../../../tests/reactUtils";
 import { f } from "../../../utils/functools";
-import { type GetOrSet, type GetSet,overwriteReadOnly } from "../../../utils/types";
+import { type GetSet, overwriteReadOnly } from "../../../utils/types";
 import { LoadingContext } from "../../Core/Contexts";
 import type { AnySchema, SerializedResource } from "../../DataModel/helperTypes";
 import type { SpecifyResource } from "../../DataModel/legacyTypes";
@@ -17,48 +17,22 @@ import { tables } from "../../DataModel/tables";
 import type { Attachment } from "../../DataModel/types";
 import { overrideAttachmentSettings } from "../attachments";
 import { AttachmentCell } from "../Cell";
+import { makeUseAsyncRef, testStaticResources } from "./utils"
 
 requireContext();
 
 const setStateMock = jest.fn();
 
+const { testAttachment, testCollectionObjectAttachment } = testStaticResources;
+
 beforeEach(() => {
     setStateMock.mockClear();
     clearIdStore();
 });
 
-jest.spyOn(AsyncState, 'useAsyncState').mockImplementation(useAsyncRef);
-
-function useAsyncRef<T>(
-    callback: () => Promise<T | undefined> | T | undefined,
-    _: boolean
-): GetOrSet<T | undefined> {
-    const ref = React.useRef<T | undefined>(undefined);
-
-    React.useLayoutEffect(() => {
-        ref.current = undefined;
-
-        Promise.resolve(callback()).then((data) => {
-            if (destructorCalled) return;
-            ref.current = data;
-            setStateMock(data);
-        });
-
-        let destructorCalled = false;
-
-        return () => {
-            destructorCalled = true;
-        }
-    }, [callback]);
-
-    const setCallback = (...value: Parameters<GetOrSet<T | undefined>[1]>) => {
-        const setter = value[0];
-        ref.current = typeof setter === 'function' ? (setter as Function)(ref.current) : setter;
-    }
-
-    return [ref.current, setCallback];
-}
+const useAsyncRef = makeUseAsyncRef(setStateMock);
 
+jest.spyOn(AsyncState, 'useAsyncState').mockImplementation(useAsyncRef);
 
 function AttachmentCellMock({ options, ...rest }: {
     readonly options: {
@@ -81,93 +55,10 @@ function AttachmentCellMock({ options, ...rest }: {
 }
 describe("AttachmentCell", () => {
 
-    const attachment = {
-        "id": 5490,
-        "attachmentLocation": "a6daad6c-5091-4461-86ee-eeba9434ef2b.jpg",
-        "attachmentStorageConfig": null,
-        "captureDevice": null,
-        "copyrightDate": null,
-        "copyrightHolder": null,
-        "credit": null,
-        "dateImaged": null,
-        "fileCreatedDate": null,
-        "guid": "7664fc1b-cc39-4f7d-b81c-645fc11e8e1d",
-        "isPublic": true,
-        "license": null,
-        "licenseLogoUrl": null,
-        "metadataText": null,
-        "mimeType": "image/jpeg",
-        "origFilename": "topbrc4.jpg",
-        "remarks": null,
-        "scopeID": null,
-        "scopeType": null,
-        "subjectOrientation": null,
-        "subtype": null,
-        "tableID": 1,
-        "timestampCreated": "2015-05-20T12:16:38",
-        "timestampModified": "2015-05-20T12:16:38",
-        "title": "kubiodiversitylogo.jpg",
-        "type": null,
-        "version": 0,
-        "visibility": null,
-        "attachmentImageAttribute": null,
-        "createdByAgent": "/api/specify/agent/3/",
-        "creator": null,
-        "modifiedByAgent": null,
-        "visibilitySetBy": null,
-        "accessionAttachments": "/api/specify/accessionattachment/?attachment=5490",
-        "agentAttachments": "/api/specify/agentattachment/?attachment=5490",
-        "metadata": "/api/specify/attachmentmetadata/?attachment=5490",
-        "tags": "/api/specify/attachmenttag/?attachment=5490",
-        "borrowAttachments": "/api/specify/borrowattachment/?attachment=5490",
-        "collectingEventAttachments": "/api/specify/collectingeventattachment/?attachment=5490",
-        "collectingTripAttachments": "/api/specify/collectingtripattachment/?attachment=5490",
-        "collectionObjectAttachments": "/api/specify/collectionobjectattachment/?attachment=5490",
-        "conservDescriptionAttachments": "/api/specify/conservdescriptionattachment/?attachment=5490",
-        "conservEventAttachments": "/api/specify/conserveventattachment/?attachment=5490",
-        "dnaSequenceAttachments": "/api/specify/dnasequenceattachment/?attachment=5490",
-        "dnaSequencingRunAttachments": "/api/specify/dnasequencingrunattachment/?attachment=5490",
-        "deaccessionAttachments": "/api/specify/deaccessionattachment/?attachment=5490",
-        "disposalAttachments": "/api/specify/disposalattachment/?attachment=5490",
-        "exchangeInAttachments": "/api/specify/exchangeinattachment/?attachment=5490",
-        "exchangeOutAttachments": "/api/specify/exchangeoutattachment/?attachment=5490",
-        "fieldNotebookAttachments": "/api/specify/fieldnotebookattachment/?attachment=5490",
-        "fieldNotebookPageAttachments": "/api/specify/fieldnotebookpageattachment/?attachment=5490",
-        "fieldNotebookPageSetAttachments": "/api/specify/fieldnotebookpagesetattachment/?attachment=5490",
-        "giftAttachments": "/api/specify/giftattachment/?attachment=5490",
-        "loanAttachments": "/api/specify/loanattachment/?attachment=5490",
-        "localityAttachments": "/api/specify/localityattachment/?attachment=5490",
-        "permitAttachments": "/api/specify/permitattachment/?attachment=5490",
-        "preparationAttachments": "/api/specify/preparationattachment/?attachment=5490",
-        "referenceWorkAttachments": "/api/specify/referenceworkattachment/?attachment=5490",
-        "repositoryAgreementAttachments": "/api/specify/repositoryagreementattachment/?attachment=5490",
-        "storageAttachments": "/api/specify/storageattachment/?attachment=5490",
-        "taxonAttachments": "/api/specify/taxonattachment/?attachment=5490",
-        "treatmentEventAttachments": "/api/specify/treatmenteventattachment/?attachment=5490",
-        "spDataSetAttachments": "/api/specify/spdatasetattachment/?attachment=5490",
-        "resource_uri": "/api/specify/attachment/5490/",
-        "_tableName": "Attachment"
-    } as const;
-
-    const collectionObjectAttachment = {
-        "id": 4732,
-        "collectionmemberid": 4,
-        "ordinal": 0,
-        "remarks": null,
-        "timestampcreated": "2025-07-31T17:00:40",
-        "timestampmodified": "2025-07-31T17:00:40",
-        "version": 0,
-        attachment,
-        "collectionobject": "/api/specify/collectionobject/51731/",
-        "createdbyagent": "/api/specify/agent/3/",
-        "modifiedbyagent": null,
-        "resource_uri": "/api/specify/collectionobjectattachment/4732/"
-    }
-
     overrideAjax("/api/specify/collectionobjectattachment/?limit=20&attachment=5490",
         {
             "objects": [
-                collectionObjectAttachment
+                testCollectionObjectAttachment
             ],
             "meta": {
                 "limit": 20,
@@ -190,7 +81,7 @@ describe("AttachmentCell", () => {
         const { asFragment, rerender, getAllByRole, user } = mount(
             <LoadingContext.Provider value={f.void} >
                 <AttachmentCellMock
-                    attachment={attachment}
+                    attachment={testAttachment}
                     options={options}
                     related={[undefined, setRelated]}
                     onOpen={handleOpen}
@@ -204,7 +95,7 @@ describe("AttachmentCell", () => {
         rerender(
             <LoadingContext.Provider value={f.void} >
                 <AttachmentCellMock
-                    attachment={attachment}
+                    attachment={testAttachment}
                     options={options}
                     related={[undefined, setRelated]}
                     onOpen={handleOpen}
diff --git a/specifyweb/frontend/js_src/lib/components/Attachments/__tests__/AttachmentDialog.test.tsx b/specifyweb/frontend/js_src/lib/components/Attachments/__tests__/AttachmentDialog.test.tsx
new file mode 100644
index 00000000000..00c2033ec09
--- /dev/null
+++ b/specifyweb/frontend/js_src/lib/components/Attachments/__tests__/AttachmentDialog.test.tsx
@@ -0,0 +1,197 @@
+import React from "react";
+import { requireContext } from "../../../tests/helpers";
+import { mount } from "../../../tests/reactUtils";
+import { deserializeResource } from "../../DataModel/serializers";
+import { AttachmentDialog } from "../Dialog";
+import { makeUseAsyncRef, testStaticResources } from "./utils";
+import { UnloadProtectsContext } from "../../Router/UnloadProtect";
+import { TestComponentWrapperRouter } from "../../../tests/utils";
+import { AnySchema, SerializedResource } from "../../DataModel/helperTypes";
+import { clearIdStore } from "../../../hooks/useId";
+import * as AsyncState from "../../../hooks/useAsyncState";
+import { overrideAjax } from "../../../tests/ajax";
+import { RA } from "../../../utils/types";
+import { act } from "react-dom/test-utils";
+import { resourceOn } from "../../DataModel/resource";
+import { overrideAttachmentSettings } from "../attachments";
+import attachmentSettings from '../../../tests/ajax/static/context/attachment_settings.json';
+import { waitFor } from "@testing-library/react";
+
+const { testAttachment, testCollectionObjectAttachment } = testStaticResources;
+
+requireContext();
+
+const setStateMock = jest.fn();
+
+beforeEach(() => {
+    setStateMock.mockClear();
+    clearIdStore();
+});
+
+const oldSetState = React.useState;
+
+
+function useStateMock(defaultValue: unknown) {
+    const [state, rawSetState] = oldSetState(defaultValue);
+    const setState = React.useCallback((value: unknown | ((oldValue: unknown) => unknown)) => {
+        act(() => rawSetState(value))
+    }, [rawSetState]);
+    return [state, setState] as const;
+}
+
+const useAsyncRef = makeUseAsyncRef(setStateMock);
+// jest.spyOn(Resource, 'resourceOn').mockImplementation(resourceOnMock);
+jest.spyOn(AsyncState, 'useAsyncState').mockImplementation(useAsyncRef);
+jest.spyOn(React, 'useState').mockImplementation(useStateMock as typeof oldSetState);
+
+describe("AttachmentDialog", () => {
+
+    overrideAjax("/context/view.json?name=ObjectAttachment&quiet=", {
+        "name": "ObjectAttachment",
+        "class": "edu.ku.brc.specify.datamodel.ObjectAttachmentIFace",
+        "busrules": "edu.ku.brc.specify.datamodel.busrules.AttachmentBusRules",
+        "resourcelabels": "false",
+        "altviews": {
+            "ObjectAttachment Icon View": {
+                "name": "ObjectAttachment Icon View",
+                "viewdef": "ObjectAttachment IconView",
+                "mode": "view"
+            },
+            "ObjectAttachment Icon Edit": {
+                "name": "ObjectAttachment Icon Edit",
+                "viewdef": "ObjectAttachment IconView",
+                "mode": "edit"
+            },
+            "ObjectAttachment Table View": {
+                "name": "ObjectAttachment Table View",
+                "viewdef": "ObjectAttachment Table",
+                "mode": "view"
+            },
+            "ObjectAttachment Table Edit": {
+                "name": "ObjectAttachment Table Edit",
+                "viewdef": "ObjectAttachment Table",
+                "mode": "edit"
+            },
+            "ObjectAttachment Form View": {
+                "name": "ObjectAttachment Form View",
+                "viewdef": "ObjectAttachment Form",
+                "label": "Form",
+                "mode": "view",
+                "default": "true"
+            },
+            "ObjectAttachment Form Edit": {
+                "name": "ObjectAttachment Form Edit",
+                "viewdef": "ObjectAttachment Form",
+                "label": "Form",
+                "mode": "edit"
+            }
+        },
+        "viewdefs": {
+            "ObjectAttachment Table": "\u003Cviewdef type=\"formtable\" name=\"ObjectAttachment Table\" class=\"edu.ku.brc.specify.datamodel.ObjectAttachmentIFace\" gettable=\"edu.ku.brc.af.ui.forms.DataGetterForObj\" settable=\"edu.ku.brc.af.ui.forms.DataSetterForObj\"\u003E\n\t\t\t\u003Cdesc\u003EObjectAttachment grid view.\u003C/desc\u003E\n\t\t\t\u003Cdefinition\u003EObjectAttachment Form\u003C/definition\u003E\n\t\t\u003C/viewdef\u003E\n\t\t",
+            "ObjectAttachment Form": "\u003Cviewdef type=\"form\" name=\"ObjectAttachment Form\" class=\"edu.ku.brc.specify.datamodel.ObjectAttachmentIFace\" gettable=\"edu.ku.brc.af.ui.forms.DataGetterForObj\" settable=\"edu.ku.brc.af.ui.forms.DataSetterForObj\" useresourcelabels=\"true\"\u003E\n\t\t\t\u003Cdesc\u003EThe ObjectAttachment form.\u003C/desc\u003E\n\t\t\t\u003CcolumnDef\u003Ep,2px,p:g\u003C/columnDef\u003E\n\t\t\t\u003CrowDef auto=\"true\" cell=\"p\" sep=\"2px\" /\u003E\n\t\t\t\u003Crows\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"origFilename\" label=\"FILENAME\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"origFilename\" name=\"attachment.origFilename\" initialize=\"editoncreate=true\" uitype=\"browse\" isrequired=\"true\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"title\" label=\"TITLE\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"title\" name=\"attachment.title\" uitype=\"text\" isrequired=\"true\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"ispub\" label=\"\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"ispub\" name=\"attachment.isPublic\" uitype=\"checkbox\" label=\"Make Public\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003C!--   \u003Crow\u003E\n    \t\t        \u003Ccell type=\"subview\" id=\"metadata\" name=\"attachment.metadata\" viewname=\"AttachmentMetadata\" colspan=\"3\"/\u003E\n    \t\t    \u003C/row\u003E --\u003E\n\t\t\t\u003C/rows\u003E\n\t\t\u003C/viewdef\u003E\n\t\t",
+            "ObjectAttachment IconView": "\u003Cviewdef type=\"iconview\" name=\"ObjectAttachment IconView\" class=\"edu.ku.brc.specify.datamodel.ObjectAttachmentIFace\" gettable=\"edu.ku.brc.af.ui.forms.DataGetterForObj\" settable=\"edu.ku.brc.af.ui.forms.DataSetterForObj\"\u003E\n\t\t\t\u003Cdesc\u003EThe ObjectAttachment Icon Viewer\u003C/desc\u003E\n\t\t\u003C/viewdef\u003E\n\t\t"
+        },
+        "view": "\u003Cview name=\"ObjectAttachment\" class=\"edu.ku.brc.specify.datamodel.ObjectAttachmentIFace\" busrules=\"edu.ku.brc.specify.datamodel.busrules.AttachmentBusRules\" resourcelabels=\"false\"\u003E\n\t\t\t\u003Cdesc\u003EThe Object-Attachment View.\u003C/desc\u003E\n\t\t\t\u003Caltviews\u003E\n\t\t\t\t\u003Caltview name=\"ObjectAttachment Icon View\" viewdef=\"ObjectAttachment IconView\" mode=\"view\" /\u003E\n\t\t\t\t\u003Caltview name=\"ObjectAttachment Icon Edit\" viewdef=\"ObjectAttachment IconView\" mode=\"edit\" /\u003E\n\t\t\t\t\u003Caltview name=\"ObjectAttachment Table View\" viewdef=\"ObjectAttachment Table\" mode=\"view\" /\u003E\n\t\t\t\t\u003Caltview name=\"ObjectAttachment Table Edit\" viewdef=\"ObjectAttachment Table\" mode=\"edit\" /\u003E\n\t\t\t\t\u003Caltview name=\"ObjectAttachment Form View\" viewdef=\"ObjectAttachment Form\" label=\"Form\" mode=\"view\" default=\"true\" /\u003E\n\t\t\t\t\u003Caltview name=\"ObjectAttachment Form Edit\" viewdef=\"ObjectAttachment Form\" label=\"Form\" mode=\"edit\" /\u003E\n\t\t\t\u003C/altviews\u003E\n\t\t\u003C/view\u003E\n\t\t",
+        "viewsetName": "Global",
+        "viewsetLevel": "Backstop",
+        "viewsetSource": "disk",
+        "viewsetId": null,
+        "viewsetFile": "backstop/global.views.xml"
+    });
+
+    overrideAjax("/context/view.json?name=CollectionObjectAttachment&quiet=", {
+        "name": "CollectionObjectAttachment",
+        "class": "edu.ku.brc.specify.datamodel.CollectionObjectAttachment",
+        "busrules": "edu.ku.brc.specify.datamodel.busrules.AttachmentBusRules",
+        "resourcelabels": "false",
+        "altviews": {
+            "CollectionObjectAttachment Icon View": {
+                "name": "CollectionObjectAttachment Icon View",
+                "viewdef": "CollectionObjectAttachment IconView",
+                "mode": "view"
+            },
+            "CollectionObjectAttachment Icon Edit": {
+                "name": "CollectionObjectAttachment Icon Edit",
+                "viewdef": "CollectionObjectAttachment IconView",
+                "mode": "edit"
+            },
+            "CollectionObjectAttachment Table View": {
+                "name": "CollectionObjectAttachment Table View",
+                "viewdef": "CollectionObjectAttachment Table",
+                "mode": "view"
+            },
+            "CollectionObjectAttachment Table Edit": {
+                "name": "CollectionObjectAttachment Table Edit",
+                "viewdef": "CollectionObjectAttachment Table",
+                "mode": "edit"
+            },
+            "CollectionObjectAttachment Form View": {
+                "name": "CollectionObjectAttachment Form View",
+                "viewdef": "CollectionObjectAttachment Form",
+                "label": "Form",
+                "mode": "view",
+                "default": "true"
+            },
+            "CollectionObjectAttachment Form Edit": {
+                "name": "CollectionObjectAttachment Form Edit",
+                "viewdef": "CollectionObjectAttachment Form",
+                "label": "Form",
+                "mode": "edit"
+            }
+        },
+        "viewdefs": {
+            "CollectionObjectAttachment Form": "\u003Cviewdef type=\"form\" name=\"CollectionObjectAttachment Form\" class=\"edu.ku.brc.specify.datamodel.CollectionObjectAttachment\" gettable=\"edu.ku.brc.af.ui.forms.DataGetterForObj\" settable=\"edu.ku.brc.af.ui.forms.DataSetterForObj\" useresourcelabels=\"true\"\u003E\n\t\t\t\u003Cdesc\u003EThe CollectionObjectAttachment form.\u003C/desc\u003E\n\t\t\t\u003C!--\u003CcolumnDef\u003E110px,2dlu,p:g,5dlu,100px,2dlu,85px\u003C/columnDef\u003E --\u003E\n\t\t\t\u003CcolumnDef\u003Ep,5dlu,p:g\u003C/columnDef\u003E\n\t\t\t\u003CrowDef auto=\"true\" cell=\"p\" sep=\"2px\" /\u003E\n\t\t\t\u003Crows\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"origFilename\" label=\"FILENAME\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"origFilename\" name=\"attachment.origFilename\" initialize=\"editoncreate=true\" uitype=\"browse\" isrequired=\"true\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"title\" label=\"TITLE\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"title\" name=\"attachment.title\" isrequired=\"true\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003C!--\u003Crow\u003E\n                    \u003Ccell type=\"subview\" id=\"metadata\" name=\"attachment.metadata\" viewname=\"AttachmentMetadata\" colspan=\"3\"/\u003E\n                \u003C/row\u003E --\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"dateImaged\" label=\"DATE_IMAGED\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"dateImaged\" name=\"attachment.dateImaged\" uitype=\"text\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"fileCreatedDate\" label=\"FILE_CREATED_DATE\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"fileCreatedDate\" name=\"attachment.fileCreatedDate\" uitype=\"formattedtext\" uifieldformatter=\"Date\" default=\"today\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"copyrightHolder\" label=\"COPYRIGHT_HOLDER\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"copyrightHolder\" name=\"attachment.copyrightHolder\" uitype=\"text\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"copyrightDate\" label=\"COPYRIGHT_DATE\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"copyrightDate\" name=\"attachment.copyrightDate\" uitype=\"text\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"attachmentLocation\" label=\"ATTACHMENT_LOCATION\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"attachmentLocation\" name=\"attachment.attachmentLocation\" uitype=\"text\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"isPublic\" label=\"is public\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"isPublic\" name=\"attachment.isPublic\" isrequired=\"true\" uitype=\"checkbox\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"license\" label=\"LICENSE\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"license\" name=\"attachment.license\" uitype=\"text\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"credit\" label=\"CREDIT\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"credit\" name=\"attachment.credit\" uitype=\"text\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"mimeType\" label=\"MIME_TYPE\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"mimeType\" name=\"attachment.mimeType\" uitype=\"text\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"remarks\" label=\"REMARKS\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"remarks\" name=\"attachment.remarks\" uitype=\"textareabrief\" rows=\"2\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003C!--\u003Crow\u003E\n                    \u003Ccell type=\"subview\" id=\"imageatt\" viewname=\"AttachmentImageAttribute\" name=\"attachment.attachmentImageAttribute\" colspan=\"3\" /\u003E\n                \u003C/row\u003E--\u003E\n\t\t\t\u003C/rows\u003E\n\t\t\u003C/viewdef\u003E\n\t\t",
+            "CollectionObjectAttachment Table": "\u003Cviewdef type=\"formtable\" name=\"CollectionObjectAttachment Table\" class=\"edu.ku.brc.specify.datamodel.CollectionObjectAttachment\" gettable=\"edu.ku.brc.af.ui.forms.DataGetterForObj\" settable=\"edu.ku.brc.af.ui.forms.DataSetterForObj\"\u003E\n\t\t\t\u003Cdesc\u003EObjectAttachment grid view.\u003C/desc\u003E\n\t\t\t\u003Cdefinition\u003EObjectAttachment Form\u003C/definition\u003E\n\t\t\u003C/viewdef\u003E\n\t\t",
+            "CollectionObjectAttachment IconView": "\u003Cviewdef type=\"iconview\" name=\"CollectionObjectAttachment IconView\" class=\"edu.ku.brc.specify.datamodel.CollectionObjectAttachment\" gettable=\"edu.ku.brc.af.ui.forms.DataGetterForObj\" settable=\"edu.ku.brc.af.ui.forms.DataSetterForObj\"\u003E\n\t\t\t\u003Cdesc\u003EThe ObjectAttachment Icon Viewer\u003C/desc\u003E\n\t\t\u003C/viewdef\u003E\n\t\t",
+            "ObjectAttachment Form": "\u003Cviewdef type=\"form\" name=\"ObjectAttachment Form\" class=\"edu.ku.brc.specify.datamodel.ObjectAttachmentIFace\" gettable=\"edu.ku.brc.af.ui.forms.DataGetterForObj\" settable=\"edu.ku.brc.af.ui.forms.DataSetterForObj\" useresourcelabels=\"true\"\u003E\n\t\t\t\u003Cdesc\u003EThe ObjectAttachment form.\u003C/desc\u003E\n\t\t\t\u003CcolumnDef\u003Ep,2px,p:g\u003C/columnDef\u003E\n\t\t\t\u003CrowDef auto=\"true\" cell=\"p\" sep=\"2px\" /\u003E\n\t\t\t\u003Crows\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"origFilename\" label=\"FILENAME\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"origFilename\" name=\"attachment.origFilename\" initialize=\"editoncreate=true\" uitype=\"browse\" isrequired=\"true\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"title\" label=\"TITLE\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"title\" name=\"attachment.title\" uitype=\"text\" isrequired=\"true\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003Crow\u003E\n\t\t\t\t\t\u003Ccell type=\"label\" labelfor=\"ispub\" label=\"\" /\u003E\n\t\t\t\t\t\u003Ccell type=\"field\" id=\"ispub\" name=\"attachment.isPublic\" uitype=\"checkbox\" label=\"Make Public\" /\u003E\n\t\t\t\t\u003C/row\u003E\n\t\t\t\t\u003C!--   \u003Crow\u003E\n    \t\t        \u003Ccell type=\"subview\" id=\"metadata\" name=\"attachment.metadata\" viewname=\"AttachmentMetadata\" colspan=\"3\"/\u003E\n    \t\t    \u003C/row\u003E --\u003E\n\t\t\t\u003C/rows\u003E\n\t\t\u003C/viewdef\u003E\n\t\t"
+        },
+        "view": "\u003Cview name=\"CollectionObjectAttachment\" class=\"edu.ku.brc.specify.datamodel.CollectionObjectAttachment\" busrules=\"edu.ku.brc.specify.datamodel.busrules.AttachmentBusRules\" resourcelabels=\"false\"\u003E\n\t\t\t\u003Cdesc\u003EThe Collection Object-Attachment View.\u003C/desc\u003E\n\t\t\t\u003Caltviews\u003E\n\t\t\t\t\u003Caltview name=\"CollectionObjectAttachment Icon View\" viewdef=\"CollectionObjectAttachment IconView\" mode=\"view\" /\u003E\n\t\t\t\t\u003Caltview name=\"CollectionObjectAttachment Icon Edit\" viewdef=\"CollectionObjectAttachment IconView\" mode=\"edit\" /\u003E\n\t\t\t\t\u003Caltview name=\"CollectionObjectAttachment Table View\" viewdef=\"CollectionObjectAttachment Table\" mode=\"view\" /\u003E\n\t\t\t\t\u003Caltview name=\"CollectionObjectAttachment Table Edit\" viewdef=\"CollectionObjectAttachment Table\" mode=\"edit\" /\u003E\n\t\t\t\t\u003Caltview name=\"CollectionObjectAttachment Form View\" viewdef=\"CollectionObjectAttachment Form\" label=\"Form\" mode=\"view\" default=\"true\" /\u003E\n\t\t\t\t\u003Caltview name=\"CollectionObjectAttachment Form Edit\" viewdef=\"CollectionObjectAttachment Form\" label=\"Form\" mode=\"edit\" /\u003E\n\t\t\t\u003C/altviews\u003E\n\t\t\u003C/view\u003E\n\t\t",
+        "viewsetName": "Global",
+        "viewsetLevel": "Backstop",
+        "viewsetSource": "disk",
+        "viewsetId": null,
+        "viewsetFile": "backstop/global.views.xml"
+    });
+
+    test("simple render", async () => {
+        jest.spyOn(console, 'warn').mockImplementation();
+
+        overrideAttachmentSettings(attachmentSettings);
+
+        const setRelated = jest.fn();
+        const handleClose = jest.fn();
+        const handleChange = jest.fn();
+        const handlePrevious = jest.fn();
+        const handleNext = jest.fn();
+        const handleViewRecord = jest.fn();
+
+        const related = deserializeResource(testCollectionObjectAttachment as unknown as SerializedResource<AnySchema>);
+
+        const { getByRole, rerender } = mount(
+            <TestComponentWrapperRouter
+                initialEntries={['/attachments/']}
+                path="attachments"
+            >
+                <UnloadProtectsContext.Provider value={[]}>
+                    <AttachmentDialog
+                        attachment={testAttachment}
+                        related={[related, setRelated]}
+                        onClose={handleClose}
+                        onChange={handleChange}
+                        onPrevious={handlePrevious}
+                        onNext={handleNext}
+                        onViewRecord={handleViewRecord}
+                    />
+                </UnloadProtectsContext.Provider>
+            </TestComponentWrapperRouter>
+        );
+
+        const dialog = getByRole('dialog');
+        await waitFor(() => {
+            expect(setStateMock).toBeCalled();
+        });
+        expect(dialog).toMatchSnapshot();
+
+    });
+
+});
\ No newline at end of file
diff --git a/specifyweb/frontend/js_src/lib/components/Attachments/__tests__/__snapshots__/AttachmentDialog.test.tsx.snap b/specifyweb/frontend/js_src/lib/components/Attachments/__tests__/__snapshots__/AttachmentDialog.test.tsx.snap
new file mode 100644
index 00000000000..026725c9509
--- /dev/null
+++ b/specifyweb/frontend/js_src/lib/components/Attachments/__tests__/__snapshots__/AttachmentDialog.test.tsx.snap
@@ -0,0 +1,433 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AttachmentDialog simple render 1`] = `
+<div
+  aria-describedby="modal-0-content"
+  aria-labelledby="modal-0-header"
+  aria-modal="true"
+  class="ReactModal__Content ReactModal__Content--after-open 
+        flex flex-col gap-2 p-4 outline-none rounded resize max-w-[90%] shadow-lg shadow-gray-500 max-h-[90%] min-w-[min(30rem,90%)]
+        overflow-x-hidden text-neutral-900 duration-0
+        dark:border dark:border-neutral-700 dark:text-neutral-200
+        
+        
+    bg-gradient-to-bl from-gray-200 via-white
+    to-white dark:from-neutral-800 dark:via-neutral-900 dark:to-neutral-900
+  
+      "
+  role="dialog"
+  style="transform: translate(0px,0px);"
+  tabindex="-1"
+>
+  <div
+    class="
+          flex items-center gap-2 md:gap-4
+          -m-4 cursor-move p-4
+          flex-wrap
+        "
+    id="modal-0-handle"
+  >
+    <div
+      class="flex items-center gap-2"
+    >
+      <span
+        class="text-blue-500"
+      >
+        <svg
+          aria-hidden="true"
+          class="w-6 h-6 flex-shrink-0"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+      <h2
+        class="font-semibold text-black dark:text-white text-xl"
+        id="modal-0-header"
+      >
+        kubiodiversitylogo.jpg
+      </h2>
+    </div>
+    <span
+      class="-ml-4 flex-1"
+    />
+    <button
+      class="button rounded cursor-pointer active:brightness-80 px-4 py-2
+    disabled:bg-gray-200 disabled:dark:ring-neutral-500 disabled:ring-gray-400 disabled:text-gray-500 
+    dark:disabled:!bg-neutral-700 gap-2 inline-flex items-center capitalize justify-center shadow-sm dialog-icon-info hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--info-button-color)] text-white"
+      type="button"
+    >
+      Hide Form
+    </button>
+  </div>
+  <div
+    class="
+            dark:text-neutral-350 -mx-1 flex-1 overflow-y-auto px-1 py-4
+            text-gray-700 flex flex-col gap-2
+          "
+    id="modal-0-content"
+  >
+    <div
+      class="flex flex-1 gap-4 overflow-auto"
+    >
+      <button
+        aria-label="Previous"
+        class="icon link rounded p-4"
+        title="Previous"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="w-6 h-6 flex-shrink-0"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </button>
+      <form
+        class="not-submitted flex flex-col gap-4 flex flex-1 !flex-row gap-8"
+        id="save-button-0-form"
+      >
+        <div
+          class="flex min-h-[theme(spacing.60)] w-full min-w-[theme(spacing.60)] flex-1 items-center justify-center"
+        >
+          <div
+            class="hover:animate-hue-rotate [.reduce-motion_&]:animate-hue-rotate"
+          >
+            <div
+              class="
+        spinner-border h-20 w-20 rounded-full border-8 border-brand-300
+        [.motion-normal_&]:m-px
+        [.motion-normal_&]:animate-spin
+        [.motion-normal_&]:border-r-transparent
+      "
+              role="status"
+            >
+              <span
+                class="sr-only"
+              >
+                Something custom!
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="flex flex-col gap-2"
+        >
+          <fieldset
+            class="contents"
+          >
+            <legend>
+              <div
+                class="gap-2 flex font-bold border-b border-gray-500 pt-3 pb-1 items-center"
+              >
+                <h3
+                  class="text-lg font-bold flex items-center gap-2"
+                >
+                  kubiodiversitylogo.jpg
+                </h3>
+                <span
+                  class="-ml-2 flex-1"
+                />
+                <button
+                  aria-label="Form Meta"
+                  class="button rounded cursor-pointer active:brightness-80 px-4 py-2
+    disabled:bg-gray-200 disabled:dark:ring-neutral-500 disabled:ring-gray-400 disabled:text-gray-500 
+    dark:disabled:!bg-neutral-700 gap-2 inline-flex items-center capitalize justify-center shadow-sm !py-1 !px-2 button hover:brightness-90 dark:hover:brightness-125 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
+dark:text-gray-100 ring-1 ring-gray-400 shadow-sm dark:ring-0
+    disabled:ring-gray-400 disabled:dark:ring-neutral-500"
+                  title="Form Meta"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="w-6 h-6 flex-shrink-0"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      clip-rule="evenodd"
+                      d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </legend>
+            <div
+              class="border border-gray-500 border-t-0 rounded-b p-1"
+            >
+              <div
+                class="
+          shrink-0
+          overflow-auto
+          
+        "
+                lang="en"
+              >
+                <div
+                  aria-label="Loading…"
+                  class="flex gap-4 flex-col"
+                >
+                  <div
+                    class="justify-beween m-4 flex flex-col flex-wrap gap-4"
+                  >
+                    <div
+                      class="flex flex-wrap items-center justify-between gap-8"
+                    >
+                      <div
+                        class="m-4 flex items-center gap-2"
+                      >
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-4 w-14 rounded"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-16 rounded"
+                        />
+                      </div>
+                      <div
+                        class="m-4 flex gap-2"
+                      >
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-4 w-14 rounded"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-16 rounded"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse w-6 rounded-full"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse w-6 rounded-full"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse w-6 rounded-full"
+                        />
+                      </div>
+                      <div
+                        class="m-4 flex items-center gap-2"
+                      >
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-4 w-14 rounded"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-16 rounded"
+                        />
+                      </div>
+                    </div>
+                    <div
+                      class="flex gap-2"
+                    >
+                      <div
+                        class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-16 rounded"
+                      />
+                      <div
+                        class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-6 rounded"
+                      />
+                      <div
+                        class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-6 rounded"
+                      />
+                    </div>
+                    <div>
+                      <div
+                        class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-4 rounded"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="justify-beween m-4 flex flex-col flex-wrap gap-4"
+                  >
+                    <div
+                      class="flex flex-wrap items-center justify-between gap-8"
+                    >
+                      <div
+                        class="flex gap-2"
+                      >
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-16 rounded"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-6 rounded"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-6 rounded"
+                        />
+                      </div>
+                      <div
+                        class="m-4 flex items-center gap-2"
+                      >
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-4 w-14 rounded"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-16 rounded"
+                        />
+                      </div>
+                      <div
+                        class="m-4 flex items-center gap-2"
+                      >
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-4 w-14 rounded"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-16 rounded"
+                        />
+                      </div>
+                    </div>
+                    <div>
+                      <div
+                        class="flex gap-2"
+                      >
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-6 rounded"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-6 rounded"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-16 rounded"
+                        />
+                      </div>
+                      <div
+                        class="m-4 flex justify-center gap-2"
+                      >
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-4 w-14 rounded"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-16 rounded"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse w-6 rounded-full"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse w-6 rounded-full"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse w-6 rounded-full"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="justify-beween m-4 flex flex-col flex-wrap gap-4"
+                  >
+                    <div
+                      class="flex flex-wrap items-center justify-between gap-8"
+                    >
+                      <div
+                        class="flex gap-2"
+                      >
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-64 rounded"
+                        />
+                      </div>
+                      <div
+                        class="m-4 flex items-center gap-2"
+                      >
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-4 w-14 rounded"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-4 w-14 rounded"
+                        />
+                      </div>
+                      <div
+                        class="m-4 flex items-center gap-2"
+                      >
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-4 w-14 rounded"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-16 rounded"
+                        />
+                      </div>
+                    </div>
+                    <div>
+                      <div
+                        class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-4 rounded"
+                      />
+                    </div>
+                    <div>
+                      <div
+                        class="flex gap-2"
+                      >
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-16 rounded"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-6 rounded"
+                        />
+                        <div
+                          class="bg-gray-200 dark:bg-neutral-600 [body:not(.reduce-motion)_&]:animate-pulse h-6 w-6 rounded"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </fieldset>
+          <span
+            class="flex-1"
+          />
+        </div>
+      </form>
+      <button
+        aria-label="Next"
+        class="icon link rounded p-4"
+        title="Next"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="w-6 h-6 flex-shrink-0"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+  <div
+    class="flex gap-2 justify-end"
+  >
+    <button
+      class="button rounded cursor-pointer active:brightness-80 px-4 py-2
+    disabled:bg-gray-200 disabled:dark:ring-neutral-500 disabled:ring-gray-400 disabled:text-gray-500 
+    dark:disabled:!bg-neutral-700 gap-2 inline-flex items-center capitalize justify-center shadow-sm dialog-icon-info hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--info-button-color)] text-white"
+      type="button"
+    >
+      Close
+    </button>
+    <input
+      class="button rounded cursor-pointer active:brightness-80 px-4 py-2
+    disabled:bg-gray-200 disabled:dark:ring-neutral-500 disabled:ring-gray-400 disabled:text-gray-500 
+    dark:disabled:!bg-neutral-700 gap-2 inline-flex items-center capitalize justify-center shadow-sm hover:brightness-90 dark:hover:brightness-150 text-white bg-[color:var(--save-button-color)]"
+      disabled=""
+      form="save-button-0-form"
+      type="submit"
+      value="Save"
+    />
+  </div>
+</div>
+`;
diff --git a/specifyweb/frontend/js_src/lib/components/Attachments/__tests__/utils.ts b/specifyweb/frontend/js_src/lib/components/Attachments/__tests__/utils.ts
new file mode 100644
index 00000000000..dc06527424b
--- /dev/null
+++ b/specifyweb/frontend/js_src/lib/components/Attachments/__tests__/utils.ts
@@ -0,0 +1,129 @@
+import React from "react";
+import { GetOrSet, RA } from "../../../utils/types";
+import { resourceOn } from "../../DataModel/resource";
+import { act } from "react-dom/test-utils";
+
+const testAttachment = {
+    "id": 5490,
+    "attachmentLocation": "a6daad6c-5091-4461-86ee-eeba9434ef2b.jpg",
+    "attachmentStorageConfig": null,
+    "captureDevice": null,
+    "copyrightDate": null,
+    "copyrightHolder": null,
+    "credit": null,
+    "dateImaged": null,
+    "fileCreatedDate": null,
+    "guid": "7664fc1b-cc39-4f7d-b81c-645fc11e8e1d",
+    "isPublic": true,
+    "license": null,
+    "licenseLogoUrl": null,
+    "metadataText": null,
+    "mimeType": "image/jpeg",
+    "origFilename": "topbrc4.jpg",
+    "remarks": null,
+    "scopeID": null,
+    "scopeType": null,
+    "subjectOrientation": null,
+    "subtype": null,
+    "tableID": 1,
+    "timestampCreated": "2015-05-20T12:16:38",
+    "timestampModified": "2015-05-20T12:16:38",
+    "title": "kubiodiversitylogo.jpg",
+    "type": null,
+    "version": 0,
+    "visibility": null,
+    "attachmentImageAttribute": null,
+    "createdByAgent": "/api/specify/agent/3/",
+    "creator": null,
+    "modifiedByAgent": null,
+    "visibilitySetBy": null,
+    "accessionAttachments": "/api/specify/accessionattachment/?attachment=5490",
+    "agentAttachments": "/api/specify/agentattachment/?attachment=5490",
+    "metadata": "/api/specify/attachmentmetadata/?attachment=5490",
+    "tags": "/api/specify/attachmenttag/?attachment=5490",
+    "borrowAttachments": "/api/specify/borrowattachment/?attachment=5490",
+    "collectingEventAttachments": "/api/specify/collectingeventattachment/?attachment=5490",
+    "collectingTripAttachments": "/api/specify/collectingtripattachment/?attachment=5490",
+    "collectionObjectAttachments": "/api/specify/collectionobjectattachment/?attachment=5490",
+    "conservDescriptionAttachments": "/api/specify/conservdescriptionattachment/?attachment=5490",
+    "conservEventAttachments": "/api/specify/conserveventattachment/?attachment=5490",
+    "dnaSequenceAttachments": "/api/specify/dnasequenceattachment/?attachment=5490",
+    "dnaSequencingRunAttachments": "/api/specify/dnasequencingrunattachment/?attachment=5490",
+    "deaccessionAttachments": "/api/specify/deaccessionattachment/?attachment=5490",
+    "disposalAttachments": "/api/specify/disposalattachment/?attachment=5490",
+    "exchangeInAttachments": "/api/specify/exchangeinattachment/?attachment=5490",
+    "exchangeOutAttachments": "/api/specify/exchangeoutattachment/?attachment=5490",
+    "fieldNotebookAttachments": "/api/specify/fieldnotebookattachment/?attachment=5490",
+    "fieldNotebookPageAttachments": "/api/specify/fieldnotebookpageattachment/?attachment=5490",
+    "fieldNotebookPageSetAttachments": "/api/specify/fieldnotebookpagesetattachment/?attachment=5490",
+    "giftAttachments": "/api/specify/giftattachment/?attachment=5490",
+    "loanAttachments": "/api/specify/loanattachment/?attachment=5490",
+    "localityAttachments": "/api/specify/localityattachment/?attachment=5490",
+    "permitAttachments": "/api/specify/permitattachment/?attachment=5490",
+    "preparationAttachments": "/api/specify/preparationattachment/?attachment=5490",
+    "referenceWorkAttachments": "/api/specify/referenceworkattachment/?attachment=5490",
+    "repositoryAgreementAttachments": "/api/specify/repositoryagreementattachment/?attachment=5490",
+    "storageAttachments": "/api/specify/storageattachment/?attachment=5490",
+    "taxonAttachments": "/api/specify/taxonattachment/?attachment=5490",
+    "treatmentEventAttachments": "/api/specify/treatmenteventattachment/?attachment=5490",
+    "spDataSetAttachments": "/api/specify/spdatasetattachment/?attachment=5490",
+    "resource_uri": "/api/specify/attachment/5490/",
+    "_tableName": "Attachment"
+} as const;
+
+const testCollectionObjectAttachment = {
+    "id": 4732,
+    "collectionmemberid": 4,
+    "ordinal": 0,
+    "remarks": null,
+    "timestampcreated": "2025-07-31T17:00:40",
+    "timestampmodified": "2025-07-31T17:00:40",
+    "version": 0,
+    attachment: testAttachment,
+    "collectionobject": "/api/specify/collectionobject/51731/",
+    "createdbyagent": "/api/specify/agent/3/",
+    "modifiedbyagent": null,
+    "resource_uri": "/api/specify/collectionobjectattachment/4732/",
+    "_tableName": "CollectionObjectAttachment"
+} as const;
+
+export const testStaticResources = {
+    testAttachment,
+    testCollectionObjectAttachment
+};
+
+export function makeUseAsyncRef<T>(onSetState: (data: T | undefined)=>void){
+
+    function useAsyncRef<INNER extends T>(
+        callback: () => Promise<INNER | undefined> | INNER | undefined,
+        _: boolean
+    ): GetOrSet<INNER | undefined> {
+        const ref = React.useRef<INNER | undefined>(undefined);
+
+        React.useLayoutEffect(() => {
+            ref.current = undefined;
+
+            Promise.resolve(callback()).then((data) => {
+                if (destructorCalled) return;
+                ref.current = data;
+                onSetState(data);
+            });
+
+            let destructorCalled = false;
+
+            return () => {
+                destructorCalled = true;
+            }
+        }, [callback]);
+
+        const setCallback = (...value: Parameters<GetOrSet<INNER | undefined>[1]>) => {
+            const setter = value[0];
+            ref.current = typeof setter === 'function' ? (setter as Function)(ref.current) : setter;
+        }
+
+        return [ref.current, setCallback];
+    }
+
+    return useAsyncRef
+
+}