example: update CDN example (#3803)

This commit is contained in:
Antoine du Hamel 2022-06-27 15:58:16 +02:00
parent 2f46fd1f0d
commit 4cbca6ec78
No known key found for this signature in database
GPG key ID: 21D900FFDB233756
4 changed files with 54 additions and 16 deletions

View file

@ -0,0 +1,11 @@
# CDN example
To run the example, open the `index.html` file in your browser.
If you want to spawn a local webserver, you can use the following commands
(requires Deno, Python, or PHP):
```sh
corepack yarn install
corepack yarn workspace @uppy-example/cdn dev
```

View file

@ -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 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", function (fileCount) {
console.log(`${fileCount} files uploaded`);
});
}
</script>
</body>
</html>

View file

@ -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 || python3 -m http.server || php -S localhost:8000"
}
}

View file

@ -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