Send a list of images via API Connector

J805 · 2024-07-09T15:56:50.139Z

Someone can correct me if I’m wrong, but I believe that this is sending the data the same way. It still uses JSON, but it just allows you to format it the way you want to in the API Connector. I rarely use form-data for any of my API Calls. Mostly because of limitations like this.

I can try to give an example but I would need more details. Like the documentation and which API you are using.

galliotmalo0 · 2024-07-09T16:07:47.402Z

The documentation I have for this call is the first screenshot I share

The url looks like this :
POST : api/declarations/{idDeclaration}/photos/

I can’t give much more information than that , or don’t know what information you would need to further help (let me know !)

The understanding I have is that form-data is meant to give a solution to send files in POST requests, which JSON can’t do.

How do you usually send files via POST requests ? Do you do it directly in the JSON body ?

edit : the API is a private one I can’t really share it, wouldn’t add much more information

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)

I’m looking at your settings in API Connector, are you sending the request to Bubble API ?

In this case, you need to follow Bubble API guideline to send a file

galliotmalo0 · 2024-07-11T16:13:22.726Z

I am not sending to bubble API, but i wanted to test the raw body with a simpler example just to see if it worked. Which it doesn’t for now… :')

I tried to create a requestbin.com but the Bubble call doesn’t even reach it, i now get a 400 error.

Again, it works fine on Postman with the same configuration

image1662×646 25.5 KB

Jici · 2024-07-11T16:17:27.674Z

Be sure to use this url in requestbin (and set it in API Connector and postman)

screenshot-public.requestbin.com-2024.07.11-12_15_541920×945 63.5 KB