Add gallery button

showbits-thermal-printer-ui/src/components/CPhotoButtonGallery.vue

@@ -1,10 +1,25 @@
 <script setup lang="ts">
 import { RiMultiImageFill } from "@remixicon/vue";
+import { useTemplateRef } from "vue";
+
+const emit = defineEmits<{
+  click: [file: File];
+}>();
+
+const image = useTemplateRef<HTMLInputElement>("image");
+
+function onImageChange() {
+  const theFile = image.value?.files?.[0];
+  if (theFile === undefined) return;
+  if (!theFile.type.startsWith("image/")) return;
+  emit("click", theFile);
+}
 </script>
 
 <template>
   <label>
     <RiMultiImageFill size="48px" />
+    <input ref="image" type="file" accept="image/*" @change="onImageChange" />
   </label>
 </template>
 
@@ -27,4 +42,8 @@ label:active {
 svg {
   display: block;
 }
+
+input {
+  display: none;
+}
 </style>