How to Connect Uploadcare to Webflow?

Uploadcare is a no-code tool that allows you to upload, process, and transfer any type of file between multiple web applications. It serves as a complete infrastructure that enables you to manage the files of your Webflow site. Among its main features, Uploadcare will allow your Webflow site to:

• Upload files: Uploadcare connects to 12 external sources such as Instagram, Google Drive, Dropbox, your computer files, and more. The tool allows you to upload files up to 5 TB in size.
• Manage data: The tool has an API that allows you to set up workflows ranging from simple to complex: API, storage space, webhooks, etc.
• Process files: File processing is quite advanced, especially for images and videos: document conversion, video processing, object recognition, enabling responsiveness on images, etc.
• Create data streams: Data streams are secured, encrypted, and delivered optimally. For example, using a responsive system to deliver images.

Customizable and secure, Uploadcare is therefore an efficient way to replace Webflow's native upload functionality, which is more limited and accessible only from the Business plan: unsuitable for large volumes.

Here are the steps to create a free upload system for your Webflow site with Uploadcare.

Prerequisites

To follow this tutorial, you will need the following:

1. A paid Webflow account, as several features we’ll use are only available from a paid version.
2. A free Uploadcare account

Step 1: Create an Uploadcare API Key

The Uploadcare API key is an identification method that allows you to connect your account's API to other applications. The API will help us identify your Uploadcare project from Webflow. We will inform your Webflow form about which Uploadcare project the uploaded file should be sent to.

To obtain your Public API Key, simply access it from the API keys tab in your Uploadcare space.

Step 2: Add Uploadcare Code to Webflow

Log into your Webflow account and go to your project settings. Navigate to the "Custom Code" tab and copy the code below. Integrate the custom code into the "Head Code".

In the script, replace 'YOUR_PUBLIC_KEY' with your public API key from step 1 like this: 'xxxxxxxxxxxxxx'

Step 3: Customize Uploadcare Appearance in Webflow

Uploadcare provides various embed codes that allow you to customize the appearance of your upload tool:

• Customize the upload button
• Customize the file loading animation
• Add a progress bar
• Add file previews
• Add drag & drop capability
• etc.

To customize the appearance of Uploadcare in Webflow, you will need to:

1. Retrieve the personalized custom code
2. Use a custom CSS in Webflow

Step 4: Create a Web Form in Webflow

In the designer mode, you will need to add a Webflow form to your page. We will then integrate the Uploadcare upload link into this form. It is not necessary to add a new Form Block if your page already has a form.

1. Click the "+" icon at the top left, "Add Elements"
2. Go to the Forms tab
3. Drag and drop the "Form Block" element onto your page.

Step 5: Integrate Uploadcare into Your Webflow Form

To connect Uploadcare to Webflow, you will need to follow several steps:

1. Add a text field to your form: Add Elements > Forms > Input.
2. In the field settings, go to "Custom Attributes"‍
3. Click the + icon to add a new custom attribute:

‍‍Name: role
Value: uploadcare-uploader

4. You will then need to hide the text field by going to the style settings (brush icon) > section "Layout" > click on the "eye" icon to hide the field.

Step 6: Publish Your Site

Your Uploadcare upload system is connected to your Webflow site. Be sure to publish your site to activate it.