@orion-studios/payload-studio 0.5.0-beta.63 → 0.5.0-beta.64

package/dist/admin-app/client.js

@@ -691,6 +691,64 @@ function MediaListItem({
 // src/admin-app/components/MediaUploadForm.tsx
 var import_react5 = require("react");
 var import_navigation = require("next/navigation");
+
+// src/shared/clientImageUploadOptimization.ts
+var MAX_DIRECT_UPLOAD_BYTES = 4e6;
+async function optimizeImageForUpload(file) {
+  if (!file.type.startsWith("image/")) {
+    return file;
+  }
+  if (file.size <= MAX_DIRECT_UPLOAD_BYTES) {
+    return file;
+  }
+  const objectURL = URL.createObjectURL(file);
+  try {
+    const image = await new Promise((resolve, reject) => {
+      const nextImage = new Image();
+      nextImage.onload = () => resolve(nextImage);
+      nextImage.onerror = () => reject(new Error("Could not read image for upload optimization."));
+      nextImage.src = objectURL;
+    });
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, image.width);
+    canvas.height = Math.max(1, image.height);
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return file;
+    }
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    const outputMime = file.type === "image/webp" ? "image/webp" : "image/jpeg";
+    const qualityPasses = [0.82, 0.74, 0.66, 0.58, 0.5, 0.42, 0.36];
+    let bestFile = null;
+    for (const quality of qualityPasses) {
+      const blob = await new Promise((resolve) => {
+        canvas.toBlob((value) => resolve(value), outputMime, quality);
+      });
+      if (!blob) {
+        continue;
+      }
+      const optimizedName = file.name.replace(/\.[^/.]+$/, outputMime === "image/webp" ? ".webp" : ".jpg");
+      const optimized = new File([blob], optimizedName, {
+        lastModified: Date.now(),
+        type: outputMime
+      });
+      if (!bestFile || optimized.size < bestFile.size) {
+        bestFile = optimized;
+      }
+      if (optimized.size <= MAX_DIRECT_UPLOAD_BYTES) {
+        break;
+      }
+    }
+    if (!bestFile) {
+      return file;
+    }
+    return bestFile.size < file.size ? bestFile : file;
+  } finally {
+    URL.revokeObjectURL(objectURL);
+  }
+}
+
+// src/admin-app/components/MediaUploadForm.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var MEDIA_LIBRARY_SYNC_EVENT = "orion-media-library-updated";
 var notifyMediaLibraryUpdated = () => {
@@ -773,12 +831,16 @@ function MediaUploadForm() {
     setSubmitting(true);
     setError(null);
     try {
+      const optimizedFile = await optimizeImageForUpload(file);
+      if (optimizedFile.size > MAX_DIRECT_UPLOAD_BYTES) {
+        throw new Error("Image is too large. Use an image under 4MB or lower-resolution export.");
+      }
       const formData = new FormData();
       const fallbackAlt = file.name.replace(/\.[^/.]+$/, "").trim();
       const resolvedAlt = alt.trim() || fallbackAlt || "Uploaded image";
       formData.set("_payload", JSON.stringify({ alt: resolvedAlt }));
       formData.set("alt", resolvedAlt);
-      formData.set("file", file);
+      formData.set("file", optimizedFile);
       const response = await fetch("/api/media", {
         method: "POST",
         credentials: "include",

package/dist/admin-app/client.mjs

@@ -1,4 +1,8 @@
 'use client';
+import {
+  MAX_DIRECT_UPLOAD_BYTES,
+  optimizeImageForUpload
+} from "../chunk-I522K6BZ.mjs";
 
 // src/admin-app/components/AdminShellClient.tsx
 import { useEffect, useState } from "react";
@@ -742,12 +746,16 @@ function MediaUploadForm() {
     setSubmitting(true);
     setError(null);
     try {
+      const optimizedFile = await optimizeImageForUpload(file);
+      if (optimizedFile.size > MAX_DIRECT_UPLOAD_BYTES) {
+        throw new Error("Image is too large. Use an image under 4MB or lower-resolution export.");
+      }
       const formData = new FormData();
       const fallbackAlt = file.name.replace(/\.[^/.]+$/, "").trim();
       const resolvedAlt = alt.trim() || fallbackAlt || "Uploaded image";
       formData.set("_payload", JSON.stringify({ alt: resolvedAlt }));
       formData.set("alt", resolvedAlt);
-      formData.set("file", file);
+      formData.set("file", optimizedFile);
       const response = await fetch("/api/media", {
         method: "POST",
         credentials: "include",

package/dist/chunk-I522K6BZ.mjs

@@ -0,0 +1,62 @@
+'use client';
+
+// src/shared/clientImageUploadOptimization.ts
+var MAX_DIRECT_UPLOAD_BYTES = 4e6;
+async function optimizeImageForUpload(file) {
+  if (!file.type.startsWith("image/")) {
+    return file;
+  }
+  if (file.size <= MAX_DIRECT_UPLOAD_BYTES) {
+    return file;
+  }
+  const objectURL = URL.createObjectURL(file);
+  try {
+    const image = await new Promise((resolve, reject) => {
+      const nextImage = new Image();
+      nextImage.onload = () => resolve(nextImage);
+      nextImage.onerror = () => reject(new Error("Could not read image for upload optimization."));
+      nextImage.src = objectURL;
+    });
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, image.width);
+    canvas.height = Math.max(1, image.height);
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return file;
+    }
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    const outputMime = file.type === "image/webp" ? "image/webp" : "image/jpeg";
+    const qualityPasses = [0.82, 0.74, 0.66, 0.58, 0.5, 0.42, 0.36];
+    let bestFile = null;
+    for (const quality of qualityPasses) {
+      const blob = await new Promise((resolve) => {
+        canvas.toBlob((value) => resolve(value), outputMime, quality);
+      });
+      if (!blob) {
+        continue;
+      }
+      const optimizedName = file.name.replace(/\.[^/.]+$/, outputMime === "image/webp" ? ".webp" : ".jpg");
+      const optimized = new File([blob], optimizedName, {
+        lastModified: Date.now(),
+        type: outputMime
+      });
+      if (!bestFile || optimized.size < bestFile.size) {
+        bestFile = optimized;
+      }
+      if (optimized.size <= MAX_DIRECT_UPLOAD_BYTES) {
+        break;
+      }
+    }
+    if (!bestFile) {
+      return file;
+    }
+    return bestFile.size < file.size ? bestFile : file;
+  } finally {
+    URL.revokeObjectURL(objectURL);
+  }
+}
+
+export {
+  MAX_DIRECT_UPLOAD_BYTES,
+  optimizeImageForUpload
+};

package/dist/studio-pages/client.js

@@ -263,6 +263,62 @@ var layoutToStudioDocument = (layout, title, metadata) => {
   };
 };
 
+// src/shared/clientImageUploadOptimization.ts
+var MAX_DIRECT_UPLOAD_BYTES = 4e6;
+async function optimizeImageForUpload(file) {
+  if (!file.type.startsWith("image/")) {
+    return file;
+  }
+  if (file.size <= MAX_DIRECT_UPLOAD_BYTES) {
+    return file;
+  }
+  const objectURL = URL.createObjectURL(file);
+  try {
+    const image = await new Promise((resolve, reject) => {
+      const nextImage = new Image();
+      nextImage.onload = () => resolve(nextImage);
+      nextImage.onerror = () => reject(new Error("Could not read image for upload optimization."));
+      nextImage.src = objectURL;
+    });
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, image.width);
+    canvas.height = Math.max(1, image.height);
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return file;
+    }
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    const outputMime = file.type === "image/webp" ? "image/webp" : "image/jpeg";
+    const qualityPasses = [0.82, 0.74, 0.66, 0.58, 0.5, 0.42, 0.36];
+    let bestFile = null;
+    for (const quality of qualityPasses) {
+      const blob = await new Promise((resolve) => {
+        canvas.toBlob((value) => resolve(value), outputMime, quality);
+      });
+      if (!blob) {
+        continue;
+      }
+      const optimizedName = file.name.replace(/\.[^/.]+$/, outputMime === "image/webp" ? ".webp" : ".jpg");
+      const optimized = new File([blob], optimizedName, {
+        lastModified: Date.now(),
+        type: outputMime
+      });
+      if (!bestFile || optimized.size < bestFile.size) {
+        bestFile = optimized;
+      }
+      if (optimized.size <= MAX_DIRECT_UPLOAD_BYTES) {
+        break;
+      }
+    }
+    if (!bestFile) {
+      return file;
+    }
+    return bestFile.size < file.size ? bestFile : file;
+  } finally {
+    URL.revokeObjectURL(objectURL);
+  }
+}
+
 // src/studio-pages/builder/presets.ts
 var sectionPresets = [
   {
@@ -1030,7 +1086,6 @@ async function parsePayloadErrorMessage(response, fallbackMessage) {
   }
   return fallbackMessage;
 }
-var MAX_DIRECT_UPLOAD_BYTES = 4e6;
 var MEDIA_LIBRARY_SYNC_EVENT = "orion-media-library-updated";
 var notifyMediaLibraryUpdated = () => {
   if (typeof window === "undefined") {
@@ -1049,59 +1104,6 @@ var notifyMediaLibraryUpdated = () => {
   } catch {
   }
 };
-async function optimizeImageForUpload(file) {
-  if (!file.type.startsWith("image/")) {
-    return file;
-  }
-  if (file.size <= MAX_DIRECT_UPLOAD_BYTES) {
-    return file;
-  }
-  const objectURL = URL.createObjectURL(file);
-  try {
-    const image = await new Promise((resolve, reject) => {
-      const nextImage = new Image();
-      nextImage.onload = () => resolve(nextImage);
-      nextImage.onerror = () => reject(new Error("Could not read image for upload optimization."));
-      nextImage.src = objectURL;
-    });
-    const canvas = document.createElement("canvas");
-    canvas.width = Math.max(1, image.width);
-    canvas.height = Math.max(1, image.height);
-    const context = canvas.getContext("2d");
-    if (!context) {
-      return file;
-    }
-    context.drawImage(image, 0, 0, canvas.width, canvas.height);
-    const outputMime = file.type === "image/webp" ? "image/webp" : "image/jpeg";
-    const qualityPasses = [0.82, 0.74, 0.66, 0.58, 0.5, 0.42, 0.36];
-    let bestFile = null;
-    for (const quality of qualityPasses) {
-      const blob = await new Promise((resolve) => {
-        canvas.toBlob((value) => resolve(value), outputMime, quality);
-      });
-      if (!blob) {
-        continue;
-      }
-      const optimizedName = file.name.replace(/\.[^/.]+$/, outputMime === "image/webp" ? ".webp" : ".jpg");
-      const optimized = new File([blob], optimizedName, {
-        lastModified: Date.now(),
-        type: outputMime
-      });
-      if (!bestFile || optimized.size < bestFile.size) {
-        bestFile = optimized;
-      }
-      if (optimized.size <= MAX_DIRECT_UPLOAD_BYTES) {
-        break;
-      }
-    }
-    if (!bestFile) {
-      return file;
-    }
-    return bestFile.size < file.size ? bestFile : file;
-  } finally {
-    URL.revokeObjectURL(objectURL);
-  }
-}
 function InlineText({
   as = "p",
   className,

package/dist/studio-pages/client.mjs

@@ -1,5 +1,9 @@
 'use client';
 "use client";
+import {
+  MAX_DIRECT_UPLOAD_BYTES,
+  optimizeImageForUpload
+} from "../chunk-I522K6BZ.mjs";
 
 // src/studio-pages/builder/BuilderPageEditor.tsx
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -1002,7 +1006,6 @@ async function parsePayloadErrorMessage(response, fallbackMessage) {
   }
   return fallbackMessage;
 }
-var MAX_DIRECT_UPLOAD_BYTES = 4e6;
 var MEDIA_LIBRARY_SYNC_EVENT = "orion-media-library-updated";
 var notifyMediaLibraryUpdated = () => {
   if (typeof window === "undefined") {
@@ -1021,59 +1024,6 @@ var notifyMediaLibraryUpdated = () => {
   } catch {
   }
 };
-async function optimizeImageForUpload(file) {
-  if (!file.type.startsWith("image/")) {
-    return file;
-  }
-  if (file.size <= MAX_DIRECT_UPLOAD_BYTES) {
-    return file;
-  }
-  const objectURL = URL.createObjectURL(file);
-  try {
-    const image = await new Promise((resolve, reject) => {
-      const nextImage = new Image();
-      nextImage.onload = () => resolve(nextImage);
-      nextImage.onerror = () => reject(new Error("Could not read image for upload optimization."));
-      nextImage.src = objectURL;
-    });
-    const canvas = document.createElement("canvas");
-    canvas.width = Math.max(1, image.width);
-    canvas.height = Math.max(1, image.height);
-    const context = canvas.getContext("2d");
-    if (!context) {
-      return file;
-    }
-    context.drawImage(image, 0, 0, canvas.width, canvas.height);
-    const outputMime = file.type === "image/webp" ? "image/webp" : "image/jpeg";
-    const qualityPasses = [0.82, 0.74, 0.66, 0.58, 0.5, 0.42, 0.36];
-    let bestFile = null;
-    for (const quality of qualityPasses) {
-      const blob = await new Promise((resolve) => {
-        canvas.toBlob((value) => resolve(value), outputMime, quality);
-      });
-      if (!blob) {
-        continue;
-      }
-      const optimizedName = file.name.replace(/\.[^/.]+$/, outputMime === "image/webp" ? ".webp" : ".jpg");
-      const optimized = new File([blob], optimizedName, {
-        lastModified: Date.now(),
-        type: outputMime
-      });
-      if (!bestFile || optimized.size < bestFile.size) {
-        bestFile = optimized;
-      }
-      if (optimized.size <= MAX_DIRECT_UPLOAD_BYTES) {
-        break;
-      }
-    }
-    if (!bestFile) {
-      return file;
-    }
-    return bestFile.size < file.size ? bestFile : file;
-  } finally {
-    URL.revokeObjectURL(objectURL);
-  }
-}
 function InlineText({
   as = "p",
   className,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.5.0-beta.63",
+  "version": "0.5.0-beta.64",
   "description": "Unified Payload CMS toolkit for Orion Studios",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",