fix: allow mobile gallery file picker for banner upload

src/pages/menuPages/banners/components/BannerImageUpload.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="banner-image-upload">
+  <div class="banner-image-upload fix-capture" @pointerdown="ensureGalleryCapture" @click="ensureGalleryCapture">
     <a-upload
       v-if="!displayUrl"
-      class="banner-image-upload__zone"
+      class="banner-image-upload__zone fix-capture"
       name="file"
-      accept="image/*"
+      accept="image/jpeg,image/png,image/webp,image/jpg,.jpg,.jpeg,.png,.webp"
       :show-upload-list="false"
       :action="uploadURL"
       :headers="fileHeader"
@@ -37,8 +37,9 @@
       </div>
       <div class="banner-image-upload__bar">
         <a-upload
+          class="fix-capture"
           name="file"
-          accept="image/*"
+          accept="image/jpeg,image/png,image/webp,image/jpg,.jpg,.jpeg,.png,.webp"
           :show-upload-list="false"
           :action="uploadURL"
           :headers="fileHeader"
@@ -63,11 +64,13 @@
 </template>
 
 <script setup lang="ts">
+import { computed, ref, watch, onMounted, nextTick } from 'vue'
 import { LoadingOutlined } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
 import { uploadURL } from '@root/config'
 import { getToken } from '@/utils'
 import { fileUrlCandidates, normalizeUploadFileResponse, toAbsoluteFileUrl } from '@/utils/file'
+import { fixFileCapture } from '@/utils/fixFileCapture'
 import {
   createImageBeforeUpload,
   createImageCustomRequest
@@ -89,11 +92,22 @@ const candidateIndex = ref(0)
 const candidates = computed(() => fileUrlCandidates(props.imageUrl))
 const displayUrl = computed(() => candidates.value[candidateIndex.value] ?? '')
 
+function ensureGalleryCapture() {
+  fixFileCapture()
+}
+
+onMounted(() => {
+  fixFileCapture()
+})
+
 watch(
   () => props.imageUrl,
   () => {
     previewFailed.value = false
     candidateIndex.value = 0
+    nextTick(() => {
+      fixFileCapture()
+    })
   },
 )
 

src/utils/fixFileCapture.ts

@@ -1,6 +1,15 @@
 /** جلوگیری از باز شدن مستقیم دوربین روی موبایل — انتخاب از گالری */
 export function fixFileCapture(root: ParentNode | Document = document): void {
-  root.querySelectorAll<HTMLInputElement>('.fix-capture input[type="file"]').forEach((input) => {
+  root.querySelectorAll<HTMLInputElement>('.fix-capture input[type="file"], .banner-image-upload input[type="file"], .ant-upload input[type="file"]').forEach((input) => {
     input.removeAttribute('capture')
   })
 }
+
+if (typeof document !== 'undefined') {
+  document.addEventListener('pointerdown', (e) => {
+    const target = e.target as HTMLElement | null
+    if (target?.closest?.('.fix-capture, .banner-image-upload, .ant-upload')) {
+      fixFileCapture()
+    }
+  }, { capture: true, passive: true })
+}