add cropper for vrc plus management

package-lock.json

@@ -8,8 +8,7 @@
             "license": "MIT",
             "dependencies": {
                 "hazardous": "^0.3.0",
-                "node-api-dotnet": "^0.9.19",
+                "node-api-dotnet": "^0.9.19"
-                "vue-advanced-cropper": "^2.8.9"
             },
             "devDependencies": {
                 "@dnd-kit/vue": "^0.3.2",
@@ -72,6 +71,7 @@
                 "vite": "^7.3.1",
                 "vitest": "^3.2.4",
                 "vue": "^3.5.29",
+                "vue-advanced-cropper": "^2.8.9",
                 "vue-i18n": "^11.2.8",
                 "vue-input-otp": "^0.3.2",
                 "vue-json-pretty": "^2.6.0",
@@ -423,6 +423,7 @@
             "version": "7.27.1",
             "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
             "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6.9.0"
@@ -432,6 +433,7 @@
             "version": "7.28.5",
             "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
             "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6.9.0"
@@ -465,6 +467,7 @@
             "version": "7.29.0",
             "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
             "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/types": "^7.29.0"
@@ -576,6 +579,7 @@
             "version": "7.29.0",
             "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
             "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/helper-string-parser": "^7.27.1",
@@ -2450,6 +2454,7 @@
             "version": "1.5.5",
             "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
             "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/@jridgewell/trace-mapping": {
@@ -4543,6 +4548,7 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.29.tgz",
             "integrity": "sha512-cuzPhD8fwRHk8IGfmYaR4eEe4cAyJEL66Ove/WZL7yWNL134nqLddSLwNRIsFlnnW1kK+p8Ck3viFnC0chXCXw==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/parser": "^7.29.0",
@@ -4556,6 +4562,7 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.29.tgz",
             "integrity": "sha512-n0G5o7R3uBVmVxjTIYcz7ovr8sy7QObFG8OQJ3xGCDNhbG60biP/P5KnyY8NLd81OuT1WJflG7N4KWYHaeeaIg==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/compiler-core": "3.5.29",
@@ -4566,6 +4573,7 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.29.tgz",
             "integrity": "sha512-oJZhN5XJs35Gzr50E82jg2cYdZQ78wEwvRO6Y63TvLVTc+6xICzJHP1UIecdSPPYIbkautNBanDiWYa64QSFIA==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/parser": "^7.29.0",
@@ -4583,6 +4591,7 @@
             "version": "0.30.21",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
             "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -4592,6 +4601,7 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.29.tgz",
             "integrity": "sha512-Y/ARJZE6fpjzL5GH/phJmsFwx3g6t2KmHKHx5q+MLl2kencADKIrhH5MLF6HHpRMmlRAYBRSvv347Mepf1zVNw==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/compiler-dom": "3.5.29",
@@ -4638,6 +4648,7 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.29.tgz",
             "integrity": "sha512-zcrANcrRdcLtmGZETBxWqIkoQei8HaFpZWx/GHKxx79JZsiZ8j1du0VUJtu4eJjgFvU/iKL5lRXFXksVmI+5DA==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/shared": "3.5.29"
@@ -4647,6 +4658,7 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.29.tgz",
             "integrity": "sha512-8DpW2QfdwIWOLqtsNcds4s+QgwSaHSJY/SUe04LptianUQ/0xi6KVsu/pYVh+HO3NTVvVJjIPL2t6GdeKbS4Lg==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/reactivity": "3.5.29",
@@ -4657,6 +4669,7 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.29.tgz",
             "integrity": "sha512-AHvvJEtcY9tw/uk+s/YRLSlxxQnqnAkjqvK25ZiM4CllCZWzElRAoQnCM42m9AHRLNJ6oe2kC5DCgD4AUdlvXg==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/reactivity": "3.5.29",
@@ -4669,6 +4682,7 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.29.tgz",
             "integrity": "sha512-G/1k6WK5MusLlbxSE2YTcqAAezS+VuwHhOvLx2KnQU7G2zCH6KIb+5Wyt6UjMq7a3qPzNEjJXs1hvAxDclQH+g==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/compiler-ssr": "3.5.29",
@@ -4682,6 +4696,7 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.29.tgz",
             "integrity": "sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/@vue/test-utils": {
@@ -5713,6 +5728,7 @@
             "version": "2.5.1",
             "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
             "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/cli-cursor": {
@@ -6091,6 +6107,7 @@
             "version": "3.2.3",
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
             "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/data-urls": {
@@ -6156,6 +6173,7 @@
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
             "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/debug": {
@@ -6486,6 +6504,7 @@
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
             "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/echarts": {
@@ -6941,6 +6960,7 @@
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
             "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+            "dev": true,
             "license": "BSD-2-Clause",
             "engines": {
                 "node": ">=0.12"
@@ -7355,6 +7375,7 @@
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
             "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/esutils": {
@@ -9529,6 +9550,7 @@
             "version": "3.3.11",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
             "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+            "dev": true,
             "funding": [
                 {
                     "type": "github",
@@ -10067,6 +10089,7 @@
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
             "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+            "dev": true,
             "license": "ISC"
         },
         "node_modules/picomatch": {
@@ -10123,6 +10146,7 @@
             "version": "8.5.6",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
             "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -11314,6 +11338,7 @@
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
             "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+            "dev": true,
             "license": "BSD-3-Clause",
             "engines": {
                 "node": ">=0.10.0"
@@ -11982,7 +12007,7 @@
             "version": "5.9.3",
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
             "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-            "devOptional": true,
+            "dev": true,
             "license": "Apache-2.0",
             "peer": true,
             "bin": {
@@ -12444,6 +12469,7 @@
             "version": "3.5.29",
             "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.29.tgz",
             "integrity": "sha512-BZqN4Ze6mDQVNAni0IHeMJ5mwr8VAJ3MQC9FmprRhcBYENw+wOAAjRj8jfmN6FLl0j96OXbR+CjWhmAmM+QGnA==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/compiler-dom": "3.5.29",
@@ -12465,6 +12491,7 @@
             "version": "2.8.9",
             "resolved": "https://registry.npmjs.org/vue-advanced-cropper/-/vue-advanced-cropper-2.8.9.tgz",
             "integrity": "sha512-1jc5gO674kVGpJKekoaol6ZlwaF5VYDLSBwBOUpViW0IOrrRsyLw6XNszjEqgbavvqinlKNS6Kqlom3B5M72Tw==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "classnames": "^2.2.6",

package.json

@@ -91,6 +91,7 @@
         "vite": "^7.3.1",
         "vitest": "^3.2.4",
         "vue": "^3.5.29",
+        "vue-advanced-cropper": "^2.8.9",
         "vue-i18n": "^11.2.8",
         "vue-input-otp": "^0.3.2",
         "vue-json-pretty": "^2.6.0",
@@ -187,8 +188,7 @@
     },
     "dependencies": {
         "hazardous": "^0.3.0",
-        "node-api-dotnet": "^0.9.19",
+        "node-api-dotnet": "^0.9.19"
-        "vue-advanced-cropper": "^2.8.9"
     },
     "engines": {
         "node": ">=24.10.0",

src/components/dialogs/AvatarDialog/AvatarDialog.vue

@@ -529,9 +529,19 @@
             <template v-if="avatarDialog.visible">
                 <SetAvatarTagsDialog v-model:setAvatarTagsDialog="setAvatarTagsDialog" />
                 <SetAvatarStylesDialog v-model:setAvatarStylesDialog="setAvatarStylesDialog" />
-                <ChangeAvatarImageDialog
+                <input
-                    v-model:changeAvatarImageDialogVisible="changeAvatarImageDialogVisible"
+                    id="AvatarImageUploadButton"
-                    v-model:previousImageUrl="previousImageUrl" />
+                    type="file"
+                    accept="image/*"
+                    style="display: none"
+                    @change="onFileChangeAvatarImage" />
+                <ImageCropDialog
+                    :open="cropDialogOpen"
+                    :title="t('dialog.change_content_image.avatar')"
+                    :aspect-ratio="4 / 3"
+                    :file="cropDialogFile"
+                    @update:open="cropDialogOpen = $event"
+                    @confirm="onCropConfirmAvatar" />
             </template>
         </div>
     </div>
@@ -597,14 +607,20 @@
         DropdownMenuSeparator,
         DropdownMenuTrigger
     } from '../../ui/dropdown-menu';
+    import {
+        handleImageUploadInput,
+        readFileAsBase64,
+        resizeImageToFitLimits,
+        uploadImageLegacy,
+        withUploadTimeout
+    } from '../../../shared/utils/imageUpload';
     import { avatarModerationRequest, avatarRequest, favoriteRequest } from '../../../api';
-    import { AppDebug } from '../../../service/appConfig.js';
     import { Badge } from '../../ui/badge';
     import { database } from '../../../service/database';
     import { formatJsonVars } from '../../../shared/utils/base/ui';
-    import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
 
-    const ChangeAvatarImageDialog = defineAsyncComponent(() => import('./ChangeAvatarImageDialog.vue'));
+    import ImageCropDialog from '../ImageCropDialog.vue';
+
     const SetAvatarStylesDialog = defineAsyncComponent(() => import('./SetAvatarStylesDialog.vue'));
     const SetAvatarTagsDialog = defineAsyncComponent(() => import('./SetAvatarTagsDialog.vue'));
 
@@ -628,8 +644,9 @@
         { value: 'JSON', label: t('dialog.avatar.json.header') }
     ]);
 
-    const changeAvatarImageDialogVisible = ref(false);
+    const cropDialogOpen = ref(false);
-    const previousImageUrl = ref('');
+    const cropDialogFile = ref(null);
+    const changeAvatarImageLoading = ref(false);
 
     const treeData = ref({});
     const memo = ref('');
@@ -971,9 +988,63 @@
     }
 
     function showChangeAvatarImageDialog() {
-        const { imageUrl } = avatarDialog.value.ref;
+        document.getElementById('AvatarImageUploadButton').click();
-        previousImageUrl.value = imageUrl;
+    }
-        changeAvatarImageDialogVisible.value = true;
+
+    function onFileChangeAvatarImage(e) {
+        const { file, clearInput } = handleImageUploadInput(e, {
+            inputSelector: '#AvatarImageUploadButton',
+            tooLargeMessage: () => t('message.file.too_large'),
+            invalidTypeMessage: () => t('message.file.not_image')
+        });
+        if (!file) {
+            return;
+        }
+        if (!avatarDialog.value.visible || avatarDialog.value.loading) {
+            clearInput();
+            return;
+        }
+        clearInput();
+        cropDialogFile.value = file;
+        cropDialogOpen.value = true;
+    }
+
+    async function onCropConfirmAvatar(blob) {
+        changeAvatarImageLoading.value = true;
+        try {
+            await withUploadTimeout(
+                (async () => {
+                    const base64Body = await readFileAsBase64(blob);
+                    const base64File = await resizeImageToFitLimits(base64Body);
+                    if (LINUX) {
+                        const args = await avatarRequest.uploadAvatarImage(base64File);
+                        const fileUrl = args.json.versions[args.json.versions.length - 1].file.url;
+                        await avatarRequest.saveAvatar({
+                            id: avatarDialog.value.id,
+                            imageUrl: fileUrl
+                        });
+                    } else {
+                        await uploadImageLegacy('avatar', {
+                            entityId: avatarDialog.value.id,
+                            imageUrl: avatarDialog.value.ref.imageUrl,
+                            base64File,
+                            blob
+                        });
+                    }
+                })()
+            );
+            toast.success(t('message.upload.success'));
+            // force refresh cover image
+            const avatarId = avatarDialog.value.id;
+            avatarDialog.value.id = '';
+            showAvatarDialog(avatarId);
+        } catch (error) {
+            console.error('avatar image upload process failed:', error);
+            toast.error(t('message.upload.error'));
+        } finally {
+            changeAvatarImageLoading.value = false;
+            cropDialogOpen.value = false;
+        }
     }
 
     function promptChangeAvatarDescription(avatar) {

src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue

@@ -1,428 +0,0 @@
-<template>
-    <Dialog
-        :open="changeAvatarImageDialogVisible"
-        @update:open="
-            (open) => {
-                if (!open) closeDialog();
-            }
-        ">
-        <DialogContent class="x-dialog sm:max-w-212.5">
-            <DialogHeader>
-                <DialogTitle>{{ t('dialog.change_content_image.avatar') }}</DialogTitle>
-            </DialogHeader>
-
-            <div>
-                <input
-                    id="AvatarImageUploadButton"
-                    type="file"
-                    accept="image/*"
-                    style="display: none"
-                    @change="onFileChangeAvatarImage" />
-                <Button
-                    variant="outline"
-                    size="sm"
-                    :disabled="changeAvatarImageDialogLoading"
-                    @click="uploadAvatarImage">
-                    <Upload />
-                    {{ t('dialog.change_content_image.upload') }}
-                </Button>
-                <div class="text-xs text-muted-foreground mb-4 mt-1 flex items-center gap-1">
-                    <Info /> {{ t('dialog.change_content_image.description') }}
-                </div>
-
-                <div v-if="cropperImageSrc" class="mt-4">
-                    <Cropper
-                        ref="cropperRef"
-                        class="h-100 max-h-full"
-                        :src="cropperImageSrc"
-                        :stencil-props="{ aspectRatio: 4 / 3 }"
-                        image-restriction="stencil" />
-                </div>
-
-                <div v-else class="flex justify-center items-center">
-                    <img :src="previousImageUrl" class="img-size" loading="lazy" />
-                </div>
-            </div>
-            <DialogFooter>
-                <template v-if="cropperImageSrc">
-                    <Button
-                        variant="secondary"
-                        size="sm"
-                        :disabled="changeAvatarImageDialogLoading"
-                        @click="cancelCrop">
-                        {{ t('dialog.change_content_image.cancel') }}
-                    </Button>
-                    <Button size="sm" :disabled="changeAvatarImageDialogLoading" @click="onConfirmCrop">
-                        {{ t('dialog.change_content_image.confirm') }}
-                    </Button>
-                </template>
-            </DialogFooter>
-        </DialogContent>
-    </Dialog>
-</template>
-
-<script setup>
-    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-    import { Info, Upload } from 'lucide-vue-next';
-    import { Button } from '@/components/ui/button';
-    import { Cropper } from 'vue-advanced-cropper';
-    import { ref } from 'vue';
-    import { storeToRefs } from 'pinia';
-    import { toast } from 'vue-sonner';
-    import { useI18n } from 'vue-i18n';
-
-    import { avatarRequest, imageRequest } from '../../../api';
-    import { $throw } from '../../../service/request';
-    import { AppDebug } from '../../../service/appConfig';
-    import { extractFileId } from '../../../shared/utils';
-    import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
-    import { useAvatarStore } from '../../../stores';
-
-    import 'vue-advanced-cropper/dist/style.css';
-
-    const { t } = useI18n();
-
-    const { avatarDialog } = storeToRefs(useAvatarStore());
-    const { applyAvatar } = useAvatarStore();
-
-    defineProps({
-        changeAvatarImageDialogVisible: {
-            type: Boolean,
-            required: true
-        },
-        previousImageUrl: {
-            type: String,
-            default: ''
-        }
-    });
-
-    const MAX_PREVIEW_SIZE = 800;
-
-    const changeAvatarImageDialogLoading = ref(false);
-    const cropperRef = ref(null);
-    const cropperImageSrc = ref('');
-    const selectedFile = ref(null);
-    const originalImage = ref(null);
-    const previewScale = ref(1);
-    const avatarImage = ref({
-        base64File: '',
-        fileMd5: '',
-        base64SignatureFile: '',
-        signatureMd5: '',
-        fileId: '',
-        avatarId: ''
-    });
-
-    const emit = defineEmits(['update:changeAvatarImageDialogVisible', 'update:previousImageUrl']);
-
-    function resetCropState() {
-        cropperImageSrc.value = '';
-        selectedFile.value = null;
-        originalImage.value = null;
-        previewScale.value = 1;
-    }
-
-    function closeDialog() {
-        resetCropState();
-        emit('update:changeAvatarImageDialogVisible', false);
-    }
-
-    async function resizeImageToFitLimits(file) {
-        const response = await AppApi.ResizeImageToFitLimits(file);
-        return response;
-    }
-
-    function onFileChangeAvatarImage(e) {
-        const { file, clearInput } = handleImageUploadInput(e, {
-            inputSelector: '#AvatarImageUploadButton',
-            tooLargeMessage: () => t('message.file.too_large'),
-            invalidTypeMessage: () => t('message.file.not_image')
-        });
-        if (!file) {
-            return;
-        }
-        if (!avatarDialog.value.visible || avatarDialog.value.loading) {
-            clearInput();
-            return;
-        }
-
-        selectedFile.value = file;
-        const r = new FileReader();
-        r.onload = () => {
-            const img = new Image();
-            img.onload = () => {
-                originalImage.value = img;
-                if (img.width > MAX_PREVIEW_SIZE || img.height > MAX_PREVIEW_SIZE) {
-                    const scale = Math.min(MAX_PREVIEW_SIZE / img.width, MAX_PREVIEW_SIZE / img.height);
-                    previewScale.value = scale;
-                    const cvs = document.createElement('canvas');
-                    cvs.width = Math.round(img.width * scale);
-                    cvs.height = Math.round(img.height * scale);
-                    const ctx = cvs.getContext('2d');
-                    ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
-                    cropperImageSrc.value = cvs.toDataURL('image/jpeg', 0.9);
-                } else {
-                    previewScale.value = 1;
-                    cropperImageSrc.value = r.result;
-                }
-            };
-            img.onerror = () => {
-                resetCropState();
-            };
-            img.src = r.result;
-        };
-        r.onerror = () => {
-            resetCropState();
-            toast.error(t('message.file.not_image'));
-        };
-        r.readAsDataURL(file);
-        clearInput();
-    }
-
-    function cancelCrop() {
-        resetCropState();
-    }
-
-    function onConfirmCrop() {
-        const { coordinates } = cropperRef.value.getResult();
-        if (!coordinates || !originalImage.value) {
-            return;
-        }
-
-        // Scale coordinates back
-        const scale = previewScale.value;
-        const srcX = Math.round(coordinates.left / scale);
-        const srcY = Math.round(coordinates.top / scale);
-        const srcW = Math.round(coordinates.width / scale);
-        const srcH = Math.round(coordinates.height / scale);
-
-        const cropCanvas = document.createElement('canvas');
-        cropCanvas.width = srcW;
-        cropCanvas.height = srcH;
-        const ctx = cropCanvas.getContext('2d');
-        ctx.drawImage(originalImage.value, srcX, srcY, srcW, srcH, 0, 0, srcW, srcH);
-
-        cropCanvas.toBlob((blob) => {
-            const r = new FileReader();
-            const finalize = () => {
-                changeAvatarImageDialogLoading.value = false;
-                resetCropState();
-            };
-            r.onerror = finalize;
-            r.onabort = finalize;
-            r.onload = async function () {
-                const uploadPromise = (async () => {
-                    const bytes = new Uint8Array(r.result);
-                    let binary = '';
-                    for (let i = 0; i < bytes.length; i++) {
-                        binary += String.fromCharCode(bytes[i]);
-                    }
-                    const base64File = await resizeImageToFitLimits(btoa(binary));
-                    // 10MB
-                    if (LINUX) {
-                        // use new website upload process on Linux, we're missing the needed libraries for Unity method
-                        // website method clears avatar name and is missing world image uploading
-                        await initiateUpload(base64File);
-                        return;
-                    }
-                    await initiateUploadLegacy(base64File, blob);
-                })();
-                toast.promise(uploadPromise, {
-                    loading: t('message.upload.loading'),
-                    success: t('message.upload.success'),
-                    error: t('message.upload.error')
-                });
-                try {
-                    await uploadPromise;
-                } catch (error) {
-                    console.error('avatar image upload process failed:', error);
-                } finally {
-                    finalize();
-                }
-            };
-
-            changeAvatarImageDialogLoading.value = true;
-            try {
-                r.readAsArrayBuffer(blob);
-            } catch (error) {
-                console.error('Failed to read cropped image', error);
-                finalize();
-            }
-        }, 'image/png');
-    }
-
-    async function initiateUploadLegacy(base64File, file) {
-        const fileMd5 = await AppApi.MD5File(base64File);
-        const fileSizeInBytes = parseInt(file.size, 10);
-        const base64SignatureFile = await AppApi.SignFile(base64File);
-        const signatureMd5 = await AppApi.MD5File(base64SignatureFile);
-        const signatureSizeInBytes = parseInt(await AppApi.FileLength(base64SignatureFile), 10);
-        const avatarId = avatarDialog.value.id;
-        const { imageUrl } = avatarDialog.value.ref;
-        const fileId = extractFileId(imageUrl);
-        avatarImage.value = {
-            base64File,
-            fileMd5,
-            base64SignatureFile,
-            signatureMd5,
-            fileId,
-            avatarId
-        };
-        const params = {
-            fileMd5,
-            fileSizeInBytes,
-            signatureMd5,
-            signatureSizeInBytes
-        };
-        const res = await imageRequest.uploadAvatarImage(params, fileId);
-        return avatarImageInit(res);
-    }
-
-    async function avatarImageInit(args) {
-        const fileId = args.json.id;
-        const fileVersion = args.json.versions[args.json.versions.length - 1].version;
-        const params = {
-            fileId,
-            fileVersion
-        };
-        const res = await imageRequest.uploadAvatarImageFileStart(params);
-        return avatarImageFileStart(res);
-    }
-
-    async function avatarImageFileStart(args) {
-        const { url } = args.json;
-        const { fileId, fileVersion } = args.params;
-        const params = {
-            url,
-            fileId,
-            fileVersion
-        };
-        return uploadAvatarImageFileAWS(params);
-    }
-
-    async function uploadAvatarImageFileAWS(params) {
-        const json = await webApiService.execute({
-            url: params.url,
-            uploadFilePUT: true,
-            fileData: avatarImage.value.base64File,
-            fileMIME: 'image/png',
-            fileMD5: avatarImage.value.fileMd5
-        });
-
-        if (json.status !== 200) {
-            changeAvatarImageDialogLoading.value = false;
-            $throw(json.status, 'avatar image upload failed', params.url);
-        }
-        const args = {
-            json,
-            params
-        };
-        return avatarImageFileAWS(args);
-    }
-
-    async function avatarImageFileAWS(args) {
-        const { fileId, fileVersion } = args.params;
-        const params = {
-            fileId,
-            fileVersion
-        };
-        const res = await imageRequest.uploadAvatarImageFileFinish(params);
-        return avatarImageFileFinish(res);
-    }
-
-    async function avatarImageFileFinish(args) {
-        const { fileId, fileVersion } = args.params;
-        const params = {
-            fileId,
-            fileVersion
-        };
-        const res = await imageRequest.uploadAvatarImageSigStart(params);
-        return avatarImageSigStart(res);
-    }
-
-    async function avatarImageSigStart(args) {
-        const { url } = args.json;
-        const { fileId, fileVersion } = args.params;
-        const params = {
-            url,
-            fileId,
-            fileVersion
-        };
-        return uploadAvatarImageSigAWS(params);
-    }
-
-    async function uploadAvatarImageSigAWS(params) {
-        const json = await webApiService.execute({
-            url: params.url,
-            uploadFilePUT: true,
-            fileData: avatarImage.value.base64SignatureFile,
-            fileMIME: 'application/x-rsync-signature',
-            fileMD5: avatarImage.value.signatureMd5
-        });
-
-        if (json.status !== 200) {
-            changeAvatarImageDialogLoading.value = false;
-            $throw(json.status, 'avatar image upload failed', params.url);
-        }
-        const args = {
-            json,
-            params
-        };
-        return avatarImageSigAWS(args);
-    }
-
-    async function avatarImageSigAWS(args) {
-        const { fileId, fileVersion } = args.params;
-        const params = {
-            fileId,
-            fileVersion
-        };
-        const res = await imageRequest.uploadAvatarImageSigFinish(params);
-        return avatarImageSigFinish(res);
-    }
-    async function avatarImageSigFinish(args) {
-        const { fileId, fileVersion } = args.params;
-        const params = {
-            id: avatarImage.value.avatarId,
-            imageUrl: `${AppDebug.endpointDomain}/file/${fileId}/${fileVersion}/file`
-        };
-        const res = await imageRequest.setAvatarImage(params);
-        return avatarImageSet(res);
-    }
-
-    function avatarImageSet(args) {
-        changeAvatarImageDialogLoading.value = false;
-        if (args.json.imageUrl === args.params.imageUrl) {
-            emit('update:previousImageUrl', args.json.imageUrl);
-        } else {
-            $throw(0, 'avatar image change failed', args.params.imageUrl);
-        }
-    }
-
-    // ------------ Upload Process End ------------
-
-    async function initiateUpload(base64File) {
-        const args = await avatarRequest.uploadAvatarImage(base64File);
-        const fileUrl = args.json.versions[args.json.versions.length - 1].file.url;
-        const avatarArgs = await avatarRequest.saveAvatar({
-            id: avatarDialog.value.id,
-            imageUrl: fileUrl
-        });
-        const ref = applyAvatar(avatarArgs.json);
-        changeAvatarImageDialogLoading.value = false;
-        emit('update:previousImageUrl', ref.imageUrl);
-
-        // closeDialog();
-    }
-
-    function uploadAvatarImage() {
-        document.getElementById('AvatarImageUploadButton').click();
-    }
-</script>
-
-<style scoped>
-    .img-size {
-        width: 500px;
-        height: 375px;
-    }
-</style>

src/components/dialogs/ImageCropDialog.vue

@@ -0,0 +1,116 @@
+<template>
+    <Dialog
+        :open="open"
+        @update:open="
+            (v) => {
+                if (!v) cancelCrop();
+            }
+        ">
+        <DialogContent class="x-dialog sm:max-w-212.5">
+            <DialogHeader>
+                <DialogTitle>{{ title }}</DialogTitle>
+            </DialogHeader>
+
+            <div v-if="cropperImageSrc" class="mt-4">
+                <Cropper
+                    ref="cropperRef"
+                    class="h-100 max-h-full"
+                    :src="cropperImageSrc"
+                    :stencil-props="{ aspectRatio, movable: !loading, resizable: !loading }"
+                    :move-image="!loading"
+                    :resize-image="!loading"
+                    image-restriction="stencil" />
+            </div>
+
+            <DialogFooter>
+                <template v-if="cropperImageSrc">
+                    <Button variant="secondary" size="sm" :disabled="loading" @click="cancelCrop">
+                        {{ t('dialog.change_content_image.cancel') }}
+                    </Button>
+                    <Button size="sm" :disabled="loading" @click="onConfirmCrop">
+                        <Spinner v-if="loading" />
+                        {{ loading ? t('message.upload.loading') : t('dialog.gallery_icons.crop_image') }}
+                    </Button>
+                </template>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>
+
+<script setup>
+    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
+    import { Cropper } from 'vue-advanced-cropper';
+    import { Spinner } from '@/components/ui/spinner';
+    import { useI18n } from 'vue-i18n';
+
+    import { useImageCropper } from '../../composables/useImageCropper';
+
+    import 'vue-advanced-cropper/dist/style.css';
+
+    const { t } = useI18n();
+
+    const props = defineProps({
+        open: {
+            type: Boolean,
+            required: true
+        },
+        title: {
+            type: String,
+            default: ''
+        },
+        aspectRatio: {
+            type: Number,
+            default: 4 / 3
+        },
+        file: {
+            type: [File, null],
+            default: null
+        }
+    });
+
+    const emit = defineEmits(['update:open', 'confirm']);
+
+    const loading = ref(false);
+    // Attention: cropperRef is used
+    const { cropperRef, cropperImageSrc, resetCropState, loadImageForCrop, getCroppedBlob } = useImageCropper();
+
+    watch(
+        () => props.file,
+        (file) => {
+            if (file) {
+                loadImageForCrop(file);
+            }
+        }
+    );
+
+    watch(
+        () => props.open,
+        (open) => {
+            if (!open) {
+                loading.value = false;
+                resetCropState();
+            }
+        }
+    );
+
+    function cancelCrop() {
+        resetCropState();
+        emit('update:open', false);
+    }
+
+    async function onConfirmCrop() {
+        loading.value = true;
+        try {
+            const blob = await getCroppedBlob(props.file);
+            if (!blob) {
+                loading.value = false;
+                return;
+            }
+            emit('confirm', blob);
+        } catch {
+            loading.value = false;
+        }
+    }
+</script>

src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue

@@ -1,415 +0,0 @@
-<template>
-    <Dialog
-        :open="changeWorldImageDialogVisible"
-        @update:open="
-            (open) => {
-                if (!open) closeDialog();
-            }
-        ">
-        <DialogContent class="x-dialog sm:max-w-212.5">
-            <DialogHeader>
-                <DialogTitle>{{ t('dialog.change_content_image.world') }}</DialogTitle>
-            </DialogHeader>
-
-            <div>
-                <input
-                    id="WorldImageUploadButton"
-                    type="file"
-                    accept="image/*"
-                    style="display: none"
-                    @change="onFileChangeWorldImage" />
-                <Button variant="outline" size="sm" :disabled="changeWorldImageDialogLoading" @click="uploadWorldImage">
-                    <Upload />
-                    {{ t('dialog.change_content_image.upload') }}
-                </Button>
-                <div class="text-xs text-muted-foreground mb-4 mt-1 flex items-center gap-1">
-                    <Info /> {{ t('dialog.change_content_image.description') }}
-                </div>
-
-                <div v-if="cropperImageSrc" class="mt-4">
-                    <Cropper
-                        ref="cropperRef"
-                        class="h-100 max-h-full"
-                        :src="cropperImageSrc"
-                        :stencil-props="{ aspectRatio: 4 / 3 }"
-                        image-restriction="stencil" />
-                </div>
-
-                <div v-else class="flex justify-center items-center">
-                    <img :src="previousImageUrl" class="img-size" loading="lazy" />
-                </div>
-            </div>
-            <DialogFooter>
-                <template v-if="cropperImageSrc">
-                    <Button variant="secondary" size="sm" :disabled="changeWorldImageDialogLoading" @click="cancelCrop">
-                        {{ t('dialog.change_content_image.cancel') }}
-                    </Button>
-                    <Button size="sm" :disabled="changeWorldImageDialogLoading" @click="onConfirmCrop">
-                        {{ t('dialog.change_content_image.confirm') }}
-                    </Button>
-                </template>
-            </DialogFooter>
-        </DialogContent>
-    </Dialog>
-</template>
-
-<script setup>
-    import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-    import { Info, Upload } from 'lucide-vue-next';
-    import { Button } from '@/components/ui/button';
-    import { Cropper } from 'vue-advanced-cropper';
-    import { ref } from 'vue';
-    import { storeToRefs } from 'pinia';
-    import { toast } from 'vue-sonner';
-    import { useI18n } from 'vue-i18n';
-
-    import { imageRequest, worldRequest } from '../../../api';
-    import { $throw } from '../../../service/request';
-    import { AppDebug } from '../../../service/appConfig';
-    import { extractFileId } from '../../../shared/utils';
-    import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
-    import { useWorldStore } from '../../../stores';
-
-    import 'vue-advanced-cropper/dist/style.css';
-
-    const { t } = useI18n();
-
-    const { worldDialog } = storeToRefs(useWorldStore());
-    const { applyWorld } = useWorldStore();
-
-    defineProps({
-        changeWorldImageDialogVisible: {
-            type: Boolean,
-            required: true
-        },
-        previousImageUrl: {
-            type: String,
-            default: ''
-        }
-    });
-
-    const MAX_PREVIEW_SIZE = 800;
-
-    const changeWorldImageDialogLoading = ref(false);
-    const cropperRef = ref(null);
-    const cropperImageSrc = ref('');
-    const selectedFile = ref(null);
-    const originalImage = ref(null);
-    const previewScale = ref(1);
-    const worldImage = ref({
-        base64File: '',
-        fileMd5: '',
-        base64SignatureFile: '',
-        signatureMd5: '',
-        fileId: '',
-        worldId: ''
-    });
-
-    const emit = defineEmits(['update:changeWorldImageDialogVisible', 'update:previousImageUrl']);
-
-    function resetCropState() {
-        cropperImageSrc.value = '';
-        selectedFile.value = null;
-        originalImage.value = null;
-        previewScale.value = 1;
-    }
-
-    function closeDialog() {
-        resetCropState();
-        emit('update:changeWorldImageDialogVisible', false);
-    }
-
-    async function resizeImageToFitLimits(file) {
-        const response = await AppApi.ResizeImageToFitLimits(file);
-        return response;
-    }
-
-    function onFileChangeWorldImage(e) {
-        const { file, clearInput } = handleImageUploadInput(e, {
-            inputSelector: '#WorldImageUploadButton',
-            tooLargeMessage: () => t('message.file.too_large'),
-            invalidTypeMessage: () => t('message.file.not_image')
-        });
-        if (!file) {
-            return;
-        }
-        if (!worldDialog.value.visible || worldDialog.value.loading) {
-            clearInput();
-            return;
-        }
-
-        selectedFile.value = file;
-        const r = new FileReader();
-        r.onload = () => {
-            const img = new Image();
-            img.onload = () => {
-                originalImage.value = img;
-                if (img.width > MAX_PREVIEW_SIZE || img.height > MAX_PREVIEW_SIZE) {
-                    const scale = Math.min(MAX_PREVIEW_SIZE / img.width, MAX_PREVIEW_SIZE / img.height);
-                    previewScale.value = scale;
-                    const cvs = document.createElement('canvas');
-                    cvs.width = Math.round(img.width * scale);
-                    cvs.height = Math.round(img.height * scale);
-                    const ctx = cvs.getContext('2d');
-                    ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
-                    cropperImageSrc.value = cvs.toDataURL('image/jpeg', 0.9);
-                } else {
-                    previewScale.value = 1;
-                    cropperImageSrc.value = r.result;
-                }
-            };
-            img.onerror = () => {
-                resetCropState();
-            };
-            img.src = r.result;
-        };
-        r.onerror = () => {
-            resetCropState();
-            toast.error(t('message.file.not_image'));
-        };
-        r.readAsDataURL(file);
-        clearInput();
-    }
-
-    function cancelCrop() {
-        resetCropState();
-    }
-
-    function onConfirmCrop() {
-        const { coordinates } = cropperRef.value.getResult();
-        if (!coordinates || !originalImage.value) {
-            return;
-        }
-
-        // scale back
-        const scale = previewScale.value;
-        const srcX = Math.round(coordinates.left / scale);
-        const srcY = Math.round(coordinates.top / scale);
-        const srcW = Math.round(coordinates.width / scale);
-        const srcH = Math.round(coordinates.height / scale);
-
-        const cropCanvas = document.createElement('canvas');
-        cropCanvas.width = srcW;
-        cropCanvas.height = srcH;
-        const ctx = cropCanvas.getContext('2d');
-        ctx.drawImage(originalImage.value, srcX, srcY, srcW, srcH, 0, 0, srcW, srcH);
-
-        cropCanvas.toBlob((blob) => {
-            const r = new FileReader();
-            const finalize = () => {
-                changeWorldImageDialogLoading.value = false;
-                resetCropState();
-            };
-            r.onerror = finalize;
-            r.onabort = finalize;
-            r.onload = async function () {
-                const uploadPromise = (async () => {
-                    const bytes = new Uint8Array(r.result);
-                    let binary = '';
-                    for (let i = 0; i < bytes.length; i++) {
-                        binary += String.fromCharCode(bytes[i]);
-                    }
-                    const base64File = await resizeImageToFitLimits(btoa(binary));
-                    // 10MB
-                    await initiateUploadLegacy(base64File, blob);
-                    // await initiateUpload(base64File);
-                })();
-                toast.promise(uploadPromise, {
-                    loading: t('message.upload.loading'),
-                    success: t('message.upload.success'),
-                    error: t('message.upload.error')
-                });
-                try {
-                    await uploadPromise;
-                } catch (error) {
-                    console.error('World image upload process failed:', error);
-                } finally {
-                    finalize();
-                }
-            };
-
-            changeWorldImageDialogLoading.value = true;
-            try {
-                r.readAsArrayBuffer(blob);
-            } catch (error) {
-                console.error('Failed to read cropped image', error);
-                finalize();
-            }
-        }, 'image/png');
-    }
-
-    async function initiateUploadLegacy(base64File, file) {
-        const fileMd5 = await AppApi.MD5File(base64File);
-        const fileSizeInBytes = parseInt(file.size, 10);
-        const base64SignatureFile = await AppApi.SignFile(base64File);
-        const signatureMd5 = await AppApi.MD5File(base64SignatureFile);
-        const signatureSizeInBytes = parseInt(await AppApi.FileLength(base64SignatureFile), 10);
-        const worldId = worldDialog.value.id;
-        const { imageUrl } = worldDialog.value.ref;
-        const fileId = extractFileId(imageUrl);
-        worldImage.value = {
-            base64File,
-            fileMd5,
-            base64SignatureFile,
-            signatureMd5,
-            fileId,
-            worldId
-        };
-        const params = {
-            fileMd5,
-            fileSizeInBytes,
-            signatureMd5,
-            signatureSizeInBytes
-        };
-        const res = await imageRequest.uploadWorldImage(params, fileId);
-        return worldImageInit(res);
-    }
-
-    async function worldImageInit(args) {
-        const fileId = args.json.id;
-        const fileVersion = args.json.versions[args.json.versions.length - 1].version;
-        const params = {
-            fileId,
-            fileVersion
-        };
-        const res = await imageRequest.uploadWorldImageFileStart(params);
-        return worldImageFileStart(res);
-    }
-
-    async function worldImageFileStart(args) {
-        const { url } = args.json;
-        const { fileId, fileVersion } = args.params;
-        const params = {
-            url,
-            fileId,
-            fileVersion
-        };
-        return uploadWorldImageFileAWS(params);
-    }
-
-    async function uploadWorldImageFileAWS(params) {
-        const json = await webApiService.execute({
-            url: params.url,
-            uploadFilePUT: true,
-            fileData: worldImage.value.base64File,
-            fileMIME: 'image/png',
-            fileMD5: worldImage.value.fileMd5
-        });
-
-        if (json.status !== 200) {
-            changeWorldImageDialogLoading.value = false;
-            $throw(json.status, 'World image upload failed', params.url);
-        }
-        const args = {
-            json,
-            params
-        };
-        return worldImageFileAWS(args);
-    }
-
-    async function worldImageFileAWS(args) {
-        const { fileId, fileVersion } = args.params;
-        const params = {
-            fileId,
-            fileVersion
-        };
-        const res = await imageRequest.uploadWorldImageFileFinish(params);
-        return worldImageFileFinish(res);
-    }
-
-    async function worldImageFileFinish(args) {
-        const { fileId, fileVersion } = args.params;
-        const params = {
-            fileId,
-            fileVersion
-        };
-        const res = await imageRequest.uploadWorldImageSigStart(params);
-        return worldImageSigStart(res);
-    }
-
-    async function worldImageSigStart(args) {
-        const { url } = args.json;
-        const { fileId, fileVersion } = args.params;
-        const params = {
-            url,
-            fileId,
-            fileVersion
-        };
-        return uploadWorldImageSigAWS(params);
-    }
-
-    async function uploadWorldImageSigAWS(params) {
-        const json = await webApiService.execute({
-            url: params.url,
-            uploadFilePUT: true,
-            fileData: worldImage.value.base64SignatureFile,
-            fileMIME: 'application/x-rsync-signature',
-            fileMD5: worldImage.value.signatureMd5
-        });
-
-        if (json.status !== 200) {
-            changeWorldImageDialogLoading.value = false;
-            $throw(json.status, 'World image upload failed', params.url);
-        }
-        const args = {
-            json,
-            params
-        };
-        return worldImageSigAWS(args);
-    }
-
-    async function worldImageSigAWS(args) {
-        const { fileId, fileVersion } = args.params;
-        const params = {
-            fileId,
-            fileVersion
-        };
-        const res = await imageRequest.uploadWorldImageSigFinish(params);
-        return worldImageSigFinish(res);
-    }
-    async function worldImageSigFinish(args) {
-        const { fileId, fileVersion } = args.params;
-        const params = {
-            id: worldImage.value.worldId,
-            imageUrl: `${AppDebug.endpointDomain}/file/${fileId}/${fileVersion}/file`
-        };
-        const res = await imageRequest.setWorldImage(params);
-        return worldImageSet(res);
-    }
-
-    function worldImageSet(args) {
-        changeWorldImageDialogLoading.value = false;
-        if (args.json.imageUrl === args.params.imageUrl) {
-            emit('update:previousImageUrl', args.json.imageUrl);
-        } else {
-            $throw(0, 'World image change failed', args.params.imageUrl);
-        }
-    }
-
-    // ------------ Upload Process End ------------
-
-    async function initiateUpload(base64File) {
-        const args = await worldRequest.uploadWorldImage(base64File);
-        const fileUrl = args.json.versions[args.json.versions.length - 1].file.url;
-        const worldArgs = await worldRequest.saveWorld({
-            id: worldDialog.value.id,
-            imageUrl: fileUrl
-        });
-        const ref = applyWorld(worldArgs.json);
-        changeWorldImageDialogLoading.value = false;
-        emit('update:previousImageUrl', ref.imageUrl);
-
-        // closeDialog();
-    }
-
-    function uploadWorldImage() {
-        document.getElementById('WorldImageUploadButton').click();
-    }
-</script>
-
-<style scoped>
-    .img-size {
-        width: 500px;
-        height: 375px;
-    }
-</style>

src/components/dialogs/WorldDialog/WorldDialog.vue

@@ -744,9 +744,19 @@
             <NewInstanceDialog
                 :new-instance-dialog-location-tag="newInstanceDialogLocationTag"
                 :last-location="lastLocation" />
-            <ChangeWorldImageDialog
+            <input
-                v-model:change-world-image-dialog-visible="changeWorldImageDialogVisible"
+                id="WorldImageUploadButton"
-                v-model:previousImageUrl="previousImageUrl" />
+                type="file"
+                accept="image/*"
+                style="display: none"
+                @change="onFileChangeWorldImage" />
+            <ImageCropDialog
+                :open="cropDialogOpen"
+                :title="t('dialog.change_content_image.world')"
+                :aspect-ratio="4 / 3"
+                :file="cropDialogFile"
+                @update:open="cropDialogOpen = $event"
+                @confirm="onCropConfirmWorld" />
         </template>
     </div>
 </template>
@@ -805,7 +815,6 @@
         userStatusClass
     } from '../../../shared/utils';
     import {
-        useAdvancedSettingsStore,
         useAppearanceSettingsStore,
         useFavoriteStore,
         useGalleryStore,
@@ -813,7 +822,6 @@
         useInstanceStore,
         useInviteStore,
         useLocationStore,
-        useModalStore,
         useUserStore,
         useWorldStore
     } from '../../../stores';
@@ -824,19 +832,21 @@
         DropdownMenuSeparator,
         DropdownMenuTrigger
     } from '../../ui/dropdown-menu';
+    import {
+        handleImageUploadInput,
+        readFileAsBase64,
+        resizeImageToFitLimits,
+        uploadImageLegacy,
+        withUploadTimeout
+    } from '../../../shared/utils/imageUpload';
     import { favoriteRequest, miscRequest, userRequest, worldRequest } from '../../../api';
     import { Badge } from '../../ui/badge';
     import { database } from '../../../service/database.js';
     import { formatJsonVars } from '../../../shared/utils/base/ui';
 
+    import ImageCropDialog from '../ImageCropDialog.vue';
     import InstanceActionBar from '../../InstanceActionBar.vue';
 
-    const modalStore = useModalStore();
-    const { translateText } = useAdvancedSettingsStore();
-    const { bioLanguage, translationApi } = storeToRefs(useAdvancedSettingsStore());
-
-    const NewInstanceDialog = defineAsyncComponent(() => import('../NewInstanceDialog.vue'));
-    const ChangeWorldImageDialog = defineAsyncComponent(() => import('./ChangeWorldImageDialog.vue'));
     const SetWorldTagsDialog = defineAsyncComponent(() => import('./SetWorldTagsDialog.vue'));
     const WorldAllowedDomainsDialog = defineAsyncComponent(() => import('./WorldAllowedDomainsDialog.vue'));
 
@@ -868,8 +878,9 @@
     });
     const isSetWorldTagsDialogVisible = ref(false);
     const newInstanceDialogLocationTag = ref('');
-    const changeWorldImageDialogVisible = ref(false);
+    const cropDialogOpen = ref(false);
-    const previousImageUrl = ref('');
+    const cropDialogFile = ref(null);
+    const changeWorldImageLoading = ref(false);
     const translatedDescription = ref('');
     const isTranslating = ref(false);
 
@@ -1008,9 +1019,50 @@
     }
 
     function showChangeWorldImageDialog() {
-        const { imageUrl } = worldDialog.value.ref;
+        document.getElementById('WorldImageUploadButton').click();
-        previousImageUrl.value = imageUrl;
+    }
-        changeWorldImageDialogVisible.value = true;
+
+    function onFileChangeWorldImage(e) {
+        const { file, clearInput } = handleImageUploadInput(e, {
+            inputSelector: '#WorldImageUploadButton',
+            tooLargeMessage: () => t('message.file.too_large'),
+            invalidTypeMessage: () => t('message.file.not_image')
+        });
+        if (!file) {
+            return;
+        }
+        if (!worldDialog.value.visible || worldDialog.value.loading) {
+            clearInput();
+            return;
+        }
+        clearInput();
+        cropDialogFile.value = file;
+        cropDialogOpen.value = true;
+    }
+
+    async function onCropConfirmWorld(blob) {
+        changeWorldImageLoading.value = true;
+        try {
+            await withUploadTimeout(
+                (async () => {
+                    const base64Body = await readFileAsBase64(blob);
+                    const base64File = await resizeImageToFitLimits(base64Body);
+                    await uploadImageLegacy('world', {
+                        entityId: worldDialog.value.id,
+                        imageUrl: worldDialog.value.ref.imageUrl,
+                        base64File,
+                        blob
+                    });
+                })()
+            );
+            toast.success(t('message.upload.success'));
+        } catch (error) {
+            console.error('World image upload process failed:', error);
+            toast.error(t('message.upload.error'));
+        } finally {
+            changeWorldImageLoading.value = false;
+            cropDialogOpen.value = false;
+        }
     }
 
     function showNewInstanceDialog(tag) {

src/composables/useImageCropper.js

@@ -0,0 +1,112 @@
+import { ref } from 'vue';
+import { toast } from 'vue-sonner';
+import { useI18n } from 'vue-i18n';
+
+const MAX_PREVIEW_SIZE = 800;
+
+export function useImageCropper() {
+    const { t } = useI18n();
+
+    const cropperRef = ref(null);
+    const cropperImageSrc = ref('');
+    const originalImage = ref(null);
+    const previewScale = ref(1);
+
+    function resetCropState() {
+        cropperImageSrc.value = '';
+        originalImage.value = null;
+        previewScale.value = 1;
+    }
+
+    /**
+     * Downscaling for preview
+     * @param {File} file
+     */
+    function loadImageForCrop(file) {
+        const r = new FileReader();
+        r.onload = () => {
+            const img = new Image();
+            img.onload = () => {
+                originalImage.value = img;
+                if (
+                    img.width > MAX_PREVIEW_SIZE ||
+                    img.height > MAX_PREVIEW_SIZE
+                ) {
+                    const scale = Math.min(
+                        MAX_PREVIEW_SIZE / img.width,
+                        MAX_PREVIEW_SIZE / img.height
+                    );
+                    previewScale.value = scale;
+                    const cvs = document.createElement('canvas');
+                    cvs.width = Math.round(img.width * scale);
+                    cvs.height = Math.round(img.height * scale);
+                    const ctx = cvs.getContext('2d');
+                    ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
+                    cropperImageSrc.value = cvs.toDataURL('image/jpeg', 0.9);
+                } else {
+                    previewScale.value = 1;
+                    // @ts-ignore
+                    cropperImageSrc.value = r.result;
+                }
+            };
+            img.onerror = () => {
+                resetCropState();
+            };
+            // @ts-ignore
+            img.src = r.result;
+        };
+        r.onerror = () => {
+            resetCropState();
+            toast.error(t('message.file.not_image'));
+        };
+        r.readAsDataURL(file);
+    }
+
+    /**
+     * @param {File} [originalFile]
+     * @returns {Promise<Blob|null>}
+     */
+    function getCroppedBlob(originalFile) {
+        const result = cropperRef.value?.getResult();
+        if (!result?.coordinates || !originalImage.value) {
+            return Promise.resolve(null);
+        }
+
+        const { coordinates } = result;
+        const scale = previewScale.value;
+        const srcX = Math.round(coordinates.left / scale);
+        const srcY = Math.round(coordinates.top / scale);
+        const srcW = Math.round(coordinates.width / scale);
+        const srcH = Math.round(coordinates.height / scale);
+
+        const img = originalImage.value;
+        const noCrop =
+            srcX <= 1 &&
+            srcY <= 1 &&
+            Math.abs(srcW - img.width) <= 1 &&
+            Math.abs(srcH - img.height) <= 1;
+
+        // pass no crop
+        if (noCrop && originalFile) {
+            return Promise.resolve(originalFile);
+        }
+
+        const cropCanvas = document.createElement('canvas');
+        cropCanvas.width = srcW;
+        cropCanvas.height = srcH;
+        const ctx = cropCanvas.getContext('2d');
+        ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, srcW, srcH);
+
+        return new Promise((resolve) => {
+            cropCanvas.toBlob(resolve, 'image/png');
+        });
+    }
+
+    return {
+        cropperRef,
+        cropperImageSrc,
+        resetCropState,
+        loadImageForCrop,
+        getCroppedBlob
+    };
+}

src/localization/en.json

@@ -1694,7 +1694,8 @@
             "drone_skin": "Drone Skin",
             "emoji": "Emoji",
             "redeem": "Redeem",
-            "create_animated_emoji": "Animated Emoji Generator"
+            "create_animated_emoji": "Animated Emoji Generator",
+            "crop_image": "Confirm Upload"
         },
         "gallery_select": {
             "header": "Select Image",

src/shared/utils/imageUpload.js

@@ -1,4 +1,24 @@
 import { toast } from 'vue-sonner';
+
+import { $throw } from '../../service/request';
+import { AppDebug } from '../../service/appConfig.js';
+import { extractFileId } from './index.js';
+import { imageRequest } from '../../api';
+
+const UPLOAD_TIMEOUT_MS = 20_000;
+
+export function withUploadTimeout(promise) {
+    return Promise.race([
+        promise,
+        new Promise((_, reject) =>
+            setTimeout(
+                () => reject(new Error('Upload timed out')),
+                UPLOAD_TIMEOUT_MS
+            )
+        )
+    ]);
+}
+
 function resolveMessage(message) {
     if (typeof message === 'function') {
         return message();
@@ -71,3 +91,144 @@ export function handleImageUploadInput(event, options = {}) {
 
     return { file, clearInput };
 }
+
+/**
+ * File -> base64
+ * @param {Blob|File} blob
+ * @returns {Promise<string>} base64 encoded string
+ */
+export function readFileAsBase64(blob) {
+    return new Promise((resolve, reject) => {
+        const r = new FileReader();
+        r.onerror = reject;
+        r.onabort = reject;
+        r.onload = () => {
+            const bytes = new Uint8Array(r.result);
+            let binary = '';
+            for (let i = 0; i < bytes.length; i++) {
+                binary += String.fromCharCode(bytes[i]);
+            }
+            resolve(btoa(binary));
+        };
+        r.readAsArrayBuffer(blob);
+    });
+}
+
+/**
+ * @param {string} base64Data - base64 encoded image
+ * @returns {Promise<string>} resized base64 encoded image
+ */
+export async function resizeImageToFitLimits(base64Data) {
+    // frontend limit check = 20MB
+    return AppApi.ResizeImageToFitLimits(base64Data);
+}
+
+/**
+ * Upload image through AWS
+ * @param {'avatar'|'world'} type
+ * @param {object} opts
+ * @param {string} opts.entityId - avatar or world id
+ * @param {string} opts.imageUrl - current imageUrl on the entity
+ * @param {string} opts.base64File - base64 encoded image data
+ * @param {Blob}   opts.blob - the original blob (used for file size)
+ */
+export async function uploadImageLegacy(
+    type,
+    { entityId, imageUrl, base64File, blob }
+) {
+    const apiMap = {
+        avatar: {
+            uploadImage: imageRequest.uploadAvatarImage,
+            fileStart: imageRequest.uploadAvatarImageFileStart,
+            fileFinish: imageRequest.uploadAvatarImageFileFinish,
+            sigStart: imageRequest.uploadAvatarImageSigStart,
+            sigFinish: imageRequest.uploadAvatarImageSigFinish,
+            setImage: imageRequest.setAvatarImage
+        },
+        world: {
+            uploadImage: imageRequest.uploadWorldImage,
+            fileStart: imageRequest.uploadWorldImageFileStart,
+            fileFinish: imageRequest.uploadWorldImageFileFinish,
+            sigStart: imageRequest.uploadWorldImageSigStart,
+            sigFinish: imageRequest.uploadWorldImageSigFinish,
+            setImage: imageRequest.setWorldImage
+        }
+    };
+    const api = apiMap[type];
+
+    const fileMd5 = await AppApi.MD5File(base64File);
+    const fileSizeInBytes = parseInt(blob.size, 10);
+    const base64SignatureFile = await AppApi.SignFile(base64File);
+    const signatureMd5 = await AppApi.MD5File(base64SignatureFile);
+    const signatureSizeInBytes = parseInt(
+        await AppApi.FileLength(base64SignatureFile),
+        10
+    );
+    const fileId = extractFileId(imageUrl);
+
+    // imageInit
+    const uploadRes = await api.uploadImage(
+        { fileMd5, fileSizeInBytes, signatureMd5, signatureSizeInBytes },
+        fileId
+    );
+    const uploadedFileId = uploadRes.json.id;
+    const fileVersion =
+        uploadRes.json.versions[uploadRes.json.versions.length - 1].version;
+
+    // imageFileStart
+    const fileStartRes = await api.fileStart({
+        fileId: uploadedFileId,
+        fileVersion
+    });
+
+    // uploadImageFileAWS
+    const fileAwsRes = await webApiService.execute({
+        url: fileStartRes.json.url,
+        uploadFilePUT: true,
+        fileData: base64File,
+        fileMIME: 'image/png',
+        fileMD5: fileMd5
+    });
+    if (fileAwsRes.status !== 200) {
+        $throw(
+            fileAwsRes.status,
+            `${type} image upload failed`,
+            fileStartRes.json.url
+        );
+    }
+
+    // imageFileFinish
+    await api.fileFinish({ fileId: uploadedFileId, fileVersion });
+
+    // imageSigStart
+    const sigStartRes = await api.sigStart({
+        fileId: uploadedFileId,
+        fileVersion
+    });
+
+    // uploadImageSigAWS
+    const sigAwsRes = await webApiService.execute({
+        url: sigStartRes.json.url,
+        uploadFilePUT: true,
+        fileData: base64SignatureFile,
+        fileMIME: 'application/x-rsync-signature',
+        fileMD5: signatureMd5
+    });
+    if (sigAwsRes.status !== 200) {
+        $throw(
+            sigAwsRes.status,
+            `${type} image upload failed`,
+            sigStartRes.json.url
+        );
+    }
+
+    // imageSigFinish
+    await api.sigFinish({ fileId: uploadedFileId, fileVersion });
+
+    // imageSet
+    const newImageUrl = `${AppDebug.endpointDomain}/file/${uploadedFileId}/${fileVersion}/file`;
+    const setRes = await api.setImage({ id: entityId, imageUrl: newImageUrl });
+    if (setRes.json.imageUrl !== newImageUrl) {
+        $throw(0, `${type} image change failed`, newImageUrl);
+    }
+}

src/views/Tools/Gallery.vue

@@ -559,6 +559,14 @@
                 </div>
             </template>
         </TabsUnderline>
+
+        <ImageCropDialog
+            :open="cropDialogOpen"
+            :title="cropDialogTitle"
+            :aspect-ratio="cropDialogAspectRatio"
+            :file="cropDialogFile"
+            @update:open="cropDialogOpen = $event"
+            @confirm="onCropConfirm" />
     </div>
 </template>
 
@@ -592,11 +600,12 @@
     } from '../../shared/utils';
     import { inventoryRequest, miscRequest, userRequest, vrcPlusIconRequest, vrcPlusImageRequest } from '../../api';
     import { useAdvancedSettingsStore, useAuthStore, useGalleryStore, useModalStore, useUserStore } from '../../stores';
+    import { handleImageUploadInput, readFileAsBase64, withUploadTimeout } from '../../shared/utils/imageUpload';
     import { emojiAnimationStyleList, emojiAnimationStyleUrl } from '../../shared/constants';
     import { AppDebug } from '../../service/appConfig';
-    import { handleImageUploadInput } from '../../shared/utils/imageUpload';
 
     import Emoji from '../../components/Emoji.vue';
+    import ImageCropDialog from '../../components/dialogs/ImageCropDialog.vue';
 
     const { t } = useI18n();
     const router = useRouter();
@@ -663,6 +672,12 @@
     const pendingUploads = ref(0);
     const isUploading = computed(() => pendingUploads.value > 0);
 
+    const cropDialogOpen = ref(false);
+    const cropDialogTitle = ref('');
+    const cropDialogAspectRatio = ref(4 / 3);
+    const cropDialogFile = ref(null);
+    const cropDialogUploadHandler = ref(null);
+
     onMounted(() => {
         galleryDialogVisible.value = true;
         loadGalleryData();
@@ -685,6 +700,28 @@
         router.push({ name: 'tools' });
     }
 
+    function openCropDialog(file, title, aspectRatio, handler) {
+        cropDialogTitle.value = title;
+        cropDialogAspectRatio.value = aspectRatio;
+        cropDialogFile.value = file;
+        cropDialogUploadHandler.value = handler;
+        cropDialogOpen.value = true;
+    }
+
+    async function onCropConfirm(blob) {
+        if (!cropDialogUploadHandler.value) {
+            return;
+        }
+        const handler = cropDialogUploadHandler.value;
+        cropDialogUploadHandler.value = null;
+        cropDialogFile.value = null;
+        try {
+            await handler(blob);
+        } finally {
+            cropDialogOpen.value = false;
+        }
+    }
+
     function onFileChangeGallery(e) {
         const { file, clearInput } = handleImageUploadInput(e, {
             inputSelector: '#GalleryUploadButton',
@@ -694,41 +731,25 @@
         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());
-                const uploadPromise = vrcPlusImageRequest.uploadGalleryImage(base64Body).then((args) => {
-                    handleGalleryImageAdd(args);
-                    return args;
-                });
-                toast.promise(uploadPromise, {
-                    loading: t('message.upload.loading'),
-                    success: t('message.upload.success'),
-                    error: t('message.upload.error')
-                });
-                uploadPromise
-                    .catch((error) => {
-                        console.error('Failed to upload', error);
-                    })
-                    .finally(() => finishUpload());
-            } catch (error) {
-                finishUpload();
-                console.error('Failed to process image', error);
-            }
-        };
-        try {
-            r.readAsBinaryString(file);
-        } catch (error) {
-            clearInput();
-            finishUpload();
-            console.error('Failed to read file', error);
-        }
         clearInput();
+        openCropDialog(file, t('dialog.change_content_image.upload'), 4 / 3, async (blob) => {
+            startUpload();
+            try {
+                await withUploadTimeout(
+                    (async () => {
+                        const base64Body = await readFileAsBase64(blob);
+                        const args = await vrcPlusImageRequest.uploadGalleryImage(base64Body);
+                        handleGalleryImageAdd(args);
+                    })()
+                );
+                toast.success(t('message.upload.success'));
+            } catch (error) {
+                console.error('Failed to upload', error);
+                toast.error(t('message.upload.error'));
+            } finally {
+                finishUpload();
+            }
+        });
     }
 
     function displayGalleryUpload() {
@@ -789,43 +810,27 @@
         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());
-                const uploadPromise = vrcPlusIconRequest.uploadVRCPlusIcon(base64Body).then((args) => {
-                    if (Object.keys(VRCPlusIconsTable.value).length !== 0) {
-                        VRCPlusIconsTable.value.unshift(args.json);
-                    }
-                    return args;
-                });
-                toast.promise(uploadPromise, {
-                    loading: t('message.upload.loading'),
-                    success: t('message.upload.success'),
-                    error: t('message.upload.error')
-                });
-                uploadPromise
-                    .catch((error) => {
-                        console.error('Failed to upload VRC+ icon', error);
-                    })
-                    .finally(() => finishUpload());
-            } catch (error) {
-                finishUpload();
-                console.error('Failed to process upload', error);
-            }
-        };
-        try {
-            r.readAsBinaryString(file);
-        } catch (error) {
-            clearInput();
-            finishUpload();
-            console.error('Failed to read file', error);
-        }
         clearInput();
+        openCropDialog(file, t('dialog.change_content_image.upload'), 1 / 1, async (blob) => {
+            startUpload();
+            try {
+                await withUploadTimeout(
+                    (async () => {
+                        const base64Body = await readFileAsBase64(blob);
+                        const args = await vrcPlusIconRequest.uploadVRCPlusIcon(base64Body);
+                        if (Object.keys(VRCPlusIconsTable.value).length !== 0) {
+                            VRCPlusIconsTable.value.unshift(args.json);
+                        }
+                    })()
+                );
+                toast.success(t('message.upload.success'));
+            } catch (error) {
+                console.error('Failed to upload VRC+ icon', error);
+                toast.error(t('message.upload.error'));
+            } finally {
+                finishUpload();
+            }
+        });
     }
 
     function displayVRCPlusIconUpload() {
@@ -908,57 +913,41 @@
         if (!file) {
             return;
         }
-        startUpload();
         // set Emoji settings from fileName
         parseEmojiFileName(file.name);
-        const r = new FileReader();
-        const handleReaderError = () => finishUpload();
-        r.onerror = handleReaderError;
-        r.onabort = handleReaderError;
-        r.onload = function () {
-            try {
-                const params = {
-                    tag: emojiAnimType.value ? 'emojianimated' : 'emoji',
-                    animationStyle: emojiAnimationStyle.value.toLowerCase(),
-                    maskTag: 'square'
-                };
-                if (emojiAnimType.value) {
-                    params.frames = emojiAnimFrameCount.value;
-                    params.framesOverTime = emojiAnimFps.value;
-                }
-                if (emojiAnimLoopPingPong.value) {
-                    params.loopStyle = 'pingpong';
-                }
-                const base64Body = btoa(r.result.toString());
-                const uploadPromise = vrcPlusImageRequest.uploadEmoji(base64Body, params).then((args) => {
-                    if (Object.keys(emojiTable.value).length !== 0) {
-                        emojiTable.value.unshift(args.json);
-                    }
-                    return args;
-                });
-                toast.promise(uploadPromise, {
-                    loading: t('message.upload.loading'),
-                    success: t('message.upload.success'),
-                    error: t('message.upload.error')
-                });
-                uploadPromise
-                    .catch((error) => {
-                        console.error('Failed to upload', error);
-                    })
-                    .finally(() => finishUpload());
-            } catch (error) {
-                finishUpload();
-                console.error('Failed to process upload', error);
-            }
-        };
-        try {
-            r.readAsBinaryString(file);
-        } catch (error) {
-            clearInput();
-            finishUpload();
-            console.error('Failed to read file', error);
-        }
         clearInput();
+        openCropDialog(file, t('dialog.change_content_image.upload'), 1 / 1, async (blob) => {
+            startUpload();
+            try {
+                await withUploadTimeout(
+                    (async () => {
+                        const params = {
+                            tag: emojiAnimType.value ? 'emojianimated' : 'emoji',
+                            animationStyle: emojiAnimationStyle.value.toLowerCase(),
+                            maskTag: 'square'
+                        };
+                        if (emojiAnimType.value) {
+                            params.frames = emojiAnimFrameCount.value;
+                            params.framesOverTime = emojiAnimFps.value;
+                        }
+                        if (emojiAnimLoopPingPong.value) {
+                            params.loopStyle = 'pingpong';
+                        }
+                        const base64Body = await readFileAsBase64(blob);
+                        const args = await vrcPlusImageRequest.uploadEmoji(base64Body, params);
+                        if (Object.keys(emojiTable.value).length !== 0) {
+                            emojiTable.value.unshift(args.json);
+                        }
+                    })()
+                );
+                toast.success(t('message.upload.success'));
+            } catch (error) {
+                console.error('Failed to upload', error);
+                toast.error(t('message.upload.error'));
+            } finally {
+                finishUpload();
+            }
+        });
     }
 
     function displayEmojiUpload() {
@@ -988,45 +977,29 @@
         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());
-                const uploadPromise = vrcPlusImageRequest.uploadSticker(base64Body, params).then((args) => {
-                    handleStickerAdd(args);
-                    return args;
-                });
-                toast.promise(uploadPromise, {
-                    loading: t('message.upload.loading'),
-                    success: t('message.upload.success'),
-                    error: t('message.upload.error')
-                });
-                uploadPromise
-                    .catch((error) => {
-                        console.error('Failed to upload', error);
-                    })
-                    .finally(() => finishUpload());
-            } catch (error) {
-                finishUpload();
-                console.error('Failed to process upload', error);
-            }
-        };
-        try {
-            r.readAsBinaryString(file);
-        } catch (error) {
-            clearInput();
-            finishUpload();
-            console.error('Failed to read file', error);
-        }
         clearInput();
+        openCropDialog(file, t('dialog.change_content_image.upload'), 1 / 1, async (blob) => {
+            startUpload();
+            try {
+                await withUploadTimeout(
+                    (async () => {
+                        const params = {
+                            tag: 'sticker',
+                            maskTag: 'square'
+                        };
+                        const base64Body = await readFileAsBase64(blob);
+                        const args = await vrcPlusImageRequest.uploadSticker(base64Body, params);
+                        handleStickerAdd(args);
+                    })()
+                );
+                toast.success(t('message.upload.success'));
+            } catch (error) {
+                console.error('Failed to upload', error);
+                toast.error(t('message.upload.error'));
+            } finally {
+                finishUpload();
+            }
+        });
     }
 
     function displayStickerUpload() {
@@ -1057,55 +1030,37 @@
         if (!file) {
             return;
         }
-        startUpload();
+        clearInput();
-        const r = new FileReader();
+        openCropDialog(file, t('dialog.change_content_image.upload'), 16 / 9, async (blob) => {
-        const handleReaderError = () => finishUpload();
+            startUpload();
-        r.onerror = handleReaderError;
-        r.onabort = handleReaderError;
-        r.onload = function () {
             try {
-                const date = new Date();
+                await withUploadTimeout(
-                // why the fuck isn't this UTC
+                    (async () => {
-                date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
+                        const date = new Date();
-                const timestamp = date.toISOString().slice(0, 19);
+                        // why the fuck isn't this UTC
-                const params = {
+                        date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
-                    note: printUploadNote.value,
+                        const timestamp = date.toISOString().slice(0, 19);
-                    // worldId: '',
+                        const params = {
-                    timestamp
+                            note: printUploadNote.value,
-                };
+                            // worldId: '',
-                const base64Body = btoa(r.result.toString());
+                            timestamp
-                const cropWhiteBorder = printCropBorder.value;
+                        };
-                const uploadPromise = vrcPlusImageRequest
+                        const base64Body = await readFileAsBase64(blob);
-                    .uploadPrint(base64Body, cropWhiteBorder, params)
+                        const cropWhiteBorder = printCropBorder.value;
-                    .then((args) => {
+                        const args = await vrcPlusImageRequest.uploadPrint(base64Body, cropWhiteBorder, params);
                         if (Object.keys(printTable.value).length !== 0) {
                             printTable.value.unshift(args.json);
                         }
-                        return args;
+                    })()
-                    });
+                );
-                toast.promise(uploadPromise, {
+                toast.success(t('message.upload.success'));
-                    loading: t('message.upload.loading'),
-                    success: t('message.upload.success'),
-                    error: t('message.upload.error')
-                });
-                uploadPromise
-                    .catch((error) => {
-                        console.error('Failed to upload', error);
-                    })
-                    .finally(() => finishUpload());
             } catch (error) {
+                console.error('Failed to upload', error);
+                toast.error(t('message.upload.error'));
+            } finally {
                 finishUpload();
-                console.error('Failed to process upload', error);
             }
-        };
+        });
-        try {
-            r.readAsBinaryString(file);
-        } catch (error) {
-            clearInput();
-            finishUpload();
-            console.error('Failed to read file', error);
-        }
-        clearInput();
     }
 
     function displayPrintUpload() {