add a share_target for people to add a photo

src/views/TestView.vue

@@ -153,13 +153,66 @@
         Notif OFF
       </button>
     </div>
+
+    <div>
+      <h2 class="text-xl font-bold mb-4">Share Image</h2>
+      Populates the "shared-photo" view as if they used "share_target".
+      <input type="file" @change="uploadFile" />
+      <router-link
+        v-if="showFileNextStep()"
+        :to="{
+          name: 'shared-photo',
+          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"
+      >
+        Go to Shared Page
+      </router-link>
+    </div>
   </section>
 </template>
 
 <script lang="ts">
+import { ref } from "vue";
 import { Component, Vue } from "vue-facing-decorator";
+
 import QuickNav from "@/components/QuickNav.vue";
+import { db } from "@/db/index";
+
+const inputFileNameRef = ref<Blob>();
 
 @Component({ components: { QuickNav } })
-export default class Help extends Vue {}
+export default class Help extends Vue {
+  fileName?: string;
+
+  async uploadFile(event: Event) {
+    inputFileNameRef.value = event.target.files[0];
+    // https://developer.mozilla.org/en-US/docs/Web/API/File
+    // ... plus it has a `type` property from my testing
+    const file = inputFileNameRef.value;
+    if (file != null) {
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        const data = e.target?.result as ArrayBuffer;
+        if (data) {
+          const blob = new Blob([new Uint8Array(data)], {
+            type: file.type,
+          });
+          this.fileName = file.name as string;
+          const temp = await db.temp.get("shared-photo");
+          if (temp) {
+            await db.temp.update("shared-photo", { blob });
+          } else {
+            await db.temp.add({ id: "shared-photo", blob });
+          }
+        }
+      };
+      reader.readAsArrayBuffer(file as Blob);
+    }
+  }
+
+  showFileNextStep() {
+    return !!inputFileNameRef.value;
+  }
+}
 </script>