Fixed issue with avatar upload

src/plugins/user/components/settings/MainUserSettings.vue

@@ -1,8 +1,5 @@
 <template>
-  <q-form
+  <q-form @submit="save" @reset="reset">
-    @submit="save"
-    @reset="reset"
-  >
     <q-card-section class="fit row justify-start content-center items-center">
       <q-input
         class="col-xs-12 col-sm-6 q-pa-sm"
@@ -69,10 +66,7 @@
         @rejected="onAvatarRejected"
       >
         <template v-slot:append>
-          <q-icon
+          <q-icon name="mdi-file-image" @click.stop />
-            name="mdi-file-image"
-            @click.stop
-          />
         </template>
       </q-file>
     </q-card-section>
@@ -109,15 +103,8 @@
       />
     </q-card-section>
     <q-card-actions align="right">
-      <q-btn
+      <q-btn label="Reset" type="reset" />
-        label="Reset"
+      <q-btn color="primary" type="submit" label="Speichern" />
-        type="reset"
-      />
-      <q-btn
-        color="primary"
-        type="submit"
-        label="Speichern"
-      />
     </q-card-actions>
   </q-form>
 </template>
@@ -127,7 +114,7 @@ import {
   computed,
   defineComponent,
   ref,
-  onBeforeMount,
+  onBeforeMount
 } from '@vue/composition-api';
 import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
@@ -145,17 +132,17 @@ export default defineComponent({
   components: { IsoDateInput: IsoDateInput },
   props: {
     user: {
-      required: true,
+      required: true
     },
     newUser: {
-      default: false,
+      default: false
-    },
+    }
   },
   setup(props: Props, { root, emit }) {
     const store = <Store<StateInterface>>root.$store;
 
     onBeforeMount(() => {
-      store.dispatch('user/getRoles', false).catch((error) => {
+      store.dispatch('user/getRoles', false).catch(error => {
         console.warn(error);
       });
     });
@@ -169,7 +156,7 @@ export default defineComponent({
     const oldUser = computed(() => {
       if (isCurrentUser.value) return <FG.User>store.state.user.currentUser;
       else
-        return store.state.user.users.filter((user) => {
+        return store.state.user.users.filter(user => {
           user.userid === props.user?.userid;
         })[0];
     });
@@ -182,13 +169,13 @@ export default defineComponent({
         message: 'Datei zu groß oder keine gültige Bilddatei.',
         timeout: 10000,
         progress: true,
-        actions: [{ icon: 'mdi-close', color: 'white' }],
+        actions: [{ icon: 'mdi-close', color: 'white' }]
       });
       avatar.value = [];
     }
 
     const allRoles = computed(() =>
-      store.state.user.roles.map((role) => role.name)
+      store.state.user.roles.map(role => role.name)
     );
     const password = ref('');
     const new_password = ref('');
@@ -199,20 +186,24 @@ export default defineComponent({
       if (typeof changed.birthday === 'string')
         changed.birthday = new Date(changed.birthday);
       changed = Object.assign(changed, {
-        password: password.value,
+        password: password.value
       });
       if (new_password.value != '') {
         changed = Object.assign(changed, {
-          new_password: new_password.value,
+          new_password: new_password.value
         });
       }
 
       emit('update:user', changed);
-      if (avatar.value && avatar.value.length > 0)
+
+      if (
+        avatar.value &&
+        (avatar.value.length > 0 || avatar.value instanceof File)
+      )
         store
           .dispatch('user/uploadAvatar', {
             user: changed,
-            file: avatar.value,
+            file: avatar.value
           })
           .catch((response: Response) => {
             if (response && response.status == 400) {
@@ -270,8 +261,8 @@ export default defineComponent({
       notEmpty,
       isUseridUsed,
       save,
-      reset,
+      reset
     };
-  },
+  }
 });
 </script>

src/plugins/user/store/user.ts

@@ -34,7 +34,6 @@ const mutations: MutationTree<UserStateInterface> = {
   setCurrentUser(state, data: FG.User) {
     if (typeof data.birthday === 'string')
       data.birthday = new Date(data.birthday);
-    console.warn(data.birthday);
     SessionStorage.set('currentUser', data);
     state.currentUser = data;
   },