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 several web applications. It is therefore a complete infrastructure that will allow 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, files on your computer, etc. The tool allows you to upload files of up to 5 TB.
• Manage data : the tool has an API that allows you to set up simple or complex workflows: API, storage space, webhooks, etc.
• File processing: file processing is quite advanced, especially for images and videos: document conversion, video processing, object recognition, activating responsive on images, etc.
• Create data streams: data streams are protected, encrypted, and delivered in an optimal way. For example with the use of responsive systems to deliver images. 

Customizable and secure, uploadcare is therefore an effective way to replace Webflow's native upload functionality, which is more limited and accessible from the Business Plan: not suitable for large volumes of data.

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

Prerequisites

To follow this tutorial you will first need :

1. Have a Webflow account account, as many of the features we will be using are only available from a paid version.
2. A Uploadcare account free

Step 1: Create an Uploadcare API key

The Uploadcare API key is a means of identification to connect your account's API to other applications. The API here will allow us to identify your Uploadcare project from Webflow. Here we will inform your Webflow form which Uploadcare project to send the uploaded file to.

To obtain your Public API key, simply access it from the API keys of your Uploadcare space.

Step 2: Add the Uploadcare code to Webflow

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

In the script, replace 'YOUR_PUBLIC_KEY' with your public API key from step 1 as follows: 'xxxxxxxxxxxxxx'.

Step 3: Customize the appearance of Uploadcare in Webflow

Uploadcare provides you with many different embed codes that will allow you to customize the look of your upload tool:

• Customise the download button
• Customise the file upload animation
• Add a progress bar
• Add file previews
• Add a drag & drop facility
• etc.

To customise the appearance of Uploadcare in Webflow you will need to

1. Get the custom code
2. Use a custom Webflow CSS

Step 4: Create a web form in Webflow

From the designer mode you will need to add a webflow form to your page. We will then integrate the Uploadcare download link into this form. There is no need to add a new Form Block element if your page already has a form.

1. Click on the "+" icon"Add Elements" at the top left
2. Go to theForms 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 take several steps:

1. Add a text field to your form: Add Elements > Forms > Input.
2. From the field settings, go to "Custom Attributes".
3. Click on 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) > "Layout" section > click on the "crossed out eye" icon to hide the field.

Step 6: Publish your site

Your Uploadcare download system is connected to your Webflow site. Remember to publish your site to activate it.