Serverless File Uploads for Webflow

10 Minutes to Integrate

Webflow allows building production-ready, responsive websites without any coding skills required. Webflow lets you accomplish most aspects of web development and website distribution via a visual editor providing pixel-to-pixel precision.

With a little help from Uploadcare, you can enable any Webflow site with serverless file uploads and allow its users to upload any media using a simple button.

Before we begin

Before proceeding with the integration, let’s make sure everything is in place:

  1. Webflow account.
  2. Uploadcare account.
  3. Uploadcare free API keys.

Once you create an Uploadcare account, navigate to your dashboard to create a new project or discover API keys for an existing one. You will need a public key: it defines a target project user uploads will go to.

If you plan uploading non-image content, add billing info to your account.

Step 1. Add scripts with Uploadcare File Uploader

Open your Webflow dashboard and hit “site settings.”

Copy the following code snippet.

<script src="" data-integration="Webflow"></script>

Go to the custom scripts tab, paste the script there, set your public key and hit “Save”.

If you want to customize the look of your file uploader, you can add custom CSS here as well.

Step 2. Add an input field to your Webflow site

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

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

Step 3. Bind Uploadcare File Uploader to a form input

Add a custom attribute to a new or existing text input which outputs as role="uploadcare-uploader" to allow the file uploader to work in your form.

Hide that input by giving it a specific class, “hide,” for instance. Then, set it to display none in the Webflow editor.


That’s it! Feel free to ask any questions around the Webflow Forum.