Forum Academy Marketplace Showcase Pricing Features

API call to upload a list of images

Hello,

I am trying to setup a Bubble application to post a few images to an image classification API service that processes each of the images and returns a result (object type) for each image. I have tested the API call with the following curl command from the command line and it works :

curl -X POST -F [email protected] -F [email protected] -F [email protected]
https://api.someapi.com/v30/process_image

Each of the images is a local JPG file that is uploaded and the API response returns the name of the file and the corresponding category for each image. The results are returned as a JSON response that looks as follows:

{
“results”: {
“Image1”: {
“ImageName”: “pic1.jpg”,
"result " : “cat”
},
“Image2”: {
“ImageName”: “pic2.jpg”,
“result”: “dog”
},

    "Image3": {
        "ImageName": "pic3.jpg",
        "result": "cat"
    }
}

I was also able to setup the basic API in Bubble as a FORM as follows:

On the API setup page I uploaded some test mages by checking the Send File checkbox.
The API initializes correctly with the right JSON response being returned.

I also set up a bubble form to upload the images and text boxes to display the results of the API in a data group. When I use it the API returns the results for the test images. But I would like to change the images to those uploaded via the form - not use the test images. Not able to figure out how to do this - any help would be appreciated.

Thanks,

Hi @fpsystems ,

I think the reason you’re returning the test images is because you have the “Private” box checked for your two image parameters. Uncheck private, then go into your workflow, and replace the test values with “This Picture Uploader’s value”, or the value of whatever element you’re using to upload images.

Good luck!

1 Like

That worked - so thank you @launchable! I was able to replace the test images with dynamic link to each of the images - and the API returns the right values. However, right now seems like the API is called as soon as the first image is uploaded, and then again after the second one is uploaded etc. I would like it to be called only after all the images are uploaded or a Button is clicked . I tried to do this by setting a workflow linked to a button - but I don’t see a way to trigger the API only when the button is clicked. The API actions is not available in the Plugin actions (as the API is being called as data). So how can one do this? thanks.

@fpsystems - it’s not shown in your screenshot, but I’m guessing you have your API call set to “Data”, rather than “Action”. Can you change it to action, and try? Or is there a reason you need to have it set as data?

Yes, I do have it set up as Data - and changed it to Action. But then the API doesn’t show up a data source in the designer! However, I followed the steps suggested in this post [NEED HELP] need help making a button fill an input - #2 by romanmg
and it all works now! Thanks!