Send a multi image picker to Webflow via API

Hi, I am trying to send a list of images to Webflow via a Post Request but in webflow nothing is showing. My API post request works just fine with single items. Meaning I can send all other data including a single image but the array of images isn’t working.
My API connection looks like this see image.
and my workflow like this see image. Any help, please

Here how the flow works they are separated by comma


And this is a webflow when recieveng data

My instant thought is how does Webflow want it?

I assume they accept a list because the UI says image plural. So my hunch is work backwards. If you have an array of images in webflow and export it, what does it look like and what could the delimiter be? Maybe try ; ?

I know postman is a great place to test but you also need to know how the receiver wants the payload delivered.

Thank you @dan8 this is what works if i make a post manually via Postman or bubble API Setup

Ok so to pass the array, it needs to be in the format like [ “url1”, “url2”, “url3”]

Try that format in value box.

Thanks, @dan8 but if I put an array in there it either returns an error that the format is wrong or if I put a comma-separated list like url1,url2,url3 it returns the body without the multi image key-value pair.
I am almost in disbelief that this is happening.

Yes it’s not clear for sure. Usually with Bubble there is a way though.

Have you checked this as it seems to be the same issue: Form-Data Array Value Bubble API Connector to Twilio API

What I see is that you need to provide an array of url in json.
So the payload will be:

... "payment-method-logo": [<"list_of_image>"],...

The list of image field will be dynamically fill using
image fields list: formatted as text
In format as text you will use

{"url: "This image's url"}

and you set join with , (comma)

If you are getting image from bubble storage, you may need to add the https part before “this image’s url”


@Jici thans. But when i do that i get an respose error when sending data.

Can you share the full settings in API Connector and maybe send the request to requestbin and inspect the output

Sure here is the json api call setting


All other fields are working fine. Just this list image field isnt. When i add the list in Postman manually like

“payment-method-logo”: [
{
“url”: “https://s3.amazonaws.com/appforest_uf/f1624826994218x407798105709711300/BetPlay%201000x500.png

                       },

{
“url”: “https://s3.amazonaws.com/appforest_uf/f1624826994218x407798105709711300/BetPlay%201000x500.png

                       },

{
“url”: “https://s3.amazonaws.com/appforest_uf/f1624826994218x407798105709711300/BetPlay%201000x500.png

                       },
            
        ],

This works as well. Not sure how requestbin works

You replace the url by the one created by requestbin.com
A good thing is to do the same request from postman in requestbin. Compare both to find differences.

If you initialize call in API Connector with

{
“url”: “https://s3.amazonaws.com/appforest_uf/f1624826994218x407798105709711300/BetPlay%201000x500.png”
                       },
{
“url”: “https://s3.amazonaws.com/appforest_uf/f1624826994218x407798105709711300/BetPlay%201000x500.png”
                       }

inside the payment_method_logo parameters (actually, you have a single url) Does it work?

@Jici this works if i enter them manually.


I mean to enter it in the value field of the parameters and not directly in the body part
Also, run the WF and check in requestbin. It will be easier to find what is the issue with the request


I get an error if i add {“url”:“https://s3.amazonaws.com/appforest_uf/f1624826994218x407798105709711300/BetPlay%201000x500.png"},{“url”:"https://s3.amazonaws.com/appforest_uf/f1624826994218x407798105709711300/BetPlay%201000x500.png”}

In the value field

Send to request bin. I suspect that Bubble probably encode the url

Also, be sure to use url that API can reach

@Jici if i have only one url in the multi image uploader that works fine.