Add image upload functionality to profile page

app/pages/profile.vue

@@ -6,13 +6,19 @@
             <v-avatar class="ma-10" color="primary" size="170">
                 <img :src="data.image ? data.image : ''" :alt="data.name" />
             </v-avatar>
+
             <v-file-input
                 accept="image/*"
                 label="File input"
-                @click="uploadImage"
                 @input="handleFileInput"
                 type="file"
-            />
+            /><v-btn
+                color="primary"
+                :disabled="files.length <= 0"
+                @click="uploadImage"
+            >
+                Button
+            </v-btn>
         </div>
         <div class="full-height flex-column">
             <h3>Último login:</h3>
@@ -34,7 +40,7 @@
 definePageMeta({
     auth: true,
 });
-const { data } = useAuth();
+const { data, token } = useAuth();
 import { ref, onMounted } from "vue";
 import { useSystemStore } from "~/stores/system";
 import { useListasStore } from "~/stores/listas";
@@ -44,6 +50,30 @@ const { handleFileInput, files } = useFileStorage();
 
 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, {
+        headers: {
+            Authorization: `${token.value}`,
+        },
+        method: "PUT",
+        body: {
+            username: "admin",
+            email: "admin@admin.com",
+            name: "admin",
+            last_name: "admin",
+            image: files.value[0],
+        },
+    })
+        .then((response) => {
+            console.log(response);
+        })
+        .catch((e) => {
+            console.error(e);
+        });
+    console.log(url);
+    console.log(data.value);
     console.log("files", files.value);
 };