Now streaming live

Image Upload Feature


#1

Any idea when this feature will get added to the API? Have a huge need for this.


#2

Lets all make a guess, the winner wins a Webflow T-Shirt! i would say: 25th of januari


#3

@finidev @Koen

Image upload is so important to the CMS API. Why isn't it implemented yet? Please Webflow, add it to the API. I've got clients that need this feature.


#4

The API Image upload would open up the whole versatility of this application. Couldn't agree more with the crew here. Two thumbs up!


#5

Another vote for images! Assets are tricky, I'm sure there's quite a bit more work to manage than the main Webflow CMS data content. But it sure would be nice!


#6

@sprockethouse I was able to successfully implement an alternative to image upload in API. I used uploadcare in a form tied to a zapier zap that posts an uploaded image to a collection item. Worked perfectly.


#7

Interesting! Thanks for the tip; I'd never heard of uploadcare. But that's the kind of thing I could see myself using a lot! Nice work


#8

I would love to learn more about how you did this. I tried, and can't seem to make it work.


#9

Hey guys after digging into this a little bit I came up with a way to use Firebase as my file hosting for images, etc. And then just as @pixelcactus did insert it back into WF Collections using Zapier. :slight_smile:


#10

Any chance you can give us a little how to? :kissing:


#11

Hi guys.

Seems indeed possible to upload images using Uploadcare

  • Go to your Uploadcare dashboard, create a new project and then install the widget in your WF site

  • Go to Zapier, create a new Zap, select "Uploadcare" app and enter your private and public keys that you can find in your new Uploadcare project

  • Select Webflow as a second app for the Zap and then you should be able to create a cms item using the image uploaded in Uploadcare widget

Hope this makes sense...

Best


#12

Thanks, I was able to create a new item, but I cant seem to figure out how to upload a picture to current cms items. I tried matching the form field names with cms collection fields, but the data doesn't attach with the file. Were you able to attach form field data to the uploaded picture?

Edit - I inquired with uploadcare, and I was told that the widget can't collect and pass the form data. It looks like it is possible with a third party form, but not with webflow form.


#13

Okay I wanted to also add as a modified version of this I have utilized the WF API now as well. By doing so I have successfully created an inventory tracking system. Or the beginning stages of one :slight_smile: Stay tuned for more to come!!!


#14

Hi guys,

I'm trying to upload an image to a CMS item with Uploadcare, and add other data (to the same item) from a Google Sheet. Did anyone manage this? @finidev, @Blaise_Posmyouck and @pixelcactus uploading the image with Zapier works great, but is there a way to add additional text fields from Google Sheets? Or even better, directly from the WF form?

My flow at the moment - collecting data with WF form, sending it to Gsheets with Zapier. Then, sending the sheets data to WF CMS item. Then I have to manually add the image.

I hope there is a better way
Thanks!


#15

Hi @Roey

Sorry Im not on my computer atm, but I guess you will have to create 2 zaps here, one for your text data (with Gsheets) and one for your image (with uploadcare), both targeting the same CMS collection/item


#16

@Blaise_Posmyouck thanks for the speedy reply!

That's what I tried to do. I couldn't find a way to edit an item - only to create a new one. Having two zaps means one creates the CMS item, and the other update it with an image. Did you manage to create such a flow?

Cheers


#17

Hey @Blaise_Posmyouck any idea on how to solve this?

Thanks!


#18

Indeed @Roey, it is not possible to update a WF CMS item with zapier atm.

I didn't create any zap like this yet, but maybe you can try to create a new collection for your uploadcared images, and a reference to this collection in your "Gsheet" collection.
Make a zap that creates an item in your Gsheet collection (with your form data). For the uploadcare image, make another zap that creates an item in the new collection.

You will have to select the reference manually each time you create a new item using this procedure...

Maybe there is a better way to do that, I'd be happy to know :slight_smile:

Hope this helps


#19

@Blaise_Posmyouck thanks! I guess that's the only option at the moment. I hope it'll develop soon, it would be quite useful.


#20

I think I came up with a very decent solution, without Uploadcare, for uploading images from CDNs such as Shopify directly into Webflow.

Add new product on Shopify >>> [isolate image URLs using the =REGEXEXTRACT command directly in Zapier] >>> Google Spreadsheets >>> Webflow text fields in collection >>> Dynamic Embed on template page instead of using images directly.

Read here thoroughly:

I'm using Shopify to set up a store, and Zapier to send the data from Shopify to Google Spreadsheets, and then from Google Spreadsheets to the Webflow CMS. I want to set up a product page, and have the images I uploaded into Shopify to go automatically into Webflow's CMS and be presented in the product page I designed using Webflow. However, as stated before, Webflow doesn't allow images to be uploaded into the CMS from outside the system.

But what Webflow DOES allow is for text and links to be uploaded into the CMS. So I used Zapier to take the data from Shopify, including the IMAGE URLs from Shopify's CDN. These URLs are hidden in Shopify's "VARIANT" column on Zapier. This is isn't exactly easy because you need to have a working knowledge of Google Spreadsheets formulas, especially the =REGEXEXTRACT command in order to isolate the URLs in different columns.

Let's say you want to have 6 product images MAX. Once you managed to isolate your Shopify CDN URLs and set them up in different columns on your Google Spreadsheet, you will need to set 6 text fields in your Collection on Webflow's CMS. Zapier can take each of the URL columns on your Spreadsheet and write them into these text fields. Then, when creating a new product, add 6 total images and save the product. Shopify's CDN will generate a URL for each image, Zapier will take these URL and plant them in your Google Spreadsheet, and from there these URLs will be uploaded to Webflow.

Once this is working you'll need to edit the corresponding template page on Webflow's CMS. This is where the magic happens. Instead of adding dynamic images, use EMBEDS. Add 6 embed widgets to your page, and inside each widget write:

<img src="THIS IS WHERE YOU SET A DYNAMIC FIELD FROM YOUR TEXT FIELDS CONTAINING THE URL" width="100%" height="auto">

And there you have it. Each collection item has it's own image URLs, and they appear on the template page automatically using Zapier.

If anyone needs further explanation let me know.