From 60293642408cc934cf1d523f9f76cd8735ec7359 Mon Sep 17 00:00:00 2001
From: clonbg <clonbg@gmail.com>
Date: Mon, 13 Mar 2023 13:11:10 +0100
Subject: [PATCH] =?UTF-8?q?q-file=20restringido=20por=20formato=20o=20tama?=
 =?UTF-8?q?=C3=B1o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/IndexPage.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index 730b741..114ca06 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -22,7 +22,15 @@
     <div class="col-2"></div>
     <div class="col">
       <q-form class="q-gutter-md" @click.once="recibeDatos()">
-        <q-file outlined v-model="imagen" label="Avatar" class="q-py-md" />
+        <q-file
+          outlined
+          v-model="imagen"
+          label="Avatar"
+          accept=".jpg, image/*"
+          max-total-size="5120000"
+          @rejected="noValidos"
+          class="q-py-md"
+        />
         <q-input
           outlined
           v-model="name"
@@ -100,7 +108,9 @@
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import { useListaStore } from "../stores/lista.js";
+import { useQuasar } from "quasar";
 
+const $q = useQuasar();
 const listaStore = useListaStore();
 
 const imagen = ref(null);
@@ -172,7 +182,6 @@ const btnSaveDisable = () => {
 };
 
 const refrescarImagen = () => {
-  console.log(listaStore.pb.authStore.model);
   if (listaStore.pb.authStore.model.avatar.length > 0) {
     fuenteImagen.value =
       listaStore.pb.getFileUrl(
@@ -183,6 +192,14 @@ const refrescarImagen = () => {
     fuenteImagen.value = `https://cdn.quasar.dev/img/avatar.png`;
   }
 };
+
+const noValidos = () => {
+  $q.dialog({
+    type: "negative",
+    message: `Sólo se permiten archivos de imágenes de 5 MB como máximo`,
+  });
+};
+
 onMounted(() => {
   refrescarImagen();
 });