Free File Upload in Webflow with Uploadcare

Learn how to integrate Uploadcare with Webflow forms and upload files and images for free and with a great UI.

Example

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Snippets

Head Code

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

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>
6            
7            
8<style>
9.my-config {
10  --darkmode: 0;
11  --h-accent: 223;
12  --s-accent: 100%;
13  --l-accent: 61%;
14}
15</style>
16
17<lr-config
18	ctx-name="my-uploader"
19	pubkey="71b9aeda18d43860bc82"
20	max-local-file-size-bytes="10000000"
21	multiple="false"
22	img-only="true"
23	source-list="local, url, camera, dropbox, facebook, gdrive, gphotos, instagram"
24></lr-config>

Uploader Code

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

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

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    document.getElementById("uuid-field").value = e.detail.data[0].uuid;
5    document.getElementById("url-field").value = e.detail.data[0].cdnUrl;
6	});
7</script>