Send a list of images via API Connector

galliotmalo0 · 2024-07-09T14:02:41.619Z

Hi all,

I am trying to integrate a partner’s API, for which I have one POST call that is meant to upload a list of images to one item.

The issue I face is that the API connector doesn’t seem to allow to pass a list of files into one API call. Just one single file.

Here is the documentation for my partner’s API

image2810×1180 124 KB

Here is the setup I have working to send a single photo

image1840×1368 149 KB

If someone has an idea of what to do, that would be super helpful !

J805 · 2024-07-09T15:40:41.942Z

Hey @galliotmalo0

Hmm, yeah, I see what you are saying here.
Maybe try this. Maybe you can try to use Raw or JSON instead of Form-data. Then you can format your JSON any way you want. Let me know if that helps get you going in the right direction.

galliotmalo0 · 2024-07-09T15:45:54.589Z

I have thought about this, but I think that if the API I am integrating doesn’t support this kind of way to share files, this won’t work

Could you give me an example of how I could do that ? I have seen ideas of converting images to Base64 for example, don’t think that will work here.

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