Send a list of images via API Connector

J805 · 2024-07-09T17:02:13.321Z

I will see if I can find an API that I can send an image to so I can give you an example. I just need to find a simple API that I can do that with.

tylerboodman · 2024-07-09T17:03:15.213Z

Form-data is different than a regular API call, it’s formatted with boundaries for each field and binary data for files

J805 · 2024-07-09T17:04:36.144Z

Thanks @tylerboodman for the clarification.

J805 · 2024-07-09T17:12:42.279Z

Ok, here is an example where I am sending a list of files as an attachment to an email with Postmark. Does this help?

Screenshot 2024-07-09 at 10.11.56 AM1770×1166 213 KB

galliotmalo0 · 2024-07-10T07:45:38.559Z

I tried something along those lines, seems like it is a dead end… The API is expecting multipart/form-data and not JSON

the error when initializing

image1646×692 40.3 KB

the configuration

image1834×1700 180 KB

J805 · 2024-07-10T13:16:30.101Z

Hmm

You tried with an actual file in there too? Instead of it being empty?

In the documentation, what are the drop down options where it says ‘ multipart/form-data’?

galliotmalo0 · 2024-07-10T13:19:04.320Z

I have not, but I don’t know how to pass a file. When using form-data as a body type, you can check the “file” option, and select a file. Here there is no way to do so.

Maybe there is a way to pass a file anyway, if so does anyone know how to ?

J805 · 2024-07-10T13:20:20.433Z

You could try a file that is base 64 encoded. Try a simple one at first if possible, a very small file.

J805 · 2024-07-10T13:20:44.504Z

Also, in the documentation, what are the drop down options where it says ‘ multipart/form-data’?

galliotmalo0 · 2024-07-10T13:21:33.133Z

There is only that one option

galliotmalo0 · 2024-07-10T13:35:45.366Z

I just tried with an actual file encoded, didn’t work either
I got the same error :

image1646×652 38 KB

Jici · 2024-07-10T14:31:34.910Z

You could try to set body type to “raw” and try to create your own payload to send it as multipart form (with correct Content-type header). But this is a lot more complex todo (and to debug)

galliotmalo0 · 2024-07-11T15:13:17.822Z

@Jici I am exploring this option as we speak !

If you have done this in the past already, do you have an example of how you configured a bubble API Connector call ? I don’t know what the raw body should look like for this.

Thanks a lot !

Jici · 2024-07-11T15:31:07.476Z

I’ve done something similar to use with gmail. However, this is a little bit different and this is complex to do.
You may also need another plugin to first get the list of file. Best is if the API accept base64 data.
You will need to send the payload like

--boundary
Content-Type:image/jpeg
Content-Disposition: form-data; filename="frog.jpg"
Content-Transfer-Encoding: base64

base64 data here

--boundary
Content-Type:image/jpeg
Content-Disposition: form-data; filename="frog2.jpg"
Content-Transfer-Encoding: base64

base64 data here
--boundary--

Header: Content-Type: multipart/form-data; boundary=“boundary”

galliotmalo0 · 2024-07-11T15:42:38.900Z

So i tried this using the Bubble API instead to test this on a common app, I managed to make it work on Postman directly using your method, but I get a 404 error when using the API connector.

The example is just a test Datatype which has a field text-value.

Do you see an error in what I made ? Or do you have an idea as to what could be going wrong in the behind the scenes ?

Content-Type : multipart/form-data; boundary=xxxxxx

image1830×1198 128 KB

Jici · 2024-07-11T16:05:33.537Z

Can you create a requestbin.com (public if possible) and send the request from Postman first and after, from Bubble? We could compare both after. You can share the requestbin detect url in PM)