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 { file, clearInput } = handleImageUploadInput(e, {
-            const fileInput = /** @type {HTMLInputElement} */ (document.querySelector('#AvatarGalleryUploadButton'));
+            inputSelector: '#AvatarGalleryUploadButton',
-            if (fileInput) {
+            tooLargeMessage: () => t('message.file.too_large'),
-                fileInput.value = '';
+            invalidTypeMessage: () => t('message.file.not_image')
-            }
+        });
-        };
+        if (!file) {
-        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();
             return;
         }
         const r = new FileReader();
-        r.onload = function () {
+        const resetLoading = () => {
-            avatarDialog.value.galleryLoading = true;
+            avatarDialog.value.galleryLoading = false;
-            const base64Body = btoa(r.result.toString());
+            clearInput();
-            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;
-                });
         };
-        r.readAsBinaryString(files[0]);
+        r.onerror = resetLoading;
-        clearFile();
+        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 () {
+        const { file, clearInput } = handleImageUploadInput(e, {
-            changeAvatarImageDialogLoading.value = false;
+            inputSelector: '#AvatarImageUploadButton',
-            const fileInput = /** @type{HTMLInputElement} */ (document.querySelector('#AvatarImageUploadButton'));
+            tooLargeMessage: () => t('message.file.too_large'),
-            if (fileInput) {
+            invalidTypeMessage: () => t('message.file.not_image')
-                fileInput.value = '';
+        });
-            }
+        if (!file) {
-        };
-        const files = e.target.files || e.dataTransfer.files;
-        if (!files.length || !avatarDialog.value.visible || avatarDialog.value.loading) {
-            clearFile();
             return;
         }
-
+        if (!avatarDialog.value.visible || avatarDialog.value.loading) {
-        // validate file
+            clearInput();
-        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();
             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 () {
+        const { file, clearInput } = handleImageUploadInput(e, {
-            changeWorldImageDialogLoading.value = false;
+            inputSelector: '#WorldImageUploadButton',
-            const fileInput = /** @type{HTMLInputElement} */ (document.querySelector('#WorldImageUploadButton'));
+            tooLargeMessage: () => t('message.file.too_large'),
-            if (fileInput) {
+            invalidTypeMessage: () => t('message.file.not_image')
-                fileInput.value = '';
+        });
-            }
+        if (!file) {
-        };
-        const files = e.target.files || e.dataTransfer.files;
-        if (!files.length || !worldDialog.value.visible || worldDialog.value.loading) {
-            clearFile();
             return;
         }
-
+        if (!worldDialog.value.visible || worldDialog.value.loading) {
-        // validate file
+            clearInput();
-        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();
             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) {

src/shared/utils/imageUpload.js

@@ -0,0 +1,70 @@
+import { ElMessage } from 'element-plus';
+
+function resolveMessage(message) {
+    if (typeof message === 'function') {
+        return message();
+    }
+    return message;
+}
+
+function getInputElement(selector) {
+    if (!selector) {
+        return null;
+    }
+    if (typeof selector === 'function') {
+        return selector();
+    }
+    if (typeof selector === 'string') {
+        return document.querySelector(selector);
+    }
+    return selector;
+}
+
+export function handleImageUploadInput(event, options = {}) {
+    const {
+        inputSelector,
+        maxSize = 100000000,
+        acceptPattern = /image.*/,
+        tooLargeMessage,
+        invalidTypeMessage,
+        onClear
+    } = options;
+
+    const clearInput = () => {
+        onClear?.();
+        const input = getInputElement(inputSelector);
+        if (input) {
+            input.value = '';
+        }
+    };
+
+    const files = event?.target?.files || event?.dataTransfer?.files;
+    if (!files || files.length === 0) {
+        clearInput();
+        return { file: null, clearInput };
+    }
+
+    const file = files[0];
+    if (file.size >= maxSize) {
+        if (tooLargeMessage) {
+            ElMessage({ message: resolveMessage(tooLargeMessage), type: 'error' });
+        }
+        clearInput();
+        return { file: null, clearInput };
+    }
+
+    let acceptRegex = null;
+    if (acceptPattern) {
+        acceptRegex = acceptPattern instanceof RegExp ? acceptPattern : new RegExp(acceptPattern);
+    }
+
+    if (acceptRegex && !acceptRegex.test(file.type)) {
+        if (invalidTypeMessage) {
+            ElMessage({ message: resolveMessage(invalidTypeMessage), type: 'error' });
+        }
+        clearInput();
+        return { file: null, clearInput };
+    }
+
+    return { file, clearInput };
+}

src/stores/gallery.js

@@ -1,7 +1,6 @@
 import Noty from 'noty';
 import { defineStore } from 'pinia';
 import { computed, reactive, watch } from 'vue';
-import { ElMessage } from 'element-plus';
 import * as workerTimers from 'worker-timers';
 import {
     inventoryRequest,
@@ -16,6 +15,7 @@ import {
     getPrintFileName,
     getPrintLocalDate
 } from '../shared/utils';
+import { handleImageUploadInput } from '../shared/utils/imageUpload';
 import { useAdvancedSettingsStore } from './settings/advanced';
 import { useI18n } from 'vue-i18n';
 
@@ -266,32 +266,20 @@ export const useGalleryStore = defineStore('Gallery', () => {
     }
 
     function inviteImageUpload(e) {
-        const files = e.target.files || e.dataTransfer.files;
+        const { file } = handleImageUploadInput(e, {
-        if (!files.length) {
+            inputSelector: null,
-            return;
+            tooLargeMessage: () => t('message.file.too_large'),
-        }
+            invalidTypeMessage: () => t('message.file.not_image'),
-        if (files[0].size >= 100000000) {
+            onClear: clearInviteImageUpload
-            // 100MB
+        });
-            ElMessage({
+        if (!file) {
-                message: t('message.file.too_large'),
-                type: 'error'
-            });
-            clearInviteImageUpload();
-            return;
-        }
-        if (!files[0].type.match(/image.*/)) {
-            ElMessage({
-                message: t('message.file.not_image'),
-                type: 'error'
-            });
-            clearInviteImageUpload();
             return;
         }
         const r = new FileReader();
         r.onload = function () {
             state.uploadImage = btoa(r.result);
         };
-        r.readAsBinaryString(files[0]);
+        r.readAsBinaryString(file);
     }
 
     function clearInviteImageUpload() {

src/views/Tools/dialogs/GalleryDialog.vue

@@ -6,6 +6,13 @@
         width="97vw"
         append-to-body
         @close="closeGalleryDialog">
+        <el-progress
+            v-if="isUploading"
+            :show-text="false"
+            :indeterminate="true"
+            :percentage="100"
+            :stroke-width="3"
+            style="margin-bottom: 12px" />
         <el-tabs type="card" ref="galleryTabs">
             <el-tab-pane v-loading="galleryDialogGalleryLoading">
                 <template #label>
@@ -34,7 +41,7 @@
                         size="small"
                         @click="displayGalleryUpload"
                         :icon="Upload"
-                        :disabled="!currentUser.$isVRCPlus">
+                        :disabled="!currentUser.$isVRCPlus || isUploading">
                         {{ t('dialog.gallery_icons.upload') }}
                     </el-button>
                     <el-button
@@ -108,7 +115,7 @@
                         size="small"
                         @click="displayVRCPlusIconUpload"
                         :icon="Upload"
-                        :disabled="!currentUser.$isVRCPlus">
+                        :disabled="!currentUser.$isVRCPlus || isUploading">
                         {{ t('dialog.gallery_icons.upload') }}
                     </el-button>
                     <el-button
@@ -183,7 +190,7 @@
                             size="small"
                             @click="displayEmojiUpload"
                             :icon="Upload"
-                            :disabled="!currentUser.$isVRCPlus">
+                            :disabled="!currentUser.$isVRCPlus || isUploading">
                             {{ t('dialog.gallery_icons.upload') }}
                         </el-button>
                     </el-button-group>
@@ -331,7 +338,7 @@
                         size="small"
                         @click="displayStickerUpload"
                         :icon="Upload"
-                        :disabled="!currentUser.$isVRCPlus">
+                        :disabled="!currentUser.$isVRCPlus || isUploading">
                         {{ t('dialog.gallery_icons.upload') }}
                     </el-button>
                 </el-button-group>
@@ -398,7 +405,7 @@
                             size="small"
                             @click="displayPrintUpload"
                             :icon="Upload"
-                            :disabled="!currentUser.$isVRCPlus">
+                            :disabled="!currentUser.$isVRCPlus || isUploading">
                             {{ t('dialog.gallery_icons.upload') }}
                         </el-button>
                     </el-button-group>
@@ -540,12 +547,13 @@
     import { ElMessage, ElMessageBox } from 'element-plus';
     import { Refresh, Upload, Close, Picture, Delete, Plus, Present } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
-    import { ref } from 'vue';
+    import { computed, ref } from 'vue';
     import { useI18n } from 'vue-i18n';
     import { miscRequest, userRequest, vrcPlusIconRequest, vrcPlusImageRequest, inventoryRequest } from '../../../api';
     import { AppDebug } from '../../../service/appConfig';
     import { emojiAnimationStyleList, emojiAnimationStyleUrl } from '../../../shared/constants';
     import { extractFileId, formatDateFilter, getEmojiFileName, getPrintFileName } from '../../../shared/utils';
+    import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
     import { useAdvancedSettingsStore, useAuthStore, useGalleryStore, useUserStore } from '../../../stores';
 
     const { t } = useI18n();
@@ -589,52 +597,65 @@
     const emojiAnimationStyle = ref('Stop');
     const emojiAnimLoopPingPong = ref(false);
 
+    const pendingUploads = ref(0);
+    const isUploading = computed(() => pendingUploads.value > 0);
+
+    function startUpload() {
+        pendingUploads.value += 1;
+    }
+
+    function finishUpload() {
+        pendingUploads.value = Math.max(0, pendingUploads.value - 1);
+    }
+
     function closeGalleryDialog() {
         galleryDialogVisible.value = false;
     }
 
     function onFileChangeGallery(e) {
-        const clearFile = function () {
+        const { file, clearInput } = handleImageUploadInput(e, {
-            const fileInput = /** @type {HTMLInputElement} */ (document.querySelector('#GalleryUploadButton'));
+            inputSelector: '#GalleryUploadButton',
-            if (fileInput) {
+            tooLargeMessage: () => t('message.file.too_large'),
-                fileInput.value = '';
+            invalidTypeMessage: () => t('message.file.not_image')
+        });
+        if (!file) {
+            return;
+        }
+        startUpload();
+        const r = new FileReader();
+        const handleReaderError = () => finishUpload();
+        r.onerror = handleReaderError;
+        r.onabort = handleReaderError;
+        r.onload = function () {
+            try {
+                const base64Body = btoa(r.result.toString());
+                vrcPlusImageRequest
+                    .uploadGalleryImage(base64Body)
+                    .then((args) => {
+                        handleGalleryImageAdd(args);
+                        ElMessage({
+                            message: t('message.gallery.uploaded'),
+                            type: 'success'
+                        });
+                        return args;
+                    })
+                    .catch((error) => {
+                        console.error('Failed to upload', error);
+                    })
+                    .finally(() => finishUpload());
+            } catch (error) {
+                finishUpload();
+                console.error('Failed to process image', error);
             }
         };
-        const files = e.target.files || e.dataTransfer.files;
+        try {
-        if (!files.length) {
+            r.readAsBinaryString(file);
-            return;
+        } catch (error) {
+            clearInput();
+            finishUpload();
+            console.error('Failed to read file', error);
         }
-        if (files[0].size >= 100000000) {
+        clearInput();
-            // 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();
-            return;
-        }
-        const r = new FileReader();
-        r.onload = function () {
-            const base64Body = btoa(r.result.toString());
-            vrcPlusImageRequest.uploadGalleryImage(base64Body).then((args) => {
-                handleGalleryImageAdd(args);
-                ElMessage({
-                    message: t('message.gallery.uploaded'),
-                    type: 'success'
-                });
-                return args;
-            });
-        };
-        r.readAsBinaryString(files[0]);
-        clearFile();
     }
 
     function displayGalleryUpload() {
@@ -693,49 +714,51 @@
     }
 
     function onFileChangeVRCPlusIcon(e) {
-        const clearFile = function () {
+        const { file, clearInput } = handleImageUploadInput(e, {
-            const fileInput = /** @type {HTMLInputElement} */ (document.querySelector('#VRCPlusIconUploadButton'));
+            inputSelector: '#VRCPlusIconUploadButton',
-            if (fileInput) {
+            tooLargeMessage: () => t('message.file.too_large'),
-                fileInput.value = '';
+            invalidTypeMessage: () => t('message.file.not_image')
+        });
+        if (!file) {
+            return;
+        }
+        startUpload();
+        const r = new FileReader();
+        const handleReaderError = () => finishUpload();
+        r.onerror = handleReaderError;
+        r.onabort = handleReaderError;
+        r.onload = function () {
+            try {
+                const base64Body = btoa(r.result.toString());
+                vrcPlusIconRequest
+                    .uploadVRCPlusIcon(base64Body)
+                    .then((args) => {
+                        if (Object.keys(VRCPlusIconsTable.value).length !== 0) {
+                            VRCPlusIconsTable.value.unshift(args.json);
+                        }
+                        ElMessage({
+                            message: t('message.icon.uploaded'),
+                            type: 'success'
+                        });
+                        return args;
+                    })
+                    .catch((error) => {
+                        console.error('Failed to upload VRC+ icon', error);
+                    })
+                    .finally(() => finishUpload());
+            } catch (error) {
+                finishUpload();
+                console.error('Failed to process upload', error);
             }
         };
-        const files = e.target.files || e.dataTransfer.files;
+        try {
-        if (!files.length) {
+            r.readAsBinaryString(file);
-            return;
+        } catch (error) {
+            clearInput();
+            finishUpload();
+            console.error('Failed to read file', error);
         }
-        if (files[0].size >= 100000000) {
+        clearInput();
-            // 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();
-            return;
-        }
-        const r = new FileReader();
-        r.onload = function () {
-            const base64Body = btoa(r.result.toString());
-            vrcPlusIconRequest.uploadVRCPlusIcon(base64Body).then((args) => {
-                if (Object.keys(VRCPlusIconsTable.value).length !== 0) {
-                    VRCPlusIconsTable.value.unshift(args.json);
-                }
-                ElMessage({
-                    message: t('message.icon.uploaded'),
-                    type: 'success'
-                });
-                return args;
-            });
-        };
-        r.readAsBinaryString(files[0]);
-        clearFile();
     }
 
     function displayVRCPlusIconUpload() {
@@ -816,63 +839,65 @@
     }
 
     function onFileChangeEmoji(e) {
-        const clearFile = function () {
+        const { file, clearInput } = handleImageUploadInput(e, {
-            const fileInput = /** @type {HTMLInputElement} */ (document.querySelector('#EmojiUploadButton'));
+            inputSelector: '#EmojiUploadButton',
-            if (fileInput) {
+            tooLargeMessage: () => t('message.file.too_large'),
-                fileInput.value = '';
+            invalidTypeMessage: () => t('message.file.not_image')
-            }
+        });
-        };
+        if (!file) {
-        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();
             return;
         }
+        startUpload();
         // set Emoji settings from fileName
-        parseEmojiFileName(files[0].name);
+        parseEmojiFileName(file.name);
         const r = new FileReader();
+        const handleReaderError = () => finishUpload();
+        r.onerror = handleReaderError;
+        r.onabort = handleReaderError;
         r.onload = function () {
-            const params = {
+            try {
-                tag: emojiAnimType.value ? 'emojianimated' : 'emoji',
+                const params = {
-                animationStyle: emojiAnimationStyle.value.toLowerCase(),
+                    tag: emojiAnimType.value ? 'emojianimated' : 'emoji',
-                maskTag: 'square'
+                    animationStyle: emojiAnimationStyle.value.toLowerCase(),
-            };
+                    maskTag: 'square'
-            if (emojiAnimType.value) {
+                };
-                params.frames = emojiAnimFrameCount.value;
+                if (emojiAnimType.value) {
-                params.framesOverTime = emojiAnimFps.value;
+                    params.frames = emojiAnimFrameCount.value;
-            }
+                    params.framesOverTime = emojiAnimFps.value;
-            if (emojiAnimLoopPingPong.value) {
-                params.loopStyle = 'pingpong';
-            }
-            const base64Body = btoa(r.result.toString());
-            vrcPlusImageRequest.uploadEmoji(base64Body, params).then((args) => {
-                if (Object.keys(emojiTable.value).length !== 0) {
-                    emojiTable.value.unshift(args.json);
                 }
-                ElMessage({
+                if (emojiAnimLoopPingPong.value) {
-                    message: t('message.emoji.uploaded'),
+                    params.loopStyle = 'pingpong';
-                    type: 'success'
+                }
-                });
+                const base64Body = btoa(r.result.toString());
-                return args;
+                vrcPlusImageRequest
-            });
+                    .uploadEmoji(base64Body, params)
+                    .then((args) => {
+                        if (Object.keys(emojiTable.value).length !== 0) {
+                            emojiTable.value.unshift(args.json);
+                        }
+                        ElMessage({
+                            message: t('message.emoji.uploaded'),
+                            type: 'success'
+                        });
+                        return args;
+                    })
+                    .catch((error) => {
+                        console.error('Failed to upload', error);
+                    })
+                    .finally(() => finishUpload());
+            } catch (error) {
+                finishUpload();
+                console.error('Failed to process upload', error);
+            }
         };
-        r.readAsBinaryString(files[0]);
+        try {
-        clearFile();
+            r.readAsBinaryString(file);
+        } catch (error) {
+            clearInput();
+            finishUpload();
+            console.error('Failed to read file', error);
+        }
+        clearInput();
     }
 
     function displayEmojiUpload() {
@@ -913,51 +938,53 @@
     }
 
     function onFileChangeSticker(e) {
-        const clearFile = function () {
+        const { file, clearInput } = handleImageUploadInput(e, {
-            const fileInput = /** @type {HTMLInputElement} */ (document.querySelector('#StickerUploadButton'));
+            inputSelector: '#StickerUploadButton',
-            if (fileInput) {
+            tooLargeMessage: () => t('message.file.too_large'),
-                fileInput.value = '';
+            invalidTypeMessage: () => t('message.file.not_image')
+        });
+        if (!file) {
+            return;
+        }
+        startUpload();
+        const r = new FileReader();
+        const handleReaderError = () => finishUpload();
+        r.onerror = handleReaderError;
+        r.onabort = handleReaderError;
+        r.onload = function () {
+            try {
+                const params = {
+                    tag: 'sticker',
+                    maskTag: 'square'
+                };
+                const base64Body = btoa(r.result.toString());
+                vrcPlusImageRequest
+                    .uploadSticker(base64Body, params)
+                    .then((args) => {
+                        handleStickerAdd(args);
+                        ElMessage({
+                            message: t('message.sticker.uploaded'),
+                            type: 'success'
+                        });
+                        return args;
+                    })
+                    .catch((error) => {
+                        console.error('Failed to upload', error);
+                    })
+                    .finally(() => finishUpload());
+            } catch (error) {
+                finishUpload();
+                console.error('Failed to process upload', error);
             }
         };
-        const files = e.target.files || e.dataTransfer.files;
+        try {
-        if (!files.length) {
+            r.readAsBinaryString(file);
-            return;
+        } catch (error) {
+            clearInput();
+            finishUpload();
+            console.error('Failed to read file', error);
         }
-        if (files[0].size >= 100000000) {
+        clearInput();
-            // 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();
-            return;
-        }
-        const r = new FileReader();
-        r.onload = function () {
-            const params = {
-                tag: 'sticker',
-                maskTag: 'square'
-            };
-            const base64Body = btoa(r.result.toString());
-            vrcPlusImageRequest.uploadSticker(base64Body, params).then((args) => {
-                handleStickerAdd(args);
-                ElMessage({
-                    message: t('message.sticker.uploaded'),
-                    type: 'success'
-                });
-                return args;
-            });
-        };
-        r.readAsBinaryString(files[0]);
-        clearFile();
     }
 
     function displayStickerUpload() {
@@ -980,60 +1007,62 @@
     }
 
     function onFileChangePrint(e) {
-        const clearFile = function () {
+        const { file, clearInput } = handleImageUploadInput(e, {
-            const fileInput = /** @type {HTMLInputElement} */ (document.querySelector('#PrintUploadButton'));
+            inputSelector: '#PrintUploadButton',
-            if (fileInput) {
+            tooLargeMessage: () => t('message.file.too_large'),
-                fileInput.value = '';
+            invalidTypeMessage: () => t('message.file.not_image')
+        });
+        if (!file) {
+            return;
+        }
+        startUpload();
+        const r = new FileReader();
+        const handleReaderError = () => finishUpload();
+        r.onerror = handleReaderError;
+        r.onabort = handleReaderError;
+        r.onload = function () {
+            try {
+                const date = new Date();
+                // why the fuck isn't this UTC
+                date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
+                const timestamp = date.toISOString().slice(0, 19);
+                const params = {
+                    note: printUploadNote.value,
+                    // worldId: '',
+                    timestamp
+                };
+                const base64Body = btoa(r.result.toString());
+                const cropWhiteBorder = printCropBorder.value;
+                vrcPlusImageRequest
+                    .uploadPrint(base64Body, cropWhiteBorder, params)
+                    .then((args) => {
+                        ElMessage({
+                            message: t('message.print.uploaded'),
+                            type: 'success'
+                        });
+                        if (Object.keys(printTable.value).length !== 0) {
+                            printTable.value.unshift(args.json);
+                        }
+
+                        return args;
+                    })
+                    .catch((error) => {
+                        console.error('Failed to upload', error);
+                    })
+                    .finally(() => finishUpload());
+            } catch (error) {
+                finishUpload();
+                console.error('Failed to process upload', error);
             }
         };
-        const files = e.target.files || e.dataTransfer.files;
+        try {
-        if (!files.length) {
+            r.readAsBinaryString(file);
-            return;
+        } catch (error) {
+            clearInput();
+            finishUpload();
+            console.error('Failed to read file', error);
         }
-        if (files[0].size >= 100000000) {
+        clearInput();
-            // 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();
-            return;
-        }
-        const r = new FileReader();
-        r.onload = function () {
-            const date = new Date();
-            // why the fuck isn't this UTC
-            date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
-            const timestamp = date.toISOString().slice(0, 19);
-            const params = {
-                note: printUploadNote.value,
-                // worldId: '',
-                timestamp
-            };
-            const base64Body = btoa(r.result.toString());
-            const cropWhiteBorder = printCropBorder.value;
-            vrcPlusImageRequest.uploadPrint(base64Body, cropWhiteBorder, params).then((args) => {
-                ElMessage({
-                    message: t('message.print.uploaded'),
-                    type: 'success'
-                });
-                if (Object.keys(printTable.value).length !== 0) {
-                    printTable.value.unshift(args.json);
-                }
-
-                return args;
-            });
-        };
-        r.readAsBinaryString(files[0]);
-        clearFile();
     }
 
     function displayPrintUpload() {