add sceleton for profile image

src/views/ManageProfileView.vue

@@ -24,6 +24,8 @@ const profile = ref<Profile>({
     }
 })
 
+const image = ref<string | ArrayBuffer | null>('')
+
 const updatePassword = ref<boolean>(false)
 const confirmPassword = ref<string>('')
 const errorMessage = ref<string>('')
@@ -63,8 +65,8 @@ const isFormInvalid = computed(
             ? profile.value.password !== confirmPassword.value || profile.value.password === ''
             : false)
 )
-
 onMounted(async () => {
+
     await authInterceptor('/profile')
         .then((response) => {
             profile.value = response.data
@@ -73,27 +75,35 @@ onMounted(async () => {
         .catch((error) => {
             return console.log(error)
         })
+    await authInterceptor('/profile/picture')
+        .then((response) => {
+            image.value = response.data
+        })
 })
 
 const selectImage = async () => {
-    const fileExplorer = document.getElementById('fileInput')!;
-
-    if (!fileExplorer) {
+    const fileInput = document.getElementById('fileInput')! as HTMLInputElement
+    if (!fileInput) {
         // Error handling
-        console.log("Vi klarte ikke å hente bildene dine. Prøv igjen!");
-    }
-    fileExplorer.click();
 
-   // fileExplorer.addEventListener('submit', uploadImage);
+        console.log('Vi klarte ikke å hente bildene dine. Prøv igjen!')
+    }
+    fileInput.addEventListener('change', uploadImage)
 }
 
-/*
-const uploadImage = async (event) => {
+const uploadImage = (e : any) => {
+    const _form = e.currentTarget;
+
+    console.log("hei")
+    const formData = new FormData(_form)
+    console.log(formData)
 
-    authInterceptor.post()
-    event.currentTarget
+    // authInterceptor.post("/profile/picture", formData)
+
+    e.preventDefault;
 }
-*/
+
+
 
 const saveChanges = async () => {
     if (isFormInvalid.value) {
@@ -131,14 +141,16 @@ const saveChanges = async () => {
                     </div>
                 </div>
                 <div class="flex flex-row justify-center">
-                    <input id="fileInput"
-                           type="file"
-                           style="display:none;"
-                           accept =".jpg, .jpeg, .png, .gif, .img" />
-                    <button
-                        v-text="'Last opp eget bilde!'"
-                        @click="selectImage()"
+                    <input
+                        id="fileInput"
+                        name="file"
+                        type="file"
+                        style="display: none"
+                        accept=".jpg, .jpeg, .png, .gif, .img"
                     />
+                    <form enctype="multipart/form-data">
+                        <button v-text="'Last opp eget bilde!'" @click="selectImage" />
+                    </form>
                 </div>
                 <div class="flex flex-col">
                     <div class="flex flex-row justify-between mx-4">

src/views/ViewProfileView.vue

@@ -9,6 +9,7 @@ import type { Goal } from '@/types/goal'
 import CardGoal from '@/components/CardGoal.vue'
 import router from '@/router'
 import { useUserStore } from '@/stores/userStore'
+import ModalEditAvatar from '@/components/ModalEditAvatar.vue'
 
 const profile = ref<Profile>()
 const completedGoals = ref<Goal[]>([])
@@ -66,7 +67,11 @@ const openInteractiveSpare = () => {
             <div class="flex flex-col max-w-96 w-full gap-5">
                 <h1>Profile</h1>
                 <div class="flex flex-row gap-5">
+                    <div class="flex flex-col">
+
                     <div class="w-32 h-32 border-black border-2 rounded-full shrink-0" />
+                        <ModalEditAvatar />
+                    </div>
                     <div class="w-full flex flex-col justify-between">
                         <h3 class="font-thin my-0">{{ profile?.username }}</h3>
                         <h3 class="font-thin my-0">