diff --git a/src/frontend/hooks/server/media.ts b/src/frontend/hooks/server/media.ts
index ee2ca4a77..344cbfde6 100644
--- a/src/frontend/hooks/server/media.ts
+++ b/src/frontend/hooks/server/media.ts
@@ -7,6 +7,7 @@ import {URL} from 'react-native-url-polyfill';
 import {DraftPhoto} from '../../contexts/PhotoPromiseContext/types';
 import {useProject} from './projects';
 import {Buffer} from 'buffer';
+import {convertUrlToBase64} from '../../utils/base64.ts';
 
 type SavablePhoto = SetRequired<
   Pick<DraftPhoto, 'originalUri' | 'previewUri' | 'thumbnailUri'>,
@@ -102,12 +103,8 @@ export function useAttachmentsBase64Query(
       return {
         queryKey: ['blobAsBase64', attachment.hash],
         queryFn: async () => {
-          const imageResponse = await fetch(attachment.url);
-          const imageType = imageResponse.headers.get('content-type');
-          const arrayBuffer = await imageResponse.arrayBuffer();
-          const base64 = Buffer.from(arrayBuffer).toString('base64');
-
-          return `data:${imageType};base64,${base64}`;
+          const base64Uri = await convertUrlToBase64(attachment.url);
+          return {...attachment, base64Uri};
         },
       };
     }),
diff --git a/src/frontend/utils/base64.ts b/src/frontend/utils/base64.ts
new file mode 100644
index 000000000..d982d0449
--- /dev/null
+++ b/src/frontend/utils/base64.ts
@@ -0,0 +1,9 @@
+import {Buffer} from 'buffer';
+
+export const convertUrlToBase64 = async (url: string) => {
+  const imageResponse = await fetch(url);
+  const imageType = imageResponse.headers.get('content-type');
+  const arrayBuffer = await imageResponse.arrayBuffer();
+  const base64 = Buffer.from(arrayBuffer).toString('base64');
+  return `data:${imageType};base64,${base64}`;
+};