chore: add upload api demo example

uploadcare · Aug 15, 2024 · 96df78d · 96df78d
1 parent 3f5b127
commit 96df78d
Showing 1 changed file with 63 additions and 0 deletions.
diff --git a/demo/upload-api.html b/demo/upload-api.html
@@ -0,0 +1,63 @@
+<!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",
+        "keyux": "./node_modules/keyux/index.js"
+      }
+    }
+  </script>
+  <script src="./index.js" type="module"></script>
+  <script type="module">
+    import * as UC from './index.js';
+
+    UC.defineComponents(UC);
+
+    const config = document.querySelector('uc-');
+    const ctx = document.querySelector('uc-upload-ctx-provider');
+    const api = ctx.getAPI();
+    const radio = document.querySelector('input[name="choice"]');
+
+    const handleRadioChange = (choice) => {
+      switch (choice) {
+        case 'auto-editor-open':
+          ctx.addEventListener('file-upload-success', (e) => {
+            const { internalId } = e.detail;
+            if (api.getCurrentActivity() !== 'cloud-image-edit') {
+              api.setCurrentActivity('cloud-image-edit', { internalId });
+            }
+          });
+          break;
+        default:
+          break;
+      }
+    };
+
+    radio.addEventListener('change', (e) => {
+      handleRadioChange(e.target.value);
+    });
+  </script>
+</head>
+
+<uc-file-uploader-regular ctx-name="my-uploader" class="uc-light"></uc-file-uploader-regular>
+<uc-config ctx-name="my-uploader" pubkey="demopublickey" debug></uc-config>
+<uc-upload-ctx-provider ctx-name="my-uploader"></uc-upload-ctx-provider>
+
+<fieldset>
+  <legend>Please select behaviour:</legend>
+  <div>
+    <input type="radio" id="choice1" name="choice" value="auto-editor-open" />
+    <label for="choice1">Auto editor open</label>
+  </div>
+</fieldset>