From 0e32138714130fb577439c03e5e5aed603f07b4f Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 31 Jan 2024 10:49:29 -0300
Subject: [PATCH] Make input file clip icon work

---
 src/components/EditPictureForm.vue | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/EditPictureForm.vue b/src/components/EditPictureForm.vue
index 723adc0e9b..9414974724 100644
--- a/src/components/EditPictureForm.vue
+++ b/src/components/EditPictureForm.vue
@@ -74,7 +74,7 @@ const viewportTypes = [
 
 const uploadMethodSelected = ref('computer');
 const viewPortTypeSelected = ref(viewportTypes[0]);
-
+const inputFileRef = ref(null);
 const allowedContentTypes = ref('');
 const photoContainerRef = ref(null);
 const editor = ref(null);
@@ -86,6 +86,10 @@ const newPhoto = reactive({
     blob: null,
 });
 
+const openInputFile = () => {
+    inputFileRef.value.pickFiles();
+};
+
 const displayEditor = () => {
     const viewportType = viewPortTypeSelected.value;
     const viewport = viewportType.viewport;
@@ -253,21 +257,26 @@ const makeRequest = async () => {
                         <div class="col">
                             <QFile
                                 v-if="uploadMethodSelected === 'computer'"
+                                ref="inputFileRef"
                                 :label="t('File')"
                                 :multiple="false"
                                 v-model="newPhoto.files"
                                 @update:model-value="updatePhotoPreview($event)"
                                 :accept="allowedContentTypes"
-                                class="required"
+                                class="required cursor-pointer"
                             >
                                 <template #append>
                                     <QIcon
                                         name="vn:attach"
-                                        class="cursor-pointer q-mr-sm"
+                                        class="cursor-pointer q-mr-sm non-selectable"
+                                        @click="openInputFile()"
                                     >
                                         <QTooltip>{{ t('Select a file') }}</QTooltip>
                                     </QIcon>
-                                    <QIcon name="info" class="cursor-pointer">
+                                    <QIcon
+                                        name="info"
+                                        class="cursor-pointer non-selectable"
+                                    >
                                         <QTooltip>{{
                                             t(
                                                 'components.editPictureForm.allowedFilesText',