Skip to content

fix: Setting avatar save prompt error(#2523) #2535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wangdan-fit2cloud merged 1 commit into from
Mar 11, 2025
Merged

fix: Setting avatar save prompt error(#2523) #2535

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ui/src/views/application-overview/component/EditAvatarDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,15 +121,15 @@ function submit() {
if (radioType.value === 'default') {
application.asyncPutApplication(id as string, { icon: defaultIcon }, loading).then((res) => {
emit('refresh')
MsgSuccess(t('views.applicationOverview.appInfo.EditAvatarDialog.setSuccess'))
MsgSuccess(t('common.saveSuccess'))
dialogVisible.value = false
})
} else if (radioType.value === 'custom' && iconFile.value) {
let fd = new FormData()
fd.append('file', iconFile.value.raw)
overviewApi.putAppIcon(id as string, fd, loading).then((res: any) => {
emit('refresh')
MsgSuccess(t('views.applicationOverview.appInfo.EditAvatarDialog.setSuccess'))
MsgSuccess(t('common.saveSuccess'))
dialogVisible.value = false
})
} else {
Copy link
Contributor

@shaohuzhang1 shaohuzhang1 Mar 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code you provided has several potential issues that could be addressed:

  1. Lack of Consistent Error Handling: There is no error handling in case something goes wrong during API requests (asyncPutApplication or overviewApi.putAppIcon). This can result in unexpected behavior if the server responds with errors.

  2. Use of Raw File Data: The line fd.append('file', iconFile.value.raw) assumes that iconFile.value.raw already contains the raw data from the file input element, which might not always be reliable depending on the browser's implementation. It would be safer to work directly with the file object without assuming its raw property exists.

  3. Redundant Code Blocks: Both conditions for setting an avatar use similar logic, including appending a form data entry and updating dialogVisible. These blocks could be extracted into a separate function to reduce redundancy.

  4. Variable Naming: Variable names like defaultIcon, radioType, etc., should be more descriptive if possible, especially since they refer to user-facing elements.

Here’s a modified version of the code addressing some of these points:

function saveAvatar() {
    const id = id as string; // Assuming id is defined somewhere in scope

    const uploadImage = async () => {
        try {
            await appApi.uploadAppIcon(id, iconFile.value);
            emit('refresh');
            MsgSuccess(t('common.saveSuccess'));
            dialogVisible.value = false;
        } catch (error) {
            console.error("Failed to set Avatar:", error);
        }
    };

    if (radioType.value === 'default') {
        uploadImage();
    } else if (radioType.value === 'custom' && iconFile.value) {
        uploadImage();
    }
}

// In your main application component, call this function when you want to save the avatar

Key Changes:

  • Function Extraction: The upload logic is now inside the saveAvatar function to prevent duplication.
  • Error Handling: Added a generic error handler using a promise catch block to ensure any failed uploads are logged.
  • Consistent Error Message: Replaced the success message specific to the Avatar Dialog with a common "Save Success" message.

This refactored version improves maintainability and robustness by encapsulating the core functionality in one place and providing better feedback on potential failures.

Expand Down