Skip to content

Instantly share code, notes, and snippets.

@optlsnd

optlsnd/index.html

Created February 6, 2024 11:09
Show Gist options
  • Save optlsnd/58400bd8b7c6af443d2ef251bc14aa30 to your computer and use it in GitHub Desktop.
Save optlsnd/58400bd8b7c6af443d2ef251bc14aa30 to your computer and use it in GitHub Desktop.
Download ZIP
Handling uploads from multiple uploader instances
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<lr-config ctx-name="uploader-1" pubkey="demopublickey"></lr-config>
<lr-file-uploader-regular
ctx-name="uploader-1"
css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.32.0/web/lr-file-uploader-regular.min.css"
></lr-file-uploader-regular>
<lr-upload-ctx-provider ctx-name="uploader-1"></lr-upload-ctx-provider>
</div>
<div>
<lr-config ctx-name="uploader-2" pubkey="demopublickey"></lr-config>
<lr-file-uploader-regular
ctx-name="uploader-2"
css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.32.0/web/lr-file-uploader-regular.min.css"
></lr-file-uploader-regular>
<lr-upload-ctx-provider ctx-name="uploader-2"></lr-upload-ctx-provider>
</div>
<script type="module">
import * as LR from "https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.32.0/web/blocks.min.js";
LR.registerBlocks(LR);
const ctxProviders = document.querySelectorAll("lr-upload-ctx-provider");
ctxProviders.forEach((ctx) => {
ctx.addEventListener("file-upload-success", (e) => {
console.log("File upload from ", e.target.__cachedCtxName);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment