feat: add progress indicator stroke

src/components/dialogs/AvatarDialog/AvatarDialog.vue

@@ -371,10 +371,18 @@
                                 :disabled="!!avatarDialog.galleryLoading"
                                 size="small"
                                 :icon="Upload"
+                                :loading="!!avatarDialog.galleryLoading"
                                 style="margin-left: 5px"
                                 @click="displayAvatarGalleryUpload"
                                 >{{ t('dialog.screenshot_metadata.upload') }}</el-button
                             >
+                            <el-progress
+                                v-if="avatarDialog.galleryLoading"
+                                :show-text="false"
+                                :indeterminate="true"
+                                :percentage="100"
+                                :stroke-width="3"
+                                style="margin: 10px 0; max-width: 240px" />
                             <el-carousel
                                 v-if="avatarDialog.galleryImages.length"
                                 type="card"
@@ -620,6 +628,7 @@
         formatDateFilter,
         textToHex
     } from '../../../shared/utils';
+    import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
     import { getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { useAvatarStore, useFavoriteStore, useGalleryStore, useGameStore, useUserStore } from '../../../stores';
 
@@ -1158,54 +1167,51 @@
     }
 
     function onFileChangeAvatarGallery(e) {
-        const clearFile = function () {
-            const fileInput = /** @type {HTMLInputElement} */ (document.querySelector('#AvatarGalleryUploadButton'));
-            if (fileInput) {
-                fileInput.value = '';
-            }
-        };
-        const files = e.target.files || e.dataTransfer.files;
-        if (!files.length) {
-            return;
-        }
-        if (files[0].size >= 100000000) {
-            // 100MB
-            ElMessage({
-                message: t('message.file.too_large'),
-                type: 'error'
-            });
-            clearFile();
-            return;
-        }
-        if (!files[0].type.match(/image.*/)) {
-            ElMessage({
-                message: t('message.file.not_image'),
-                type: 'error'
-            });
-            clearFile();
+        const { file, clearInput } = handleImageUploadInput(e, {
+            inputSelector: '#AvatarGalleryUploadButton',
+            tooLargeMessage: () => t('message.file.too_large'),
+            invalidTypeMessage: () => t('message.file.not_image')
+        });
+        if (!file) {
             return;
         }
         const r = new FileReader();
-        r.onload = function () {
-            avatarDialog.value.galleryLoading = true;
-            const base64Body = btoa(r.result.toString());
-            avatarRequest
-                .uploadAvatarGalleryImage(base64Body, avatarDialog.value.id)
-                .then(async (args) => {
-                    ElMessage({
-                        message: t('message.avatar_gallery.uploaded'),
-                        type: 'success'
-                    });
-                    console.log(args);
-                    avatarDialog.value.galleryImages = await getAvatarGallery(avatarDialog.value.id);
-                    return args;
-                })
-                .finally(() => {
-                    avatarDialog.value.galleryLoading = false;
-                });
+        const resetLoading = () => {
+            avatarDialog.value.galleryLoading = false;
+            clearInput();
         };
-        r.readAsBinaryString(files[0]);
-        clearFile();
+        r.onerror = resetLoading;
+        r.onabort = resetLoading;
+        r.onload = function () {
+            try {
+                avatarDialog.value.galleryLoading = true;
+                const base64Body = btoa(r.result.toString());
+                avatarRequest
+                    .uploadAvatarGalleryImage(base64Body, avatarDialog.value.id)
+                    .then(async (args) => {
+                        ElMessage({
+                            message: t('message.avatar_gallery.uploaded'),
+                            type: 'success'
+                        });
+                        console.log(args);
+                        avatarDialog.value.galleryImages = await getAvatarGallery(avatarDialog.value.id);
+                        return args;
+                    })
+                    .catch((error) => {
+                        console.error('Failed to upload image', error);
+                    })
+                    .finally(resetLoading);
+            } catch (error) {
+                console.error('Failed to process image', error);
+                resetLoading();
+            }
+        };
+        try {
+            r.readAsBinaryString(file);
+        } catch (error) {
+            console.error('Failed to read file', error);
+            resetLoading();
+        }
     }
 
     function reorderAvatarGalleryImage(imageUrl, direction) {

src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue

@@ -6,17 +6,30 @@
         width="850px"
         append-to-body
         @close="closeDialog">
-        <div v-loading="changeAvatarImageDialogLoading">
+        <div>
             <input
                 id="AvatarImageUploadButton"
                 type="file"
                 accept="image/*"
                 style="display: none"
                 @change="onFileChangeAvatarImage" />
+            <el-progress
+                v-if="changeAvatarImageDialogLoading"
+                :show-text="false"
+                :indeterminate="true"
+                :percentage="100"
+                :stroke-width="3"
+                style="margin-bottom: 12px" />
             <span>{{ t('dialog.change_content_image.description') }}</span>
             <br />
             <el-button-group style="padding-bottom: 10px; padding-top: 10px">
-                <el-button type="default" size="small" :icon="Upload" @click="uploadAvatarImage">
+                <el-button
+                    type="default"
+                    size="small"
+                    :icon="Upload"
+                    :loading="changeAvatarImageDialogLoading"
+                    :disabled="changeAvatarImageDialogLoading"
+                    @click="uploadAvatarImage">
                     {{ t('dialog.change_content_image.upload') }}
                 </el-button>
             </el-button-group>
@@ -35,6 +48,7 @@
     import { computed, ref } from 'vue';
     import { useI18n } from 'vue-i18n';
     import { avatarRequest } from '../../../api';
+    import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
     import { useAvatarStore } from '../../../stores';
 
     const { t } = useI18n();
@@ -68,39 +82,26 @@
     }
 
     function onFileChangeAvatarImage(e) {
-        const clearFile = function () {
-            changeAvatarImageDialogLoading.value = false;
-            const fileInput = /** @type{HTMLInputElement} */ (document.querySelector('#AvatarImageUploadButton'));
-            if (fileInput) {
-                fileInput.value = '';
-            }
-        };
-        const files = e.target.files || e.dataTransfer.files;
-        if (!files.length || !avatarDialog.value.visible || avatarDialog.value.loading) {
-            clearFile();
+        const { file, clearInput } = handleImageUploadInput(e, {
+            inputSelector: '#AvatarImageUploadButton',
+            tooLargeMessage: () => t('message.file.too_large'),
+            invalidTypeMessage: () => t('message.file.not_image')
+        });
+        if (!file) {
             return;
         }
-
-        // validate file
-        if (files[0].size >= 100000000) {
-            // 100MB
-            ElMessage({
-                message: t('message.file.too_large'),
-                type: 'error'
-            });
-            clearFile();
-            return;
-        }
-        if (!files[0].type.match(/image.*/)) {
-            ElMessage({
-                message: t('message.file.not_image'),
-                type: 'error'
-            });
-            clearFile();
+        if (!avatarDialog.value.visible || avatarDialog.value.loading) {
+            clearInput();
             return;
         }
 
         const r = new FileReader();
+        const finalize = () => {
+            changeAvatarImageDialogLoading.value = false;
+            clearInput();
+        };
+        r.onerror = finalize;
+        r.onabort = finalize;
         r.onload = async function () {
             try {
                 const base64File = await resizeImageToFitLimits(btoa(r.result.toString()));
@@ -109,12 +110,17 @@
             } catch (error) {
                 console.error('Avatar image upload process failed:', error);
             } finally {
-                clearFile();
+                finalize();
             }
         };
 
         changeAvatarImageDialogLoading.value = true;
-        r.readAsBinaryString(files[0]);
+        try {
+            r.readAsBinaryString(file);
+        } catch (error) {
+            console.error('Failed to read file', error);
+            finalize();
+        }
     }
 
     async function initiateUpload(base64File) {

src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue

@@ -6,17 +6,30 @@
         width="850px"
         append-to-body
         @close="closeDialog">
-        <div v-loading="changeWorldImageDialogLoading">
+        <div>
             <input
                 id="WorldImageUploadButton"
                 type="file"
                 accept="image/*"
                 style="display: none"
                 @change="onFileChangeWorldImage" />
+            <el-progress
+                v-if="changeWorldImageDialogLoading"
+                :show-text="false"
+                :indeterminate="true"
+                :percentage="100"
+                :stroke-width="3"
+                style="margin-bottom: 12px" />
             <span>{{ t('dialog.change_content_image.description') }}</span>
             <br />
             <el-button-group style="padding-bottom: 10px; padding-top: 10px">
-                <el-button type="default" size="small" :icon="Upload" @click="uploadWorldImage">
+                <el-button
+                    type="default"
+                    size="small"
+                    :icon="Upload"
+                    :loading="changeWorldImageDialogLoading"
+                    :disabled="changeWorldImageDialogLoading"
+                    @click="uploadWorldImage">
                     {{ t('dialog.change_content_image.upload') }}
                 </el-button>
             </el-button-group>
@@ -35,6 +48,7 @@
     import { ref } from 'vue';
     import { useI18n } from 'vue-i18n';
     import { worldRequest } from '../../../api';
+    import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
     import { useWorldStore } from '../../../stores';
 
     const { t } = useI18n();
@@ -42,7 +56,7 @@
     const { worldDialog } = storeToRefs(useWorldStore());
     const { applyWorld } = useWorldStore();
 
-    const props = defineProps({
+    defineProps({
         changeWorldImageDialogVisible: {
             type: Boolean,
             required: true
@@ -67,39 +81,26 @@
     }
 
     function onFileChangeWorldImage(e) {
-        const clearFile = function () {
-            changeWorldImageDialogLoading.value = false;
-            const fileInput = /** @type{HTMLInputElement} */ (document.querySelector('#WorldImageUploadButton'));
-            if (fileInput) {
-                fileInput.value = '';
-            }
-        };
-        const files = e.target.files || e.dataTransfer.files;
-        if (!files.length || !worldDialog.value.visible || worldDialog.value.loading) {
-            clearFile();
+        const { file, clearInput } = handleImageUploadInput(e, {
+            inputSelector: '#WorldImageUploadButton',
+            tooLargeMessage: () => t('message.file.too_large'),
+            invalidTypeMessage: () => t('message.file.not_image')
+        });
+        if (!file) {
             return;
         }
-
-        // validate file
-        if (files[0].size >= 100000000) {
-            // 100MB
-            ElMessage({
-                message: t('message.file.too_large'),
-                type: 'error'
-            });
-            clearFile();
-            return;
-        }
-        if (!files[0].type.match(/image.*/)) {
-            ElMessage({
-                message: t('message.file.not_image'),
-                type: 'error'
-            });
-            clearFile();
+        if (!worldDialog.value.visible || worldDialog.value.loading) {
+            clearInput();
             return;
         }
 
         const r = new FileReader();
+        const finalize = () => {
+            changeWorldImageDialogLoading.value = false;
+            clearInput();
+        };
+        r.onerror = finalize;
+        r.onabort = finalize;
         r.onload = async function () {
             try {
                 const base64File = await resizeImageToFitLimits(btoa(r.result.toString()));
@@ -108,12 +109,17 @@
             } catch (error) {
                 console.error('World image upload process failed:', error);
             } finally {
-                clearFile();
+                finalize();
             }
         };
 
         changeWorldImageDialogLoading.value = true;
-        r.readAsBinaryString(files[0]);
+        try {
+            r.readAsBinaryString(file);
+        } catch (error) {
+            console.error('Failed to read file', error);
+            finalize();
+        }
     }
 
     async function initiateUpload(base64File) {