File Uploader Integration for Webflow Forms

Webflow is a no-code website builder that lets you accomplish most aspects of web development and website distribution via a visual editor. It has a built-in uploader block that you can use on your pages. However, it has some limitations, such as uploading large files, uploading from multiple sources, and editing uploaded images.

Fortunately, you can embed an advanced File Uploader into your Webflow website. Using it is as easy as using the default Webflow File Upload element, but with almost no limits. With Uploadcare, you can upload files up to 5 TB and use more input sources, including Facebook, Instagram, Dropbox, etc. In this guide, we’ll provide step-by-step instructions on how to integrate it into your Webflow project.

Prerequisites

Here’s what you’ll need to follow the tutorial:

  1. A paid Webflow account—some vital functions we will need are available only on paid plans.
  2. An Uploadcare account (with API keys).

Step 1. Obtaining a Public API Key

An API key is a unique set of symbols identifying your Uploadcare project when calling it from third-party services like Webflow. We’re going to use our Public API Key to let Webflow Form know which project to push files to.

Getting a Public API Key is easy. You can copy it from:

  • The top right corner of your project’s Dashboard
  • The API keys tab on the left
Webflow file uploader integration

Now that we have all the necessary info, let’s continue to the integration itself.

Step 2. Add scripts with Uploadcare File Uploader

When logged in, open your Webflow Dashboard, then go to the Settings (three horizontal dots).

Webflow file uploader integration

In the website settings, go to the Custom Code tab and paste the following script:

<script>UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';</script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" data-integration="Webflow"></script>

Replace “YOUR_PUBLIC_KEY” with your Public API Key from Uploadcare.

Webflow file uploader integration

Note: As of December 2020, Webflow only allows using Custom Code on paid plans. See Webflow Pricing to review the available options.

If you want to change the way the file upload form will look, you can customize it and use custom CSS as well.

Step 3. Add a Webflow Form to your page

Open your website in the Webflow Designer and add a form block to the page where you want to add the upload button. To do this:

  1. Click on Add Elements (+ sign).
  2. Unfold the Forms dropdown.
  3. Drag Form block onto the page.
Webflow file uploader integration

If you already have a form, open it in the Designer and proceed to the next step.

Even if you want your visitor to upload a picture using a single button, we still need to add a form in Webflow because an input field (which we’re going to use in the next step) can only exist inside a form.

Step 4. Bind Uploadcare File Uploader to a Webflow form input

First, we need to add a text field to the form. Again, use the Add Elements button, but this time select Input instead of Form Block. Just like in the screenshot below:

Webflow file uploader integration

Once the field has been added, it should remain selected. Like in the screenshot below, click on the gear icon in the element settings and then add role="uploadcare-uploader" as a custom attribute.

Webflow file uploader integration

Then, go to the Style settings (the paintbrush icon on the top right) and hide the input field.

Webflow file uploader integration

Step 5. Publish the page

To see the results, we need to publish the page. Click Publish and select the options you need. In this tutorial, we will be deploying to the default domain provided by Webflow.

Webflow file uploader integration

Navigate to the page (a link icon will appear next to the domain). Let’s see the results:

Webflow file uploader integration

Clicking this button opens the widget.

Webflow file uploader integration

Forms are often used to upload pictures and documents. Let’s select one.

Webflow file uploader integration

Conclusion

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