(validators): added demo html validators

uploadcare · Jun 7, 2024 · 13023dc · 13023dc
1 parent e4c3d22
commit 13023dc
Showing 1 changed file with 46 additions and 0 deletions.
diff --git a/demo/validators.html b/demo/validators.html
@@ -0,0 +1,46 @@
+<!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"
+      }
+    }
+  </script>
+	<script type="module">
+		import * as LR from './index.js';
+
+		LR.registerBlocks(LR);
+	</script>
+</head>
+
+<lr-file-uploader-regular ctx-name="my-uploader"></lr-file-uploader-regular>
+<lr-config multipleMax="2" ctx-name="my-uploader" pubkey="demopublickey"></lr-config>
+<lr-upload-ctx-provider ctx-name="my-uploader"></lr-upload-ctx-provider>
+
+<script type="module">
+	const config = document.querySelector("lr-config")
+
+	const imagesOnly = (fileInfo, block) => {
+		if (!fileInfo.isImage) {
+			return {
+				message: "This isn't image",
+				payload: {
+					entry: fileInfo
+				}
+			}
+		}
+	}
+
+	config.fileValidators = [imagesOnly]
+
+	config.collectionValidators = []
+</script>