Implement user profile image upload functionality

This commit improves image handling in the profile view by: - Adding
proper image validation - Implementing FormData for image upload -
Displaying uploaded image preview - Restricting allowed file types -
Adding error handling

app/pages/profile.vue

@@ -4,17 +4,24 @@
     >
         <div class="full-height flex-column mr-5">
             <v-avatar class="ma-10" color="primary" size="170">
-                <img :src="data.image ? data.image : ''" :alt="data.name" />
+                <v-img
+                    :width="200"
+                    aspect-ratio="16/9"
+                    cover
+                    :src="imagenVista"
+                    :alt="data.name"
+                ></v-img>
             </v-avatar>
 
             <v-file-input
-                accept="image/*"
+                accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp"
                 label="File input"
                 @input="handleFileInput"
                 type="file"
+                v-model="imagen"
             /><v-btn
                 color="primary"
-                :disabled="files.length <= 0"
+                :disabled="files.length <= 0 || !validateFileType()"
                 @click="uploadImage"
             >
                 Button
@@ -31,7 +38,11 @@
             <p>{{ data.email }}</p>
             <h3>Listas:</h3>
 
-            <p>{{ listasStore.listas.length }}</p>
+            <p>
+                {{
+                    listasStore.listas.length ? listasStore.listas.length : "0"
+                }}
+            </p>
         </div>
     </v-container>
 </template>
@@ -47,34 +58,57 @@ import { useListasStore } from "~/stores/listas";
 const listasStore = useListasStore();
 const systemStore = useSystemStore();
 const { handleFileInput, files } = useFileStorage();
+let imagen = ref([]);
+let imagenVista = ref("");
 
 const uploadImage = async () => {
-    // TODO Implement image upload logic
-    // modificar el usuario
-    const user = data.value;
     const url = "http://" + systemStore.url_backend + "/auth/users/me/";
-    const res = await $fetch(url, {
+    let formData = new FormData();
+
+    formData.append("username", data.value.username);
+    formData.append("email", data.value.email);
+    formData.append("name", data.value.name);
+    formData.append("last_name", data.value.last_name);
+    formData.append("image", imagen.value ? imagen.value : null);
+
+    await $fetch(url, {
         headers: {
             Authorization: `${token.value}`,
         },
         method: "PUT",
-        body: {
-            username: "admin",
-            email: "admin@admin.com",
-            name: "admin",
-            last_name: "admin",
-            image: files.value[0],
-        },
+        body: formData,
     })
         .then((response) => {
-            console.log(response);
+            imagenVista.value = response.image;
+            files.value.pop();
+            imagen.value = null;
         })
         .catch((e) => {
             console.error(e);
         });
-    console.log(url);
-    console.log(data.value);
-    console.log("files", files.value);
+};
+
+const validateFileType = () => {
+    var fileName = imagen.value.name;
+    var idxDot = fileName.lastIndexOf(".") + 1;
+    var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
+    if (
+        extFile == "jpg" ||
+        extFile == "jpeg" ||
+        extFile == "png" ||
+        extFile == "gif"
+    ) {
+        return true;
+    } else {
+        alert("Only jpg, jpeg, png and gif files are allowed!");
+        files.value.pop();
+        imagen.value = null;
+        return false;
+    }
+};
+
+const validateTamanyo = () => {
+    //TODO validar tamaño
 };
 
 const openImageDialog = () => {
@@ -83,5 +117,10 @@ const openImageDialog = () => {
 
 onMounted(async () => {
     await listasStore.getData();
+    if (data) {
+        console.log(data.value.image);
+
+        imagenVista.value = data.value.image;
+    }
 });
 </script>