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

@@ -135,7 +135,7 @@ export default defineComponent({
 
     const password = ref('');
     const newPassword = ref('');
-    const avatar = ref<string[]>([]);
+    const avatar = ref<File | FileList | string[]>();
     const userModel = ref(props.user);
 
     const canSetRoles = computed(() => hasPermission('users_set_roles'));
@@ -157,7 +157,7 @@ export default defineComponent({
         progress: true,
         actions: [{ icon: 'mdi-close', color: 'white' }],
       });
-      avatar.value = [];
+      avatar.value = undefined;
     }
 
     function save() {
@@ -174,12 +174,14 @@ export default defineComponent({
 
       emit('update:user', changed);
 
-      if (avatar.value && (avatar.value.length > 0 || avatar.value instanceof File))
-        userStore.uploadAvatar(changed, avatar.value[0]).catch((response: Response) => {
-          if (response && response.status == 400) {
-            onAvatarRejected();
-          }
-        });
+      if (avatar.value)
+        userStore
+          .uploadAvatar(changed, avatar.value instanceof File ? avatar.value : avatar.value[0])
+          .catch((response: Response) => {
+            if (response && response.status == 400) {
+              onAvatarRejected();
+            }
+          });
       reset();
     }
 

src/plugins/user/store.ts

@@ -64,7 +64,7 @@ export const useUserStore = defineStore({
       return data;
     },
 
-    async uploadAvatar(user: FG.User, file: string) {
+    async uploadAvatar(user: FG.User, file: string | File) {
       const formData = new FormData();
       formData.append('file', file);
       await api.post(`/users/${user.userid}/avatar`, formData, {