Profilbilde

src/components/EditProfile.vue

 <template>
         <h2>Profilinnstillinger</h2>
-
-
-        <div v-if="hasProfileImage" id = "profilepicture-container">
-            <img  width="100" :src="this.updatedProfile.upImage" alt="profile picture">
-        </div>
-        <div v-else id="#placeholder">
-            <Icon   icon="material-symbols:person" :color=iconColor :style="{ fontSize: '500px'}" />
+        <div id = "profilepicture-container">
+            <img  width="100" :src="image" alt="profile picture">
         </div>
 
+
         <h3>{{this.profile.name}}</h3>
         <button  @click="changeProfile" id="changeUserBtn" class="redBtn">Bytt bruker</button>
 
@@ -26,16 +22,14 @@
 
             <h3>Profilbilde</h3><br>
             <div id="changeUserImage">
-                <div v-if="hasProfileImage" id = "profilepicture-container">
-                    <img width="50" :src="this.updatedProfile.upImage" alt="profile picture">
+
+                <div id = "profilepicture-container">
+                    <img width="50" :src="image" id = "profile_img_preview" alt="profile picture">
                 </div>
-                <div v-else id = "profilepicture-container">
-                    <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
+                <div>
+                    <input @change="updateImg" type="file" accept=".jpeg, .jpg" id="profile_img" name="profile_img"><br><br>
                 </div>
 
-                <label for="chooseImageUrl">Bilde-URL:</label><br>
-                <!--<input type="file" id="chooseImage" v-on:change="updateImage">-->
-                <input type="text" id="chooseImageUrl" v-model="this.updatedProfile.upImage">
 
             </div>
         <br><br>
@@ -64,6 +58,7 @@ export default {
             alertMsg:'',
             initialName: '', //used to compare with updated values
             initialRestriction: '',
+            image: "profile/default_avatar.png",
         }
     },
     computed: {
@@ -73,24 +68,32 @@ export default {
           return {
               upName: this.profile.name,
               upRestricted: this.profile.restricted,
-              upImage: this.profile.profileImageUrl,
+              upImage: "profile/default_avatar.png",
           }
         },
         iconColor() {
             return "#D9D9D9"
         },
-        hasProfileImage() {
-            return false;
-        }
     },
     beforeMount() {//used to compare with changed values
         this.initialName = this.profile.name;
         this.initialRestriction = this.profile.restricted;
+        if(this.profile.profileImageUrl !== ''){
+            this.image = this.profile.profileImageUrl;
+        }
     },
     methods: {
         changeProfile(){
             router.push("/selectProfile");
         },
+        updateImg() {
+            let file = document.getElementById("profile_img").files[0];
+            let reader = new FileReader();
+            reader.onload = function (ev) {
+                document.getElementById("profile_img_preview").src = ev.target.result;
+            };
+            reader.readAsDataURL(file);
+        },
         async deleteProfile() {
                 const id = this.profile.id;
                 API.deleteProfile(id).then(() => {
@@ -115,11 +118,27 @@ export default {
             API.updateProfile(
                 id,{
                     name:newName,
-                    profileImageUrl:this.updatedProfile.upImage,
+                    profileImageUrl:null,
                     isRestricted: newRestricted,
                 }
             ).then((savedProfile)=>{
                 useAuthStore().setProfile(savedProfile);
+                const id = this.profile.id;
+                let image = document.getElementById("profile_img").files[0];
+
+                if (typeof image !== 'undefined') {
+                    API.uploadProfileImage(image, id)
+                        .then((updatedProfile) => {
+                            useAuthStore().setProfile(updatedProfile);
+                        }).catch(()=> {
+                        this.alertMsg = "Bilde kunne ikke bli oppdatert (bildekrav: JPEG mindre enn 512kB)"
+                    });
+                }
+                else {
+                    useAuthStore().setProfile(savedProfile);
+                    this.alertMsg = "Profil oppdatert."
+                    return;
+                }
                 this.alertMsg = "Profil oppdatert."
             }).catch(error=> {
                 console.log(error)