A Guide to Integrating File Uploader with Webflow Forms

To integrate File Uploader into your Webflow project, you need a paid Webflow account, as applying custom code is allowed only on paid plans.

Step 1: Add the File Uploader Script to Your Webflow Project

Add the following script to your Webflow project to import the File Uploader and its default styles.

1
<link rel="stylesheet"
2
  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/uc-file-uploader-regular.min.css">
3
<script type="module">
4
  import * as UC from "https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/uc-file-uploader-regular.min.js";
5
  UC.defineComponents(UC);
6
</script>

Step 2: Add the File Uploader Configs to Your Page

To configure the File Uploader, add the following code to the page where you want to use the File Uploader.

1
<uc-config ctx-name="my-uploader" pubkey="YOUR_PUBLIC_KEY" group-output>
2
</uc-config>

configuration page for more details on the available options. The uc-config block is used to configure the File Uploader. Check out the

Replace YOUR_PUBLIC_KEY with your public API key.

Step 3: Add the File Uploader Component to your form

Add the File Uploader block and the form input block to create a file uploader inside your form.

1
<uc-file-uploader-regular ctx-name="my-uploader">
2
  <uc-form-input ctx-name="my-uploader"></uc-form-input>
3
</uc-file-uploader-regular>

The uc-file-uploader-regular block initializes the File Uploader, and the uc-form-input block creates an HTML input to containing the URLs of uploaded files.

Check out the documentation on using the File Uploader with HTML forms for more information.

For a more detailed guide on using the File Uploader with Webflow forms, check out this tutorial from our blog.

Conclusion

That’s it! Let us know if this guide was helpful, and feel free to ask any questions in the Uploadcare Community Area.