feat: browseable without open dialog

src/components/ImageUploadDialog.vue

@@ -1,13 +1,17 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
 import AppBox from './app/AppBox.vue';
 
+defineExpose({ browse });
 defineProps<{
   clearButtonDisabled?: boolean;
   clearButton?: boolean;
   hiddenFooter?: boolean;
   defaultUrl?: string;
 }>();
+defineEmits<{
+  (e: 'save', file: File | null, url: string | null): void;
+}>();
+
 const imageUrl = defineModel<string>('imageUrl', {
   required: false,
   default: '',
@@ -23,17 +27,24 @@ const dialogState = defineModel<boolean>('dialogState', {
 const file = defineModel<File | null>('file', {
   required: true,
 });
-defineEmits<{
-  (e: 'save', file: File | null, url: string | null): void;
-}>();
 
 const reader = new FileReader();
-const inputFile = ref<HTMLInputElement>();
+const inputFile = (() => {
+  const _element = document.createElement('input');
+  _element.type = 'file';
+  _element.accept = 'image/*';
+  _element.addEventListener('change', change);
+  return _element;
+})();
 
 reader.addEventListener('load', () => {
   if (typeof reader.result === 'string') imageUrl.value = reader.result;
 });
 
+function browse() {
+  inputFile?.click();
+}
+
 function change(e: Event) {
   const _element = e.target as HTMLInputElement | null;
   const _file = _element?.files?.[0];
@@ -45,6 +56,7 @@ function change(e: Event) {
 }
 </script>
 <template>
+  <input type="file" accept="image/*" ref="inputFile" @change="change" hidden />
   <q-dialog v-model="dialogState">
     <AppBox class="image-dialog-content">
       <div class="row items-center q-py-sm q-px-md bordered-b">
@@ -62,13 +74,6 @@ function change(e: Event) {
         </div>
       </div>
       <div class="image-dialog-body">
-        <input
-          type="file"
-          accept="image/*"
-          ref="inputFile"
-          @change="change"
-          hidden
-        />
         <img
           :src="imageUrl || fallbackUrl"
           v-if="imageUrl || fallbackUrl"