Fix uploading world images

src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue

@@ -35,7 +35,7 @@
             </el-button-group>
             <br />
             <div class="x-change-image-item">
-                <img :src="currentImageUrl" class="img-size" loading="lazy" />
+                <img :src="previousImageUrl" class="img-size" loading="lazy" />
             </div>
         </div>
     </el-dialog>
@@ -45,18 +45,21 @@
     import { ElMessage } from 'element-plus';
     import { Upload } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
-    import { computed, ref } from 'vue';
+    import { ref } from 'vue';
     import { useI18n } from 'vue-i18n';
-    import { avatarRequest } from '../../../api';
+    import { avatarRequest, imageRequest } from '../../../api';
     import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
     import { useAvatarStore } from '../../../stores';
+    import { $throw } from '../../../service/request';
+    import { AppDebug } from '../../../service/appConfig';
+    import { extractFileId } from '../../../shared/utils';
 
     const { t } = useI18n();
 
     const { avatarDialog } = storeToRefs(useAvatarStore());
     const { applyAvatar } = useAvatarStore();
 
-    const props = defineProps({
+    defineProps({
         changeAvatarImageDialogVisible: {
             type: Boolean,
             required: true
@@ -68,7 +71,14 @@
     });
 
     const changeAvatarImageDialogLoading = ref(false);
-    const currentImageUrl = computed(() => props.previousImageUrl);
+    const avatarImage = ref({
+        base64File: '',
+        fileMd5: '',
+        base64SignatureFile: '',
+        signatureMd5: '',
+        fileId: '',
+        avatarId: ''
+    });
 
     const emit = defineEmits(['update:changeAvatarImageDialogVisible', 'update:previousImageUrl']);
 
@@ -106,9 +116,15 @@
             try {
                 const base64File = await resizeImageToFitLimits(btoa(r.result.toString()));
                 // 10MB
-                await initiateUpload(base64File);
+                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, file);
             } catch (error) {
-                console.error('Avatar image upload process failed:', error);
+                console.error('avatar image upload process failed:', error);
             } finally {
                 finalize();
             }
@@ -123,6 +139,164 @@
         }
     }
 
+    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',
+            headers: {
+                'Content-MD5': 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',
+            headers: {
+                'Content-MD5': 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) {
+            ElMessage({
+                message: t('message.avatar.image_changed'),
+                type: 'success'
+            });
+            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;
@@ -131,8 +305,8 @@
             imageUrl: fileUrl
         });
         const ref = applyAvatar(avatarArgs.json);
-        emit('update:previousImageUrl', ref.imageUrl);
         changeAvatarImageDialogLoading.value = false;
+        emit('update:previousImageUrl', ref.imageUrl);
         ElMessage({
             message: t('message.avatar.image_changed'),
             type: 'success'

src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue

@@ -47,9 +47,12 @@
     import { storeToRefs } from 'pinia';
     import { ref } from 'vue';
     import { useI18n } from 'vue-i18n';
-    import { worldRequest } from '../../../api';
+    import { worldRequest, imageRequest } from '../../../api';
     import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
     import { useWorldStore } from '../../../stores';
+    import { $throw } from '../../../service/request';
+    import { AppDebug } from '../../../service/appConfig';
+    import { extractFileId } from '../../../shared/utils';
 
     const { t } = useI18n();
 
@@ -68,6 +71,14 @@
     });
 
     const changeWorldImageDialogLoading = ref(false);
+    const worldImage = ref({
+        base64File: '',
+        fileMd5: '',
+        base64SignatureFile: '',
+        signatureMd5: '',
+        fileId: '',
+        worldId: ''
+    });
 
     const emit = defineEmits(['update:changeWorldImageDialogVisible', 'update:previousImageUrl']);
 
@@ -105,7 +116,8 @@
             try {
                 const base64File = await resizeImageToFitLimits(btoa(r.result.toString()));
                 // 10MB
-                await initiateUpload(base64File);
+                await initiateUploadLegacy(base64File, file);
+                // await initiateUpload(base64File);
             } catch (error) {
                 console.error('World image upload process failed:', error);
             } finally {
@@ -122,6 +134,164 @@
         }
     }
 
+    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',
+            headers: {
+                'Content-MD5': 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',
+            headers: {
+                'Content-MD5': 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) {
+            ElMessage({
+                message: t('message.world.image_changed'),
+                type: 'success'
+            });
+            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;

src/components/dialogs/WorldDialog/WorldDialog.vue

@@ -283,7 +283,7 @@
                                         <el-dropdown-item :icon="Edit" command="Change Allowed Domains">
                                             {{ t('dialog.world.actions.change_allowed_video_player_domains') }}
                                         </el-dropdown-item>
-                                        <el-dropdown-item :icon="Picture" command="Change Image">
+                                        <el-dropdown-item v-if="isWindows" :icon="Picture" command="Change Image">
                                             {{ t('dialog.world.actions.change_image') }}
                                         </el-dropdown-item>
                                         <el-dropdown-item
@@ -862,6 +862,8 @@
         }
     });
 
+    const isWindows = computed(() => WINDOWS);
+
     const memo = computed({
         get() {
             return worldDialog.value.memo;
@@ -966,7 +968,7 @@
         treeData.value = [];
     }
 
-    function showChangeAvatarImageDialog() {
+    function showChangeWorldImageDialog() {
         const { imageUrl } = worldDialog.value.ref;
         previousImageUrl.value = imageUrl;
         changeWorldImageDialogVisible.value = true;
@@ -1120,7 +1122,7 @@
                 openExternalLink(replaceVrcPackageUrl(worldDialog.value.ref.unityPackageUrl));
                 break;
             case 'Change Image':
-                showChangeAvatarImageDialog();
+                showChangeWorldImageDialog();
                 break;
             case 'Refresh':
                 showWorldDialog(D.id);