fix error sharing image and failing to upload, fix upload in webkit/safari, and test it

src/views/TestView.vue

@@ -157,7 +157,7 @@
     <div class="mt-8">
       <h2 class="text-xl font-bold mb-4">Image Sharing</h2>
       Populates the "shared-photo" view as if they used "share_target".
-      <input type="file" @change="uploadFile" />
+      <input type="file" data-testid="fileInput" @change="uploadFile" />
       <router-link
         v-if="showFileNextStep()"
         :to="{
@@ -165,6 +165,7 @@
           query: { fileName },
         }"
         class="block w-full text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2 mt-2"
+        data-testid="fileUploadButton"
       >
         Go to Shared Page
       </router-link>
@@ -257,8 +258,10 @@ import {
 } from "@/libs/crypto/vc/passkeyDidPeer";
 import {
   AccountKeyInfo,
+  blobToBase64,
   getAccount,
   registerAndSavePasskey,
+  SHARED_PHOTO_BASE64_KEY,
 } from "@/libs/util";
 
 const inputFileNameRef = ref<Blob>();
@@ -320,12 +323,13 @@ export default class Help extends Vue {
           const blob = new Blob([new Uint8Array(data)], {
             type: file.type,
           });
+          const blobB64 = await blobToBase64(blob);
           this.fileName = file.name as string;
-          const temp = await db.temp.get("shared-photo");
+          const temp = await db.temp.get(SHARED_PHOTO_BASE64_KEY);
           if (temp) {
-            await db.temp.update("shared-photo", { blob });
+            await db.temp.update(SHARED_PHOTO_BASE64_KEY, { blobB64 });
           } else {
-            await db.temp.add({ id: "shared-photo", blob });
+            await db.temp.add({ id: SHARED_PHOTO_BASE64_KEY, blobB64 });
           }
         }
       };