add image plane faster than before from media token

frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/uploadPlane.ts

@@ -122,3 +122,53 @@ const takeVideoSnapshot = async (
 
   return blob;
 };
+
+export const uploadPlaneFromMediaToken = async ({
+  title,
+  mediaToken,
+  progressCallback,
+}: {
+  title: string;
+  mediaToken: string;
+  progressCallback: (newState: UploaderState) => void;
+}) => {
+  // Step 1: Set uploading state (simulate asset upload)
+  progressCallback({ status: UploaderStates.uploadingAsset });
+
+  // Step 2: Fetch the media file info (to get type, etc.)
+  const mediaFilesApi = new MediaFilesApi();
+  const mediaFileResponse = await mediaFilesApi.GetMediaFileByToken({
+    mediaFileToken: mediaToken,
+  });
+  if (!mediaFileResponse.success || !mediaFileResponse.data) {
+    progressCallback({
+      status: UploaderStates.assetError,
+      errorMessage:
+        mediaFileResponse.errorMessage ||
+        "Could not fetch media file by token.",
+    });
+    return;
+  }
+
+  // Step 3: Optionally set the title (rename)
+  if (title && mediaFileResponse.data.maybe_title !== title) {
+    const renameResponse = await mediaFilesApi.RenameMediaFileByToken({
+      mediaToken,
+      name: title,
+    });
+    if (!renameResponse.success) {
+      progressCallback({
+        status: UploaderStates.assetError,
+        errorMessage:
+          renameResponse.errorMessage || "Could not rename media file.",
+      });
+      return;
+    }
+  }
+
+  // Step 4: (Optional) Set cover image if needed (skip if already set)
+  // For simplicity, we skip cover image upload here, but you could add logic to set a cover if needed.
+
+  // Step 5: Success
+  progressCallback({ status: UploaderStates.success });
+};

frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx

@@ -55,12 +55,13 @@ import {
   topNavMediaUrl,
 } from "~/components/signaled/TopBar/TopBar";
 import { setOnImageDrop } from "../../../../../../libs/components/gallery-modal/src/lib/galleryDnd";
-import { uploadPlane } from "~/components/reusable/UploadModalMedia/uploadPlane";
+import { uploadPlaneFromMediaToken } from "~/components/reusable/UploadModalMedia/uploadPlane";
 import { addObject } from "./signals/objectGroup/addObject";
 import { AssetType } from "~/enums";
 import { v4 as uuidv4 } from "uuid";
 import { MediaItem } from "~/pages/PageEnigma/models";
 import { GalleryItem } from "../../../../../../libs/components/gallery-modal/src/lib/gallery-modal";
+import { UploaderState } from "~/models";
 
 export const PageEditor = () => {
   useSignals();
@@ -82,24 +83,10 @@ export const PageEditor = () => {
       async (item: GalleryItem, _position: { x: number; y: number }) => {
         console.log("Gallery image dropped", item, _position);
         try {
-          // Fetch the image (prefer fullImage, fallback to thumbnail)
-          const url = item.fullImage || item.thumbnail;
-          if (!url) {
-            console.warn("No image URL found for dropped item", item);
-            return;
-          }
-          console.log("Fetching image from URL:", url);
-          const response = await fetch(url);
-          const blob = await response.blob();
-          const file = new File([blob], item.label || "image.png", {
-            type: blob.type,
-          });
-          console.log("Image file created:", file);
-          // Upload the image as a plane
-          await uploadPlane({
+          await uploadPlaneFromMediaToken({
             title: item.label || "Image Plane",
-            assetFile: file,
-            progressCallback: (state) => {
+            mediaToken: item.id,
+            progressCallback: (state: UploaderState) => {
               if (state.status) console.log("Upload status:", state.status);
             },
           });