Upload files using form and zapier

Hi am using form to let the customer upload copy of his required documents, to do that i used zapier to connect to my CMS, and it was fine, but the uploaded filed, in my CMS shows only JSON files, I need to see the images uploaded not the json files…


Here is my public share link: LINK
(how to access public share link)

Are you using the Webflow Business account and their built in file upload within the form, or are you using a third party to upload files from within the form?

1 Like

@Nasser_Tabook First of all, Welcome to the Webflow community and congrats on your first post!!

My advice:

I’d go ahead and remove that Zapier integration, upgrade to a Webflow Business Hosting account and use the “File Upload” setting on an input so your client can upload the images directly there.

No reason to do it in a 3rd party round about way, unless maybe you had an extreme amount of user uploaded content to host.

Hi Chris, yes am using the business account and am using the built in upload
And Zapier to link the form data to my SMC

Yes am using the business account

Thank you Scott already I have zapier but I used it to save my data in my CMS

I found the solution. the problem which i was using an image filed in the CMS, where i should use either link field or plain text filed, because zaiper will send a plan text to the CMS not an image

I wonder why this is… and I wonder if there’s a better way about it. Isn’t it easier to manipulate images that were uploaded while you’re building templates within the Designer?

I know this is an older thread, but chiming in as I’ve dealt with something similar. Maybe it can help someone who stumbles across this thread :nerd_face:

My experience with using a 3rd party image uploader on a Webflow form (not the built in image uploader under the Business account tier) is that it all works with Zapier and the CMS while using an “Image” type field in the Collection.

Here’s is a demo site I built awhile back that does just this: https://profile-directory.webflow.io

  1. Signup with a fake email address
  2. Upload a profile picture via the 3rd party service
  3. Then fill out the native Webflow form
  4. Submit the native Webflow form

So what happens, in this specific case, is that when you use a 3rd party service (in this case, I’m using Uploadcare), they handle uploading the image to their servers and then return to you a url of that uploaded image.

I then stuff that returned url (to the uploaded image) into a hidden form field.

Then…when you submit the form (after filling out the profile info) it also submits that hidden field with the url in it.

This all gets triggered in Zapier, which then creates a Webflow CMS entry in my Profiles Collection.

The CMS Collection has an “Image” field type that stores this url:

When I looked closely at this, it “appears” that the image shown within my Collection Item is really just a link to an uploaded image on Webflow.

My assumption is that if you create a live Webflow item from Zapier - and I’m assuming this applies to any API request, from any tool, into Webflow - and…

  1. one of those fields is an Image field
  2. and the data you pass into Zapier for that url is nothing more than plain text

Webflow will assume that’s a plain text url, download the image from that url, upload it to their servers, and put that url (to their servers) in the CMS field.

:sweat_smile:

Not sure if this is how it works with a Webflow Business account and their native image uploader…

2 Likes

Hello! One thing that worked for me is using Cloudinary. https://cloudinary.com/

Their API is super easy to use: using a custom request in Zapier you can optimize the weight and size of the image and send it back to a Webflow collection.

The trigger is a form submission with file input in webflow and the actions are cloudinary API call, and then update live CMS item.

Additionally there’s even a face detection parameter you can use to center the crop on the face. Quite amazing!

2 Likes

This helped out so much! Thank you!!!

1 Like