Multiple Uploaders in one form

Learn how to integrate several Uploadcare uploaders within the same Webflow form and get uuid and cdn urls for each.

Example: Multiple Uploaders

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Snippets

Install from CDN

Have this code places in your <head> tag.

1<script type="module">
2  import * as LR from "https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.25.0/web/lr-file-uploader-regular.min.js";
3
4  LR.registerBlocks(LR);
5</script>

Config Code

Have this code places in your <head> tag for each uploader you have on a page.

1<lr-config
2	ctx-name="uploader-1"
3	pubkey="your_public_key"
4	max-local-file-size-bytes="10000000"
5	multiple="false"
6	img-only="true"
7></lr-config>
8          
9<lr-config
10	ctx-name="uploader-2"
11	pubkey="your_public_key"
12	max-local-file-size-bytes="10000000"
13	multiple="false"
14	img-only="true"
15></lr-config>

Uploader Code

Have this code within your form, where the uploader will actually be displayed.

1<lr-file-uploader-minimal
2	css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.25.0/web/lr-file-uploader-regular.min.css"
3    ctx-name="uploader-1"
4    class="my-config"
5></lr-file-uploader-minimal>

Data Output Code

Have this code after your uploaders: e.g. in the end of the form or <body> tag.

1<script>
2	window.addEventListener('LR_UPLOAD_FINISH', (e) => {
3  	console.log(e.detail);
4    if (e.detail.ctx === 'uploader-1') {
5    	document.getElementById("uuid-field-1").value = e.detail.data[0].uuid;
6      document.getElementById("url-field-1").value = e.detail.data[0].cdnUrl;
7    } else if (e.detail.ctx === 'uploader-2') {
8    	document.getElementById("uuid-field-2").value = e.detail.data[0].uuid;
9      document.getElementById("url-field-2").value = e.detail.data[0].cdnUrl;
10    };
11	});
12</script>