I have a requirement to allow user to upload their photo when they fill out the form. The website has a CMS site plan, and as I understand, the file upload feature for forms is not available in that plan. Can you please suggest a solution for file upload?
Site - https://pytf-new-merged-and-improved-site.webflow.io/
Here is my site Read-Only: [ Webflow - PYTF NEW MERGED AND IMPROVED SITE ]
Hi there,
The form file upload feature is only available on Business, Ecommerce Plus, or Ecommerce Advanced Site plans. However, there’s a great alternative you can use on your CMS plan: creating a Collection with a file field. This method allows users to upload images up to 4MB in size and supports multiple formats including PNG, JPEG/JPG, GIF, BMP, SVG, and WebP.
To set this up, you can create a Collection, add a file field to it, and then design a submission form that connects to this Collection. This gives you similar functionality while working within your current plan’s capabilities.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Hi Aparna,
What the Webflow bot is describing is a way to store files, not a way to upload them. It’s the form file uploader itself that is restricted to Business plan.
Check here for 2 other solutions;
Uploadcare is a favorite if your upload frequency is low. However they’ve recently reduced the free plan so read their pricing carefully. It would hand the file upload only, and you’d be using Webflow form handling for the submission and notification.
Basin is my preferred solution overall. Low cost but not free. I use it for maximum control over spam, the email notifications, GDPR reply emails, spam inbox visibility, and file uploads as well.
You’ll need a third-party uploader since CMS plan doesn’t support native file uploads. I’ve used Uploadcare for quick setups and Basin for more robust control (spam filtering, GDPR, notifications). Both integrate smoothly with Webflow forms.
Thanks for the reply.
I installed Uploadcare app in the site. But, I have to store the uploaded image to a CMS collection also. How to make that happen?
Hey @gopal_aparna ,
Assuming you installed the Uploadcare app in your Webflow site, you can remove the group-output="true" attribute from the Uc Config element in the Uploadcare component that you might have placed in the form as shown below:
Then you could probably use Make / Zapier to listen to Webflow form submissions and fetch the original file URL by passing the UUID that you get in the file uploaded URL from Webflow’s form submission using this Uploadcare’s API Call.
You can then pass on the image URL to the image field in the Webflow CMS accordingly and it should store the file there. Hope this gives you some idea.
@gopal_aparna AJ has an excellent path described above.
I’m curious about your process here- does the CMS record already exist, and the user is submitting a file that updates a file field, or creates a linked file record, or adds a multi-ref image?
The reason is that I’ve built a code component that you can drop into a form that supports a nice drag-and-drop file-upload UX. In theory instead of pushing that content to Basin or UploadCare, it could push it to a Zapier webhook directly, or to a server-side endpoint that uses Webflow’s API.
There are a lot of considerations here, like security, performance, error handling, UGC content security to avoid uploading malware, etc. Can you describe your use case and what exact processes you’re trying to support?
I was able to implement Uploadcare solution in the site. But before I completed the use case configuration, application owner upgraded the site plan to Business. So I have paused this and moved on to a solution based on Webflow native file upload. I will keep this post updated with the Uploadcare solution that worked for me.
Now the site owner upgraded to a business plan and the webflow native file upload feature is available. The requirement is to load a CMS item image field with the uploaded image file. Is it possible through the custom code that you mentioned? We are using Make (and not Zapier).
I have a Make scenario that watches the webflow form submission event and creates the CMS item. The only challenge now is with the image file.
Using Make, can there be a simple solution to update the image CMS field?
Hey @gopal_aparna ,
I believe you need to pass on a publicly available URL to the image field in the CMS so that Webflow can access and upload the image to the field and not the link which requires a user to login to access as mentioned by Michael here.
Hi Gopal, yes I build user-facing image uploads to the CMS all the time, usually bound to the current Memberstack user for user-generated-content (UGC) ownership and admin.
You’ll want to think through your process carefully- how do you know who uploaded what, how do you prevent unwanted/spam content from being uploaded, how do you attribute data for your marketplace or app functionality.
The basics of the image upload are mechanically straightforward but I have not built this around Webflow’s forms API. Make is a good choice- check to see if you’re getting a publicly accessible image URL in your form data. If not, that’s your first problem to tackle.
Once you have a valid, public image URL, you should be able to submit that through the CMS API.
A few things to watch out for;
FWIW the approach I usually use here is to submit the form directly to a custom API, which then receives the image data and saves it as a file to a Cloudflare R2 bucket. From there, I can make the url public for Webflow and call the Webflow API. You may be able to create the same basic mechanic Webflow HTML → Make → Webflow.
