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

src/views/SharedPhotoView.vue

@@ -66,7 +66,8 @@ import {
 } from "@/constants/app";
 import { db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { getHeaders } from "@/libs/endorserServer";
+import { accessToken } from "@/libs/crypto";
+import { base64ToBlob, SHARED_PHOTO_BASE64_KEY } from "@/libs/util";
 
 @Component({ components: { PhotoDialog, QuickNav } })
 export default class SharedPhotoView extends Vue {
@@ -86,16 +87,19 @@ export default class SharedPhotoView extends Vue {
       const settings = await db.settings.get(MASTER_SETTINGS_KEY);
       this.activeDid = settings?.activeDid as string;
 
-      const temp = await db.temp.get("shared-photo");
+      const temp = await db.temp.get(SHARED_PHOTO_BASE64_KEY);
+      const imageB64 = temp?.blobB64 as string;
       if (temp) {
-        this.imageBlob = temp.blob;
+        this.imageBlob = base64ToBlob(imageB64);
 
         // clear the temp image
-        db.temp.delete("shared-photo");
+        db.temp.delete(SHARED_PHOTO_BASE64_KEY);
 
         this.imageFileName = (this.$route as Router).query[
           "fileName"
         ] as string;
+      } else {
+        console.error("No appropriate image found in temp storage.", temp);
       }
     } catch (err: unknown) {
       console.error("Got an error loading an identifier:", err);
@@ -156,7 +160,11 @@ export default class SharedPhotoView extends Vue {
     let result;
     try {
       // send the image to the server
-      const headers = await getHeaders(this.activeDid);
+      const token = await accessToken(this.activeDid);
+      const headers = {
+        Authorization: "Bearer " + token,
+        // axios fills in Content-Type of multipart/form-data
+      };
       const formData = new FormData();
       formData.append(
         "image",