Image upload to zapier to CMS - solved

Howdy guys,

I am quite struggling with the Image upload to zapier to CMS flow. After an image has been uploaded via a webflow form, the URL - for example; https://webflow.com/api/sites/smartcat/formUploads/b2c30ad5-25d6-4712-8bce-b3ecbb787d07.png - get send to zapier and then uploaded to the webflow cms.

Im my webflow project, i use a html embed to display the image from the url. However, on the published site, the image does not get displayed because it does not have authorization to access the file.

Can anyone help me why this is happening and what to do about it ; D
I would greatlyyyyyyy appriciate it

Cheers,

Djaya

Hey @HappyDigital

First, let me understand what youā€™re up to. And I have a few questions.

  1. You have created a Webflow from which has an image upload feature.
  2. In your Webflow CMS page, youā€™re using HTML embed to display the image from URL. And, itā€™s not getting displayed on the published site because of the authorization access to the file.
    Is this correct?

Iā€™m not clear why are you using Zapier? Can you please explain this flow step-by-step?
By CMS, I assume itā€™s Webflow CMS and not other 3rd-party CMS. Am I right?

Hi, Thanks for your repsonse:grin:
I just figured out what the issue was, it was due to the form submission files requiring login.

Thanks anayway:innocent:

@HappyDigital Cheers! Thanks for letting me know. :slight_smile:

Hi Djaya,
I need same function like you. Can you share more about your experience? I try to send image via a form but looks like webflow can accept this way. and can you share the embed code to convert the image link to preview image. Thanks a lot!!
This link is some example I want to realize

Best regards,
Johnny

Any luck figuring this out? Iā€™m experiencing the same thing

Yes, I would really appreciate some clarity on this as well!

  1. I managed to get my Upload Image form to work; image gets saved as an ā€œhttps://webflow.com/....image.jpgā€.

  2. After all the form submissions are in (over 400 images total), I want to then Export the submissions as CSV (which works fine - again, images are in there as ā€œlinksā€).

  3. I then want to Import this CSV into my Webflow CMS, and connect the right fields together (Name=ā€œnameā€, Image=ā€œimage linkā€), but Webflow wonā€™t actually ā€œimportā€ the imageā€¦

  4. Which makes this entire process useless, right? I cannot save and import all the images manually (there are really way too manyā€¦), and plusā€¦ isnā€™t that the point of doing it this way?

Any help in ā€œautomatingā€ this process would be greatly appreciated! The success of the site Iā€™m working on depends on this.

Thanks!

@LynnUX if youā€™re open to using Zapier or Integromat, you can automate the whole process :sunglasses:

Letā€™s say youā€™re using Zapier:

  1. Setup a new Zap triggered by a Webflow form submission
  2. Now Zapier has the image link and whatever else was submitted with the form (ex: name)
  3. Create a new step
  4. In this next step choose the action ā€œcreate a live Webflow itemā€
  5. Take the form submission data, and insert it into your Webflow CMS Collection

Done!

I prefer not to rely on another integration to make this work (especially since I went with Webflow because from what they said, this was possibleā€¦ and Iā€™d hate to have to pay for an additional service in order to do so :upside_down_face:

But I did just try Zapier for the heck of it, and it keeps giving me a "The item could not be sent to Webflow. The app returned ā€œValidationError: Validation Failureā€ error, no matter what I doā€¦ so not really sure whatā€™s happeningā€¦

Most likelyā€¦one of your Webflow CMS items is required and youā€™re not passing it in via Zapier. At least this is what my experience has been.

When you create a CMS collection the ā€œNameā€ & ā€œSlugā€ fields are required. Alsoā€¦make sure youā€™ve selected a value for ā€œarchivedā€ and ā€œdraftā€ as those are both required too :sunglasses:

I currently have

  • Name: (filled out)
  • Slug: (empty) ā† says itā€™s optional
  • Archived: false
  • Draft: false

Itā€™s still giving me an error, but wonā€™t tell me what the error is. Are Archived and Draft supposed to be set to something else? And what am I supposed to enter for Slug? I donā€™t have any optionsā€¦

Itā€™s still giving me an error

:frowning_face:

Are Archived and Draft supposed to be set to something

What you have is fine

And what am I supposed to enter for Slug? I donā€™t have any optionsā€¦

Just do a quick test to see if it runs error free :smile: by adding in any unique test value you want.

AH! That did itā€¦ thank you!! So I got the Zapier integration working error-freeā€¦ except that my images still arenā€™t showing upā€¦

And I guess on a side note: I donā€™t necessarily need Zapier to automatically publish those; in fact, all Iā€™m looking for at the end of the day is a final CSV file that contains ALL the form submissions (including the images the user has uploaded).

Once I get this, I need to modify the CSV manually, remove rows, etcā€¦ but then I need to re-upload that final, edited CSV file into my CMS (with the uploaded image ā€œlinksā€ imported as actual images).

Not sure why Webflow seems to make this so impossibleā€¦

:sunglasses:

I think youā€™d need to walk through this in much more detail with exactly what youā€™re doing.

Iā€™d suggest a Loom video walking through what you want.

If you upload an image in a form, the image getā€™s upload to a remote server and in return you get a link to store in your CMS or goes through Zapier, or whateverā€¦ youā€™re not passing the physical image around.

I donā€™t think that will happen.

Thatā€™s what should be fixed by what was outlined with Zapier :grinning:

@ChrisDrit @LynnUX I just found this topic, and Iā€™m experiencing a similar issue.

The difference is that Iā€™m trying to upload images to Webflow (via Integromat) that have been submitted elsewhere. So I want to pass an externally hosted image URL to webflow.

I think the problem at the moment is that the file URL isnā€™t on the webflow server, and I guess this is causing the issue.

Hi @alastairbudge :wave:

The difference is that Iā€™m trying to upload images to Webflow (via Integromat) that have been submitted elsewhere.

Not sure Iā€™m following you, can you detail this a bit more?

So I want to pass an externally hosted image URL to webflow.

What Iā€™m seeing is that if I pass an externally hosted image to Zapier/Integromat, example:

https://ucarecdn.com/7a4bde49-aae3-4c2a-ae6f-1fb8459ddb88//-/preview/-/scale_crop/100x100/

ā€¦and in turn create/update a image field item in my Webflow CMS (from Zapier/Integromat), Webflow ā€œappearsā€ to fetch that image and host it for me on their CDN and store their url in my image field, example:

https://uploads-ssl.webflow.com/5e8fa45344116a0142bc3be0/5f76d9a62c864cc3879cecde_100x100.jpeg

Is this not what youā€™re seeing?

@ChrisDrit hi, thanks for the quick response!

Sure, hereā€™s what the situation is.

I have an Airtable form that I use (internally) to add content to an Airtable base. This is then uploaded to the Airtable CDN, so I can get the URL for the file.

The rest of my automation works fine (creates a webflow item with name, slug, etc.), but there are two is one field that doesnā€™t work - the upload pdf one.

With a little bit of tinkering (seems like the error was with Integromat, not Webflow), I could get the image to upload, but I canā€™t get a pdf to upload.

Iā€™ve tried with a simple, public pdf file (e.g. http://www.africau.edu/images/default/sample.pdf), but itā€™s the only field that wonā€™t upload to the Webflow CDN. I appreciate your original post was about images, and Iā€™ve now figured that out, but Iā€™m wondering if you also know about how to achieve this with pdfsā€¦thanks.

What is the Webflow CMS field type you are trying to store the PDF in and how big is the file?

Itā€™s a ā€˜fileā€™ type in Webflow, which I use to host pdfs.

Iā€™ve been uploading these pdfs manually to Webflow before, and there shouldnā€™t be an issue with file size. Even this one I just tried (http://www.africau.edu/images/default/sample.pdf) failed, and itā€™s 3kb.

Hmmmmā€¦ :thinking: I donā€™t have an answer for you, sorry.

Iā€™ve found with Integromat that depending upon the type of module you use in your scenario, it may not report errors very clearly or at all.

Iā€™ve found myself using something like cURL (I know people use Postman too) to directly hit the API. Typically youā€™ll get the full picture whatā€™s wrong since you can see the full response from the API call.

If thatā€™s interesting, you can create a new live collection item from the API. They have an example cURL statement. Just swap out your API key, Collection ID, and send it the Airtable CDN url :nerd_face: