fix: support transformed image field uploads

Author: evan6seven

packages/decap-cms-core/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);
+    });
+  });
 });

packages/decap-cms-core/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 => {

packages/decap-cms-core/src/reducers/__tests__/entries.spec.js

@@ -549,6 +549,18 @@ describe('entries', () => {
       ).toEqual('/static/media/hosting-and-deployment/deployment-with-nanobox/image.png');
     });
 
+    it('should preserve generated transformation paths', () => {
+      expect(
+        selectMediaFilePublicPath(
+          { public_folder: '/uploads' },
+          null,
+          'public/uploads/_transformations/webp/kittens.webp',
+          undefined,
+          undefined,
+        ),
+      ).toBe('/uploads/_transformations/webp/kittens.webp');
+    });
+
     it('should handle file public_folder', () => {
       const entry = fromJS({
         path: 'src/posts/index.md',

packages/decap-cms-core/src/reducers/__tests__/mediaLibrary.spec.js

@@ -108,6 +108,35 @@ describe('mediaLibrary', () => {
     expect(selectMediaFolder).toHaveBeenCalledWith(state.config, collection, entry, imageField);
   });
 
+  it('should select draft transformation media files from collection when editing a draft', () => {
+    const { selectEditingDraft, selectMediaFolder } = require('../../reducers/entries');
+
+    selectEditingDraft.mockReturnValue(true);
+    selectMediaFolder.mockReturnValue('static/images/posts');
+
+    const imageField = fromJS({ name: 'image' });
+    const collection = fromJS({ fields: [imageField] });
+    const entry = fromJS({
+      collection: 'posts',
+      mediaFiles: [
+        { id: 1, path: 'static/images/posts/_transformations/webp/logo.webp' },
+        { id: 2, path: 'static/images/other/_transformations/webp/image.webp' },
+      ],
+      data: {},
+    });
+    const state = {
+      config: {},
+      collections: fromJS({ posts: collection }),
+      entryDraft: fromJS({
+        entry,
+      }),
+    };
+
+    expect(selectMediaFiles(state, imageField)).toEqual([
+      { id: 1, key: 1, path: 'static/images/posts/_transformations/webp/logo.webp' },
+    ]);
+  });
+
   it('should select global media files when not editing a draft', () => {
     const { selectEditingDraft } = require('../../reducers/entries');
 

packages/decap-cms-core/src/reducers/entries.ts

@@ -547,6 +547,17 @@ function getFileField(collectionFiles: CollectionFiles, slug: string | undefined
   return file;
 }
 
+function getMediaPublicPathSegment(mediaPath: string) {
+  const normalizedPath = trim(mediaPath, '/');
+  const transformationIndex = normalizedPath.indexOf('_transformations/');
+
+  if (transformationIndex >= 0) {
+    return normalizedPath.slice(transformationIndex);
+  }
+
+  return basename(mediaPath);
+}
+
 function hasCustomFolder(
   folderKey: 'media_folder' | 'public_folder',
   collection: Collection | null,
@@ -806,10 +817,10 @@ export function selectMediaFilePublicPath(
   }
 
   if (isAbsolutePath(publicFolder)) {
-    return joinUrlPath(publicFolder, basename(mediaPath));
+    return joinUrlPath(publicFolder, getMediaPublicPathSegment(mediaPath));
   }
 
-  return join(publicFolder, basename(mediaPath));
+  return join(publicFolder, getMediaPublicPathSegment(mediaPath));
 }
 
 export function selectEditingDraft(state: EntryDraft) {

packages/decap-cms-core/src/reducers/mediaLibrary.ts

@@ -34,6 +34,11 @@ import type {
   EntryField,
 } from '../types/redux';
 
+function isMediaFileInFolder(filePath: string, mediaFolder: string) {
+  const fileFolder = dirname(filePath);
+  return fileFolder === mediaFolder || fileFolder.startsWith(`${mediaFolder}/_transformations/`);
+}
+
 const defaultState: {
   isVisible: boolean;
   showMediaButton: boolean;
@@ -270,7 +275,7 @@ export function selectMediaFiles(state: State, field?: EntryField) {
     const collection = state.collections.get(entry?.get('collection'));
     const mediaFolder = selectMediaFolder(state.config, collection, entry, field);
     files = entryFiles
-      .filter(f => dirname(f.path) === mediaFolder)
+      .filter(f => isMediaFileInFolder(f.path, mediaFolder))
       .map(file => ({ key: file.id, ...file }));
   } else {
     files = mediaLibrary.get('files') || [];