q-file restringido por formato o tamaño

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();
 });