@evfrenkel/decap-cms-core 3.13.0-image-conversions.2 → 3.13.0-image-conversions.5

package/dist/esm/bootstrap.js

@@ -49,8 +49,8 @@ function bootstrap(opts = {}) {
   /**
    * Log the version number.
    */
-  if (typeof "3.13.0-image-conversions.1" === 'string') {
-    console.log(`decap-cms-core ${"3.13.0-image-conversions.1"}`);
+  if (typeof "3.13.0-image-conversions.4" === 'string') {
+    console.log(`decap-cms-core ${"3.13.0-image-conversions.4"}`);
   }
 
   /**

package/dist/esm/components/UI/ErrorBoundary.js

@@ -42,8 +42,8 @@ function buildIssueTemplate({
   let version = '';
   if (typeof DECAP_CMS_VERSION === 'string') {
     version = `decap-cms@${DECAP_CMS_VERSION}`;
-  } else if (typeof "3.12.2-image-conversions.1" === 'string') {
-    version = `decap-cms-app@${"3.12.2-image-conversions.1"}`;
+  } else if (typeof "3.12.2-image-conversions.4" === 'string') {
+    version = `decap-cms-app@${"3.12.2-image-conversions.4"}`;
   }
   const template = getIssueTemplate({
     version,

package/dist/esm/lib/imageTransformations.js

@@ -98,11 +98,23 @@ function getImageBytes(image, format, quality = 75) {
   }
   return image.get_bytes();
 }
+async function getFileBytes(file) {
+  if (typeof file.arrayBuffer === 'function') {
+    return new Uint8Array(await file.arrayBuffer());
+  }
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(new Uint8Array(reader.result));
+    reader.onerror = () => reject(reader.error);
+    reader.readAsArrayBuffer(file);
+  });
+}
 export async function transformImage(file, originalPath, config) {
   const photon = await import('@silvia-odwyer/photon');
   const initPhoton = photon.default;
   await initPhoton();
-  const originalImage = photon.PhotonImage.new_from_blob(file);
+  const imageBytes = await getFileBytes(file);
+  const originalImage = photon.PhotonImage.new_from_byteslice(imageBytes);
   try {
     const transformedFiles = config.variants.map(variant => {
       const {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@evfrenkel/decap-cms-core",
   "description": "Decap CMS core application, see decap-cms package for the main distribution.",
-  "version": "3.13.0-image-conversions.2",
+  "version": "3.13.0-image-conversions.5",
   "module": "dist/esm/index.js",
   "main": "dist/decap-cms-core.js",
   "files": [

package/src/lib/__tests__/imageTransformations.spec.ts

@@ -4,9 +4,41 @@ import {
   getImageTransformationsConfig,
   shouldTransformImage,
   sortTransformationFilesForSelection,
+  transformImage,
 } from '../imageTransformations';
 
+const mockPhotonImage = {
+  get_width: jest.fn(() => 100),
+  get_height: jest.fn(() => 50),
+  get_bytes_webp: jest.fn(() => new Uint8Array([1, 2, 3])),
+  get_bytes_jpeg: jest.fn(() => new Uint8Array([4, 5, 6])),
+  get_bytes: jest.fn(() => new Uint8Array([7, 8, 9])),
+  free: jest.fn(),
+};
+
+const mockNewFromByteslice = jest.fn(() => mockPhotonImage);
+const mockNewFromBlob = jest.fn();
+
+jest.mock(
+  '@silvia-odwyer/photon',
+  () => ({
+    __esModule: true,
+    default: jest.fn(() => Promise.resolve()),
+    PhotonImage: {
+      new_from_byteslice: mockNewFromByteslice,
+      new_from_blob: mockNewFromBlob,
+    },
+    resize: jest.fn(),
+    SamplingFilter: { Lanczos3: 'Lanczos3' },
+  }),
+  { virtual: true },
+);
+
 describe('imageTransformations', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   describe('getImageTransformationsConfig', () => {
     it('normalizes array shorthand and keeps the original by default', () => {
       expect(
@@ -105,4 +137,25 @@ describe('imageTransformations', () => {
       expect(sortTransformationFilesForSelection([original, small])).toEqual([small, original]);
     });
   });
+
+  describe('transformImage', () => {
+    it('creates the Photon image from file bytes instead of blob', async () => {
+      const file = new File([new Uint8Array([255, 216, 255])], 'image.jpg', {
+        type: 'image/jpeg',
+      });
+
+      const files = await transformImage(file, 'uploads/image.jpg', {
+        keepOriginal: false,
+        variants: [{ name: 'webp', format: 'webp', keep_original_size: true }],
+      });
+
+      expect(mockNewFromByteslice).toHaveBeenCalledTimes(1);
+      expect(mockNewFromByteslice.mock.calls[0][0]).toEqual(new Uint8Array([255, 216, 255]));
+      expect(mockNewFromBlob).not.toHaveBeenCalled();
+      expect(files).toHaveLength(1);
+      expect(files[0].file.name).toBe('image.webp');
+      expect(files[0].path).toBe('uploads/_transformations/webp/image.webp');
+      expect(mockPhotonImage.free).toHaveBeenCalledTimes(1);
+    });
+  });
 });

package/src/lib/imageTransformations.ts

@@ -174,6 +174,19 @@ function getImageBytes(image: PhotonImage, format: string, quality = 75) {
   return image.get_bytes();
 }
 
+async function getFileBytes(file: File) {
+  if (typeof file.arrayBuffer === 'function') {
+    return new Uint8Array(await file.arrayBuffer());
+  }
+
+  return new Promise<Uint8Array>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(new Uint8Array(reader.result as ArrayBuffer));
+    reader.onerror = () => reject(reader.error);
+    reader.readAsArrayBuffer(file);
+  });
+}
+
 export async function transformImage(
   file: File,
   originalPath: string,
@@ -183,7 +196,8 @@ export async function transformImage(
   const initPhoton = (photon as unknown as { default: () => Promise<unknown> }).default;
   await initPhoton();
 
-  const originalImage = photon.PhotonImage.new_from_blob(file);
+  const imageBytes = await getFileBytes(file);
+  const originalImage = photon.PhotonImage.new_from_byteslice(imageBytes);
 
   try {
     const transformedFiles = config.variants.map(variant => {