Send a list of images via API Connector

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

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

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

Hey @galliotmalo0 :wave:

Hmm, yeah, I see what you are saying here. :thinking:
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. :blush:

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 :confused:

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.

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. :blush:

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

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

I can’t give much more information than that :confused: , 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

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. :man_shrugging:

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

2 Likes

Thanks @tylerboodman for the clarification. :blush:

1 Like

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

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

the configuration

Hmm :thinking:

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’?

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 ?

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

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

There is only that one option

1 Like

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

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)

1 Like

@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 !

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”

1 Like

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