Fix uploading world images

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);