Streaming live at 10am (PST)

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
https://www.figma.com/file/46btx1ei1y8WKtyhFd9MtH/Uploadcare-Question

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: