Create modal to change image profile

src/App.vue

@@ -19,5 +19,7 @@ html,
 body,
 #q-app {
   height: 100%;
+  position: relative;
+  min-height: 650px;
 }
 </style>

src/components/ModalFile/ModalFile.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-dialog ref="dialogRef">
+      <q-card>
+        <q-card-section class="row justify-end q-pb-none">
+          <q-btn icon="close" flat round dense v-close-popup />
+        </q-card-section>
+        <q-card-section class="text-center q-pt-none">
+          <div class="q-mb-sm">
+            El tamaño ideal para las imágenes de avatar es de
+            <b>100x100 píxeles</b>.
+          </div>
+          Te sugerimos ajustar tu imagen antes de subirla
+          <q-file
+            label-color="white"
+            bg-color="dark"
+            standout
+            v-model="selectedFiles"
+            label="Subir imagen"
+            class="q-mt-md custom"
+            accept="image/png, image/jpeg, image/jpg"
+            @input="handleChange"
+          >
+            <template v-slot:append>
+              <q-icon name="upload" color="white" />
+            </template>
+          </q-file>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+<script>
+import { useDialogPluginComponent } from 'quasar';
+import './styles.scss';
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    uploadImage: {
+      type: Function,
+    },
+  },
+  emits: [...useDialogPluginComponent.emits],
+  methods: {
+    async handleChange(event) {
+      await this.uploadImage(event);
+      this.dialogRef.hide();
+    },
+  },
+  setup() {
+    const { dialogRef } = useDialogPluginComponent();
+    return {
+      dialogRef,
+    };
+  },
+};
+</script>

src/components/ModalFile/index.js

@@ -0,0 +1,3 @@
+import ModalFile from './ModalFile.vue';
+
+export default ModalFile;

src/components/ModalFile/styles.scss

@@ -0,0 +1,14 @@
+.custom {
+  .q-field__inner {
+    max-width: 180px;
+    margin: 0 auto;
+  }
+
+  .q-field__control {
+    padding: 0 25px;
+  }
+
+  .q-field__append {
+    padding-left: 8px;
+  }
+}

src/pages/User/components/UserHeader/UserHeader.vue

@@ -11,6 +11,7 @@
               class="UserHeader__avatar"
               color="black"
               text-color="white"
+              @click="openModal"
             >
               <q-img :src="showAvatar" />
               <q-icon
@@ -19,12 +20,6 @@
                 class="UserHeader__editIcon"
                 name="add"
               />
-              <input
-                type="file"
-                id="avatar"
-                accept="image/png, image/jpeg, image/jpg"
-                @change="uploadImage"
-              />
             </q-avatar>
           </q-btn>
           <div class="UserHeader__information">
@@ -64,6 +59,8 @@ import {
   updateImageGraqhql,
 } from './utils/handleAvatarUpload';
 import { ref, Ref } from 'vue';
+import { Dialog } from 'quasar';
+import ModalFile from 'src/components/ModalFile/ModalFile.vue';
 
 export interface UserHeaderProps {
   isMembershipActive: boolean;
@@ -85,4 +82,14 @@ const uploadImage = async (event: Event) => {
   onUpdateUserAvatar(props.id, uploadedImage);
   showAvatar.value = uploadedImage;
 };
+
+const openModal = async () => {
+  Dialog.create({
+    component: ModalFile,
+    componentProps: {
+      uploadImage: uploadImage,
+      id: props.id,
+    },
+  });
+};
 </script>