example: update CDN example

transloadit · Jun 9, 2022 · 22016a9 · 22016a9
1 parent f80f437
commit 22016a9
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 16 deletions.
diff --git a/examples/cdn-example/index.html b/examples/cdn-example/index.html
@@ -2,22 +2,46 @@
 <html lang="en">
   <head>
     <title></title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://releases.transloadit.com/uppy/v3.0.0-beta.1/uppy.min.css" rel="stylesheet">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="https://releases.transloadit.com/uppy/v3.0.0-beta.1/uppy.min.css" rel="stylesheet" />
   </head>
   <body>
+    <noscript>You need JavaScript enabled for this example to work.</noscript>
     <button id="uppyModalOpener">Open Modal</button>
-    <script src="https://releases.transloadit.com/uppy/v3.0.0-beta.1/uppy.min.js"></script>
-    <script>
-      const uppy = new Uppy.Core({debug: true, autoProceed: false})
-        .use(Uppy.Dashboard, { trigger: '#uppyModalOpener' })
-        .use(Uppy.Webcam, {target: Uppy.Dashboard})
-        .use(Uppy.Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
 
-      uppy.on('success', (fileCount) => {
-        console.log(`${fileCount} files uploaded`)
-      })
+    <script type="module">
+      import {
+        Core,
+        Dashboard,
+        Webcam,
+        Tus,
+      } from "https://releases.transloadit.com/uppy/v3.0.0-beta.1/uppy.min.mjs";
+
+      const uppy = new Core.Uppy({ debug: true, autoProceed: false })
+        .use(Dashboard, { trigger: "#uppyModalOpener" })
+        .use(Webcam, { target: Dashboard })
+        .use(Tus, { endpoint: "https://tusd.tusdemo.net/files/" });
+
+      uppy.on("success", (fileCount) => {
+        console.log(`${fileCount} files uploaded`);
+      });
+    </script>
+
+    <!-- To support older browsers, you can use the legacy bundle which adds a global `Uppy` object.  -->
+    <script nomodule src="https://releases.transloadit.com/uppy/v3.0.0-beta.1/uppy.legacy.min.js"></script>
+    <script nomodule>
+      {
+        const { Core, Dashboard, Webcam, Tus } = Uppy;
+        const uppy = new Uppy.Core({ debug: true, autoProceed: false })
+          .use(Uppy.Dashboard, { trigger: "#uppyModalOpener" })
+          .use(Uppy.Webcam, { target: Uppy.Dashboard })
+          .use(Uppy.Tus, { endpoint: "https://tusd.tusdemo.net/files/" });
+
+        uppy.on("success", function (fileCount) {
+          console.log(`${fileCount} files uploaded`);
+        });
+      }
     </script>
   </body>
 </html>
diff --git a/examples/cdn-example/package.json b/examples/cdn-example/package.json
@@ -1,5 +1,8 @@
 {
-  "name": "@uppy-example/cdn-example",
+  "name": "@uppy-example/cdn",
   "version": "0.0.0",
-  "private": true
+  "private": true,
+  "scripts": {
+    "dev": "deno run --allow-net --allow-read https://deno.land/std/http/file_server.ts"
+  }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -9749,9 +9749,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@uppy-example/cdn-example@workspace:examples/cdn-example":
+"@uppy-example/cdn@workspace:examples/cdn-example":
   version: 0.0.0-use.local
-  resolution: "@uppy-example/cdn-example@workspace:examples/cdn-example"
+  resolution: "@uppy-example/cdn@workspace:examples/cdn-example"
   languageName: unknown
   linkType: soft