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 proceeding with the integration, let’s make sure everything is in place:
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.
Open your Webflow dashboard and hit “site settings.”
Copy the following code snippet.
<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>
Go to the custom scripts tab, paste the script there, set your public key and hit “Save”.
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.
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.