feat: add secureDeliveryProxyUrlResolver option

uploadcare · May 16, 2024 · c7cfcd0 · c7cfcd0
1 parent 226d36f
commit c7cfcd0
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 11 deletions.
diff --git a/abstract/Block.js b/abstract/Block.js
@@ -11,6 +11,7 @@ import { LocaleManager, localeStateKey } from './LocaleManager.js';
 import { l10nProcessor } from './l10nProcessor.js';
 import { sharedConfigKey } from './sharedConfigKey.js';
 import { initialConfig } from '../blocks/Config/initialConfig.js';
+import { extractFilename, extractOperations, extractUuid } from '../utils/cdn-utils.js';
 
 const TAG_PREFIX = 'lr-';
 
@@ -242,15 +243,26 @@ export class Block extends BaseComponent {
    * @returns {String}
    */
   proxyUrl(url) {
-    let previewProxy = this.cfg.secureDeliveryProxy;
-    if (!previewProxy) {
-      return url;
+    if (this.cfg.secureDeliveryProxy && this.cfg.secureDeliveryProxyUrlResolver) {
+      console.warn(
+        'Both secureDeliveryProxy and secureDeliveryProxyUrlResolver are set. Using secureDeliveryProxyUrlResolver.',
+      );
     }
-    return applyTemplateData(
-      previewProxy,
-      { previewUrl: url },
-      { transform: (value) => window.encodeURIComponent(value) },
-    );
+    if (this.cfg.secureDeliveryProxyUrlResolver) {
+      return this.cfg.secureDeliveryProxyUrlResolver(url, {
+        uuid: extractUuid(url),
+        cdnUrlModifiers: extractOperations(url),
+        fileName: extractFilename(url),
+      });
+    }
+    if (this.cfg.secureDeliveryProxy) {
+      return applyTemplateData(
+        this.cfg.secureDeliveryProxy,
+        { previewUrl: url },
+        { transform: (value) => window.encodeURIComponent(value) },
+      );
+    }
+    return url;
   }
 
   /** @returns {import('../types').ConfigType} } */

diff --git a/blocks/Config/Config.js b/blocks/Config/Config.js
@@ -13,9 +13,14 @@ const allConfigKeys = /** @type {(keyof import('../../types').ConfigType)[]} */
 /**
  * Config keys that can't be passed as attribute (because they are object or function)
  *
- * @type {['metadata', 'localeDefinitionOverride', 'secureUploadsSignatureResolver']}
+ * @type {['metadata', 'localeDefinitionOverride', 'secureUploadsSignatureResolver', 'secureDeliveryProxyUrlResolver']}
  */
-export const complexConfigKeys = ['metadata', 'localeDefinitionOverride', 'secureUploadsSignatureResolver'];
+export const complexConfigKeys = [
+  'metadata',
+  'localeDefinitionOverride',
+  'secureUploadsSignatureResolver',
+  'secureDeliveryProxyUrlResolver',
+];
 
 /** @type {(key: keyof import('../../types').ConfigType) => key is keyof import('../../types').ConfigComplexType} */
 const isComplexKey = (key) => complexConfigKeys.includes(key);

diff --git a/blocks/Config/initialConfig.js b/blocks/Config/initialConfig.js
@@ -61,4 +61,5 @@ export const initialConfig = {
   localeName: 'en',
   localeDefinitionOverride: null,
   secureUploadsSignatureResolver: null,
+  secureDeliveryProxyUrlResolver: null,
 };
diff --git a/blocks/Config/normalizeConfigValue.js b/blocks/Config/normalizeConfigValue.js
@@ -136,6 +136,9 @@ const mapping = {
   localeDefinitionOverride: /** @type {typeof asObject<import('../../types').LocaleDefinitionOverride>} */ (asObject),
   secureUploadsSignatureResolver:
     /** @type {typeof asFunction<import('../../types').SecureUploadsSignatureResolver>} */ (asFunction),
+    secureDeliveryProxyUrlResolver:
+    /** @type {typeof asFunction<import('../../types').SecureDeliveryProxyUrlResolver>} */ (asFunction),
+
 };
 
 /**

diff --git a/demo/preview-proxy/secure-delivery-proxy-url-resolver.html b/demo/preview-proxy/secure-delivery-proxy-url-resolver.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<base href="../../" />
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="./solutions/file-uploader/regular/index.css" />
+  <script
+    async=""
+    src="https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=raw,min/dist/es-module-shims.js"
+  ></script>
+  <script type="importmap">
+    {
+      "imports": {
+        "@symbiotejs/symbiote": "./node_modules/@symbiotejs/symbiote/build/symbiote.js",
+        "@uploadcare/upload-client": "./node_modules/@uploadcare/upload-client/dist/esm/index.browser.mjs",
+        "@uploadcare/image-shrink": "./node_modules/@uploadcare/image-shrink/dist/esm/index.browser.mjs"
+      }
+    }
+  </script>
+  <script src="./index.js" type="module"></script>
+  <script type="module">
+    import * as LR from './index.js';
+
+    LR.registerBlocks(LR);
+
+    const config = document.querySelector('lr-config');
+    config.secureDeliveryProxyUrlResolver = (previewUrl) => {
+      return `http://localhost:3000/preview?url=${encodeURIComponent(previewUrl)}`
+    };
+  </script>
+</head>
+
+<lr-file-uploader-regular ctx-name="my-uploader"></lr-file-uploader-regular>
+<lr-config ctx-name="my-uploader" pubkey="demopublickey"></lr-config>
+<lr-upload-ctx-provider ctx-name="my-uploader"></lr-upload-ctx-provider>
diff --git a/demo/preview-proxy/secure-delivery-proxy-url-template.html b/demo/preview-proxy/secure-delivery-proxy-url-template.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<base href="../../" />
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="./solutions/file-uploader/regular/index.css" />
+  <script
+    async=""
+    src="https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=raw,min/dist/es-module-shims.js"
+  ></script>
+  <script type="importmap">
+    {
+      "imports": {
+        "@symbiotejs/symbiote": "./node_modules/@symbiotejs/symbiote/build/symbiote.js",
+        "@uploadcare/upload-client": "./node_modules/@uploadcare/upload-client/dist/esm/index.browser.mjs",
+        "@uploadcare/image-shrink": "./node_modules/@uploadcare/image-shrink/dist/esm/index.browser.mjs"
+      }
+    }
+  </script>
+  <script src="./index.js" type="module"></script>
+  <script type="module">
+    import * as LR from './index.js';
+
+    LR.registerBlocks(LR);
+  </script>
+</head>
+
+<lr-file-uploader-regular ctx-name="my-uploader"></lr-file-uploader-regular>
+<lr-config
+  ctx-name="my-uploader"
+  pubkey="demopublickey"
+  secure-delivery-proxy="http://localhost:3000/preview?url={{previewUrl}}"
+></lr-config>
+<lr-upload-ctx-provider ctx-name="my-uploader"></lr-upload-ctx-provider>
diff --git a/secure-delivery-proxy.js → demo/preview-proxy/secure-delivery-proxy.js b/secure-delivery-proxy.js → demo/preview-proxy/secure-delivery-proxy.js
diff --git a/types/exported.d.ts b/types/exported.d.ts
@@ -8,6 +8,10 @@ export type UploadcareGroup = import('@uploadcare/upload-client').UploadcareGrou
 export type Metadata = import('@uploadcare/upload-client').Metadata;
 export type MetadataCallback = (fileEntry: OutputFileEntry) => Promise<Metadata> | Metadata;
 export type LocaleDefinitionOverride = Record<string, LocaleDefinition>;
+export type SecureDeliveryProxyUrlResolver = (
+  previewUrl: string,
+  { uuid: string, cdnUrlModifiers: string, fileName: string },
+) => string;
 export type SecureUploadsSignatureAndExpire = { secureSignature: string; secureExpire: string };
 export type SecureUploadsSignatureResolver = () => Promise<SecureUploadsSignatureAndExpire | null>;
 
@@ -60,8 +64,9 @@ export type ConfigType = {
   metadata: Metadata | MetadataCallback | null;
   localeDefinitionOverride: LocaleDefinitionOverride | null;
   secureUploadsSignatureResolver: SecureUploadsSignatureResolver | null;
+  secureDeliveryProxyUrlResolver: SecureDeliveryProxyUrlResolver | null;
 };
-export type ConfigComplexType = Pick<ConfigType, typeof complexConfigKeys[number]>;
+export type ConfigComplexType = Pick<ConfigType, (typeof complexConfigKeys)[number]>;
 export type ConfigPlainType = Omit<ConfigType, keyof ConfigComplexType>;
 export type ConfigAttributesType = KebabCaseKeys<ConfigPlainType> & LowerCaseKeys<ConfigPlainType>;