Uploading Files with Uploadcare

Uploadcare provides a specialized service for handling file uploads, and it integrates well with Webflow forms.

Key features;

• Supports multiple file uploads
• Has a generous free plan
• The "group" URL for the file set will be added to the email
  • You can also configure it to send individual file URLs

Adding Uploadcare to a Form

1. Create an account on the Uploadcare site.
2. Add this block of code in an Embed inside of your form element.
3. Make certain to replace YOUR_PUBLIC_ KEY with your own key from your account.

Code;

<lr-config
  ctx-name="uploader"
  pubkey="YOUR_PUBLIC_KEY"
  group-output
></lr-config>
<lr-file-uploader-regular
  css-src="https://cdn.jsdelivr.net/npm/@uploadcare/[email protected]/web/lr-file-uploader-regular.min.css"
  ctx-name="uploader"
>
  <lr-form-input ctx-name="uploader"></lr-form-input>
</lr-file-uploader-regular>
<script type="module">
  import * as LR from "https://cdn.jsdelivr.net/npm/@uploadcare/[email protected]/web/lr-file-uploader-regular.min.js";
  LR.registerBlocks(LR);
</script>

Email Notifications

The uploader will add a hidden input element that will be populated with a CDN URL of a group of uploaded files. Once the form is submitted, the URL will be attached to the form data and sent to your form handler along with other fields. If you want to send each file URL as a separate field, just remove the group-output attribute from lr-config.

Files as Email Attachments

This can also be achieved using a 3rd party automation service like Zapier or Make.

Here's a template for Zapier: https://zapier.com/apps/email/integrations/webflow/7041/send-emails-for-new-webflow-form-submissions.

Notes

Pricing

Uploadcare has a generous free plan, however it has a steep first step in its pricing model once you leave the free plan. Make certain to budget accordingly.

https://uploadcare.com/docs/integrations/webflow/

‍

‍