uploadcare · nd0ut · Nov 5, 2025 · Nov 5, 2025 · Nov 5, 2025 · Dec 4, 2025
diff --git a/biome.json b/biome.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.2.5/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
   "vcs": {
     "enabled": true,
     "clientKind": "git",
@@ -26,6 +26,10 @@
       },
       "style": {
         "noInferrableTypes": "error"
+      },
+      "correctness": {
+        "noUnusedVariables": "error",
+        "noUnusedImports": "error"
       }
     }
   },
@@ -38,8 +42,8 @@
     "enabled": true,
     "actions": {
       "source": {
-        "organizeImports": "on",
-        "recommended": true
+        "recommended": true,
+        "organizeImports": "on"
       }
     }
   },
@@ -55,5 +59,11 @@
         }
       }
     }
-  ]
+  ],
+  "html": {
+    "experimentalFullSupportEnabled": true,
+    "formatter": {
+      "enabled": true
+    }
+  }
 }
diff --git a/demo/bundles/cloud-image-editor.html b/demo/bundles/cloud-image-editor.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Cloud Image Editor - Bundle Demo</title>
+    <link rel="stylesheet" href="../../web/uc-cloud-image-editor.min.css">
+    <style>
+    .uc-cloud-image-editor {
+      width: 100vw;
+      height: 100vh;
+    }
+    body {
+      height: 100vh;
+      margin: 0;
+    }
+    </style>
+    <script type="module">
+    import * as UC from '../../web/uc-cloud-image-editor.min.js';
+
+    UC.defineComponents(UC);
+    </script>
+  </head>
+  <body>
+    <uc-config ctx-name="my-editor" pubkey="demopublickey" debug quality-insights="false" test-mode cdn-cname="https://ucarecdn.com/"></uc-config>
+    <uc-cloud-image-editor
+      uuid="f4dc9ebc-ed6d-4b4d-83d1-863bf1e4bb7f"
+      ctx-name="my-editor"
+      tabs="tuning,filters,crop"
+      crop-preset="1:1, 16:9, 4:3, 4:3, 3:4, 9:16"
+      class="uc-light"
+    ></uc-cloud-image-editor>
+  </body>
+</html>
diff --git a/demo/bundles/iife.html b/demo/bundles/iife.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>File Uploader - IIFE Bundle Demo</title>
+    <link rel="stylesheet" href="../../web/uc-basic.min.css">
+    <style>
+    @media (prefers-color-scheme: dark) {
+      body {
+        background-color: #121213;
+      }
+    }
+    </style>
+    <!-- IIFE bundle - no module required, UC is available globally -->
+    <script src="../../web/file-uploader.iife.min.js"></script>
+    <script>
+    // UC is available as a global variable
+    UC.defineComponents(UC);
+    </script>
+  </head>
+  <body>
+    <uc-file-uploader-regular ctx-name="my-uploader"></uc-file-uploader-regular>
+    <uc-config ctx-name="my-uploader" pubkey="demopublickey" debug quality-insights="false" test-mode></uc-config>
+    <uc-upload-ctx-provider ctx-name="my-uploader"></uc-upload-ctx-provider>
+  </body>
+</html>
diff --git a/demo/bundles/img.html b/demo/bundles/img.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Adaptive Image - Bundle Demo</title>
+    <style>
+    uc-img {
+      --uc-img-pubkey: "demopublickey";
+      --uc-img-breakpoints: "200, 500, 800";
+      display: contents;
+    }
+
+    uc-img > img {
+      transition: 1s;
+    }
+
+    uc-img > img[unresolved] {
+      transform: scale(0.8);
+      opacity: 0;
+      transition: 1s;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      body {
+        background-color: #121213;
+      }
+    }
+    </style>
+    <script type="module">
+    import '../../web/uc-img.min.js';
+    </script>
+  </head>
+  <body>
+    <uc-img uuid="7124ae98-344c-42b2-ae2a-bd9aa79d76d8" width="500px"></uc-img>
+  </body>
+</html>
diff --git a/demo/bundles/inline.html b/demo/bundles/inline.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>File Uploader Inline - Bundle Demo</title>
+    <link rel="stylesheet" href="../../web/uc-file-uploader-inline.min.css">
+    <style>
+    @media (prefers-color-scheme: dark) {
+      body {
+        background-color: #121213;
+      }
+    }
+    </style>
+    <script type="module">
+    import * as UC from '../../web/uc-file-uploader-inline.min.js';
+
+    UC.defineComponents(UC);
+    </script>
+  </head>
+  <body>
+    <uc-file-uploader-inline ctx-name="my-uploader"></uc-file-uploader-inline>
+    <uc-config
+      ctx-name="my-uploader"
+      pubkey="demopublickey"
+      crop-preset="1:1"
+      cloud-image-editor-tabs="crop"
+      debug
+      quality-insights="false"
+      test-mode
+    ></uc-config>
+  </body>
+</html>
diff --git a/demo/bundles/minimal.html b/demo/bundles/minimal.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>File Uploader Minimal - Bundle Demo</title>
+    <link rel="stylesheet" href="../../web/uc-file-uploader-minimal.min.css">
+    <style>
+    @media (prefers-color-scheme: dark) {
+      body {
+        background-color: #121213;
+      }
+    }
+    </style>
+    <script type="module">
+    import * as UC from '../../web/uc-file-uploader-minimal.min.js';
+
+    UC.defineComponents(UC);
+    </script>
+  </head>
+  <body>
+    <uc-file-uploader-minimal ctx-name="my-uploader"></uc-file-uploader-minimal>
+    <uc-config ctx-name="my-uploader" pubkey="demopublickey" img-only group-output debug quality-insights="false" test-mode></uc-config>
+  </body>
+</html>
diff --git a/demo/bundles/regular.html b/demo/bundles/regular.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>File Uploader Regular - Bundle Demo</title>
+    <link rel="stylesheet" href="../../web/uc-file-uploader-regular.min.css">
+    <style>
+    @media (prefers-color-scheme: dark) {
+      body {
+        background-color: #121213;
+      }
+    }
+    </style>
+    <script type="module">
+    import * as UC from '../../web/uc-file-uploader-regular.min.js';
+
+    UC.defineComponents(UC);
+    </script>
+  </head>
+  <body>
+    <uc-file-uploader-regular ctx-name="my-uploader"></uc-file-uploader-regular>
+    <uc-config ctx-name="my-uploader" pubkey="demopublickey" debug quality-insights="false" test-mode></uc-config>
+    <uc-upload-ctx-provider ctx-name="my-uploader"></uc-upload-ctx-provider>
+  </body>
+</html>
diff --git a/demo/cloud-image-editor.html b/demo/cloud-image-editor.html
diff --git a/demo/custom-icons.html b/demo/custom-icons.html
diff --git a/demo/external-sources/preview-proxy/secure-delivery-proxy-url-resolver.html b/demo/external-sources/preview-proxy/secure-delivery-proxy-url-resolver.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script type="module">
+  import '@/solutions/file-uploader/regular/index.css';
+  import * as UC from '@/index.js';
+
+  UC.defineComponents(UC);
+
+  const config = document.querySelector('uc-config');
+  config.secureDeliveryProxyUrlResolver = (previewUrl) => {
+    return `http://localhost:3000/preview?url=${encodeURIComponent(previewUrl)}`;
+  };
+  </script>
+</head>
+
+<uc-file-uploader-regular ctx-name="my-uploader"></uc-file-uploader-regular>
+<uc-config ctx-name="my-uploader" pubkey="demopublickey" debug quality-insights="false" test-mode></uc-config>
+<uc-upload-ctx-provider ctx-name="my-uploader"></uc-upload-ctx-provider>
diff --git a/...y/secure-delivery-proxy-url-template.html → ...y/secure-delivery-proxy-url-template.html b/...y/secure-delivery-proxy-url-template.html → ...y/secure-delivery-proxy-url-template.html
@@ -1,12 +1,11 @@
 <!doctype html>
-
 <head>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <script type="module">
-    import '@/solutions/file-uploader/regular/index.css';
-    import * as UC from '@/index.js';
+  import '@/solutions/file-uploader/regular/index.css';
+  import * as UC from '@/index.js';
 
-    UC.defineComponents(UC);
+  UC.defineComponents(UC);
   </script>
 </head>
 
@@ -15,5 +14,8 @@
   ctx-name="my-uploader"
   pubkey="demopublickey"
   secure-delivery-proxy="http://localhost:3000/preview?url={{previewUrl}}"
+  debug
+  quality-insights="false"
+  test-mode
 ></uc-config>
 <uc-upload-ctx-provider ctx-name="my-uploader"></uc-upload-ctx-provider>
diff --git a/demo/preview-proxy/secure-delivery-proxy.js → ...es/preview-proxy/secure-delivery-proxy.js b/demo/preview-proxy/secure-delivery-proxy.js → ...es/preview-proxy/secure-delivery-proxy.js
diff --git a/demo/external-sources/secure-uploads.html b/demo/external-sources/secure-uploads.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script type="module">
+  import '@/solutions/file-uploader/regular/index.css';
+  import * as UC from '@/index.js';
+
+  UC.defineComponents(UC);
+
+  const msToUnixTimestamp = (ms) => Math.floor(ms / 1000).toString();
+
+  const getSecureExpire = (options) => {
+    if ('expire' in options) {
+      return msToUnixTimestamp(new Date(options.expire).getTime());
+    }
+
+    return msToUnixTimestamp(Date.now() + options.lifetime);
+  };
+
+  export const generateSecureSignature = async (secret, options) => {
+    const encoder = new TextEncoder();
+    const data = encoder.encode(getSecureExpire(options));
+    const key = await window.crypto.subtle.importKey(
+      'raw',
+      encoder.encode(secret),
+      { name: 'HMAC', hash: { name: 'SHA-256' } },
+      false,
+      ['sign'],
+    );
+    const signature = await window.crypto.subtle.sign('HMAC', key, data);
+    const secureSignature = Array.from(new Uint8Array(signature))
+      .map((byte) => byte.toString(16).padStart(2, '0'))
+      .join('');
+    return { secureSignature, secureExpire: getSecureExpire(options) };
+  };
+
+  const config = document.querySelector('uc-config');
+  config.secureUploadsSignatureResolver = async () => {
+    const token = await generateSecureSignature('', { lifetime: 60 * 1000 });
+    console.log('Generating secure signature...', token);
+    return token;
+  };
+  </script>
+</head>
+
+<uc-file-uploader-regular ctx-name="my-uploader"></uc-file-uploader-regular>
+<uc-config ctx-name="my-uploader" pubkey="" debug quality-insights="false" test-mode></uc-config>
+<uc-upload-ctx-provider ctx-name="my-uploader"></uc-upload-ctx-provider>