fix: pass cdnUrlModifiers to the output

abstract/Block.js

@@ -374,8 +374,18 @@ export class Block extends BaseComponent {
     let items = this.uploadCollection.items();
     items.forEach((itemId) => {
       let uploadEntryData = Data.getNamedCtx(itemId).store;
-      let info = uploadEntryData.fileInfo;
-      data.push(info);
+      /** @type {import('../submodules/upload-client/upload-client.js').UploadcareFile} */
+      let fileInfo = uploadEntryData.fileInfo;
+      // TODO: remove `cdnUrlModifiers` from fileInfo object returned by upload-client, `cdnUrl` should not contain modifiers
+      // TODO: create OutputItem instance instead of creating inline object,
+      //       fileInfo should be returned as is along with the other data
+      // TODO: pass editorTransformations to the user
+      let outputItem = {
+        ...fileInfo,
+        cdnUrlModifiers: uploadEntryData.cdnUrlModifiers || fileInfo.cdnUrlModifiers,
+        cdnUrl: uploadEntryData.cdnUrl || fileInfo.cdnUrl,
+      };
+      data.push(outputItem);
     });
     this.$['*outputData'] = data;
   }

abstract/uploadEntrySchema.js

@@ -1,6 +1,27 @@
 import { UploadcareFile, UploadClientError } from '../submodules/upload-client/upload-client.js';
 
-/** @enum {{ type; value; nullable?: Boolean }} */
+/**
+ * @typedef {Object} UploadEntry
+ * @property {File} file
+ * @property {String} externalUrl
+ * @property {String} fileName
+ * @property {number} fileSize
+ * @property {number} lastModified
+ * @property {number} uploadProgress
+ * @property {String} uuid
+ * @property {Boolean} isImage
+ * @property {String} mimeType
+ * @property {UploadClientError} uploadError
+ * @property {String} validationErrorMsg
+ * @property {String} ctxName
+ * @property {String} cdnUrl
+ * @property {String} cdnUrlModifiers
+ * @property {import('../blocks/CloudImageEditor/src/types.js').Transformations} editorTransformations
+ * @property {UploadcareFile} fileInfo
+ * @property {Boolean} isUploading
+ */
+
+/** @type {{ [key in keyof UploadEntry]: { type; value; nullable?: Boolean } }} */
 export const uploadEntrySchema = Object.freeze({
   file: {
     type: File,
@@ -52,10 +73,18 @@ export const uploadEntrySchema = Object.freeze({
     type: String,
     value: null,
   },
-  transformationsUrl: {
+  cdnUrl: {
+    type: String,
+    value: null,
+  },
+  cdnUrlModifiers: {
     type: String,
     value: null,
   },
+  editorTransformations: {
+    type: Object,
+    value: null,
+  },
   fileInfo: {
     type: UploadcareFile,
     value: null,

blocks/CloudImageEditor/CloudImageEditor.js

@@ -33,10 +33,14 @@ export class CloudImageEditor extends Block {
     });
   }
 
+  /** @param {CustomEvent<import('./src/types.js').ApplyResult>} e */
   handleApply(e) {
     let result = e.detail;
-    let { transformationsUrl } = result;
-    this.entry.setValue('transformationsUrl', transformationsUrl);
+    this.entry.setMultipleValues({
+      cdnUrl: result.cdnUrl,
+      cdnUrlModifiers: result.cdnUrlModifiers,
+      editorTransformations: result.transformations
+    })
     this.historyBack();
   }
 

blocks/CloudImageEditor/src/lib/cdnUtils.js

@@ -1,3 +1,5 @@
+// TODO: add tests for the all this stuff
+
 export const OPERATIONS_ZEROS = {
   brightness: 0,
   exposure: 0,
@@ -45,11 +47,16 @@ function operationToStr(operation, options) {
 }
 
 /**
+ * TODO: obviously, not using regexps will be faster, consider to get rid of it
+ *
  * @param {String[]} list
  * @returns {String}
  */
 export function joinCdnOperations(...list) {
-  return list.join('/-/').replace(/\/\//g, '/');
+  return list.map(str => {
+    str = str.replace(/^-\//g, ''); // remove leading '-/'
+    return str
+  }).join('/-/').replace(/\/\//g, '/');
 }
 
 const ORDER = [
@@ -81,7 +88,7 @@ export function transformationsToString(transformations) {
         let options = transformations[operation];
         return operationToStr(operation, options);
       })
-      .filter((str) => str && str.length > 0)
+      .filter((str) => !!str)
   );
 }
 
@@ -91,8 +98,11 @@ export function transformationsToString(transformations) {
  * @returns {String}
  */
 export function constructCdnUrl(originalUrl, ...list) {
+  if (originalUrl && originalUrl[originalUrl.length - 1] !== '/') {
+    originalUrl += '/';
+  }
   return (
-    originalUrl.replace(/\/$/g, '') + '/-/' + joinCdnOperations(...list.filter((str) => str && str.length > 0)) + '/'
+    (originalUrl?.replace(/\/$/g, '') || '') + '-/' + joinCdnOperations(...list.filter((str) => !!str).map(str => str.trim())) + '/'
   );
 }
 

blocks/CloudImageEditor/src/state.js

@@ -42,18 +42,25 @@ export function initState(fnCtx) {
       if (!transformations) {
         return;
       }
-      let transformationsUrl = constructCdnUrl(
-        fnCtx.$['*originalUrl'],
-        transformationsToString(transformations),
+      let originalUrl = fnCtx.$['*originalUrl']
+      let cdnUrlModifiers = constructCdnUrl(null, transformationsToString(transformations));
+
+      let cdnUrl = constructCdnUrl(
+        originalUrl,
+        cdnUrlModifiers,
         'preview'
-      );
+      )
+
+      /** @type {import('./types.js').ApplyResult} */
+      let eventData = {
+        originalUrl,
+        cdnUrlModifiers,
+        cdnUrl,
+        transformations,
+      }
       fnCtx.dispatchEvent(
         new CustomEvent('apply', {
-          detail: {
-            originalUrl: fnCtx.$['*originalUrl'],
-            transformationsUrl,
-            transformations,
-          },
+          detail: eventData,
         })
       );
       fnCtx.remove();

blocks/CloudImageEditor/src/types.js

@@ -35,4 +35,12 @@
  * @property {{ dimensions: [number, number]; coords: [number, number] }} [crop]
  */
 
+/**
+ * @typedef {Object} ApplyResult
+ * @property {string} originalUrl
+ * @property {string} cdnUrlModifiers
+ * @property {string} cdnUrl
+ * @property {Transformations} transformations
+ */
+
 export {};

blocks/FileItem/FileItem.js

@@ -116,14 +116,14 @@ export class FileItem extends Block {
         }
       });
 
-      this.entry.subscribe('transformationsUrl', (transformationsUrl) => {
-        if (!transformationsUrl) {
+      this.entry.subscribe('cdnUrl', (cdnUrl) => {
+        if (!cdnUrl) {
           return;
         }
         if (this.entry.getValue('isImage')) {
           this._revokeThumbUrl();
           let size = this.$['*--cfg-thumb-size'] || 76;
-          this.$.thumbUrl = `url(${transformationsUrl}-/scale_crop/${size}x${size}/center/)`;
+          this.$.thumbUrl = `url(${cdnUrl}-/scale_crop/${size}x${size}/center/)`;
         }
       });
 

blocks/UploadDetails/UploadDetails.js

@@ -86,7 +86,7 @@ export class UploadDetails extends Block {
          */
         this._file = file;
         let isImage = this._file.type.includes('image');
-        if (isImage && !entry.getValue('transformationsUrl')) {
+        if (isImage && !entry.getValue('cdnUrl')) {
           this.eCanvas.setImageFile(this._file);
           this.set$({
             checkerboard: true,
@@ -103,19 +103,19 @@ export class UploadDetails extends Block {
       tmpSub('fileName', (name) => {
         this.$.fileName = name;
         this.$.onNameInput = () => {
-          let name = this.ref.file_name_input['value'];
+          let value = this.ref.file_name_input['value'];
           Object.defineProperty(this._file, 'name', {
             writable: true,
-            value: name,
+            value: value,
           });
-          this.entry.setValue('fileName', name);
+          this.entry.setValue('fileName', value);
         };
       });
       tmpSub('fileSize', (size) => {
         this.$.fileSize = Number.isFinite(size) ? this.fileSizeFmt(size) : this.l10n('file-size-unknown');
       });
       tmpSub('uuid', (uuid) => {
-        if (uuid && !this.entry.getValue('transformationsUrl')) {
+        if (uuid && !this.entry.getValue('cdnUrl')) {
           this.eCanvas.clear();
           this.set$({
             imageUrl: `https://ucarecdn.com/${uuid}/`,
@@ -139,7 +139,7 @@ export class UploadDetails extends Block {
           this.showNonImageThumb();
         }
       });
-      tmpSub('transformationsUrl', (url) => {
+      tmpSub('cdnUrl', (url) => {
         if (!url) {
           return;
         }