beskrivende feilmeldinger ved filopplasting på profilside

src/components/EditProfile.vue

@@ -52,7 +52,6 @@ import { useAuthStore } from "@/stores/authStore";
 import router from "../router";
 export default {
     name: "EditProfile",
-    components: {Icon},
     data() {
         return {
             alertMsg:'',
@@ -69,11 +68,8 @@ export default {
               upImage: "profile/default_avatar.png",
           }
         },
-        iconColor() {
-            return "#D9D9D9"
-        },
     },
-    beforeMount() {//used to compare with changed values
+    beforeMount() {
         if(this.profile.profileImageUrl !== ''){
             this.image = this.profile.profileImageUrl;
         }
@@ -83,12 +79,23 @@ export default {
             router.push("/selectProfile");
         },
         updateImg() {
+            this.alertMsg=""
             let file = document.getElementById("profile_img").files[0];
+            let fileSize = file.size
             let reader = new FileReader();
             reader.onload = function (ev) {
                 document.getElementById("profile_img_preview").src = ev.target.result;
             };
             reader.readAsDataURL(file);
+            if(fileSize>524288){ //if image is bigger than 512kB
+                this.alertMsg = "Bildet er for stort (" + Math.ceil(fileSize/1024) + "kB) Maksimal bildestørrelse er 512kB"
+            }
+
+            if(file.name.split('.jpeg').length===1 && file.name.split('.jpg').length===1 ){
+                this.alertMsg="filtypen støttes ikke (bildet må være av type .jpg/.jpeg)"
+            }
+
+
         },
         async deleteProfile() {
                 const id = this.profile.id;
@@ -198,7 +205,22 @@ img {
     justify-content: space-between;
 }
 
+input[type=file]::file-selector-button {
+  background-color: base.$light-green;
+  color: base.$white;
+  border: none;
+  font-weight: bold;
+  padding: 8px 14px;
+  width: 50%;
+  border-radius: 10px;
+  cursor: pointer;
+  margin: 10px;
+  transition: color .2s;
+}
 
+input[type=file]::file-selector-button:hover {
+  background-color: base.$light-green-hover;
+}
 
 
 
@@ -263,7 +285,6 @@ button {
   display: flex;
   width:100%;
   justify-content: center;
-  color: base.$light-green;
   font-weight: bold;
 }
 </style>
\ No newline at end of file

src/views/SettingsView.vue

@@ -27,9 +27,6 @@ export default {
     components: {Icon},
     computed: {
         ...mapStores(useAuthStore),
-        iconColor() {
-            return "#000000"
-        },
     },
     beforeMount() {
         if (!useAuthStore().isLoggedIn) {