Send iPhone photo to Bubble API

[malekaixmischke]

Hi all — I’m trying to send an iPhone photo to my API hosted via Bubble. But I’m struggling to send the file through. The flow I’m trying to build is:

1. Take iPhone photo
2. Use iOS shortcut to send that photo my Bubble API
3. Then, in my Bubble API, extract the photo link, then send that link to the GPT 4o Vision API for analysis

I’m struggling to send the iPhone image to my Bubble API though. I’ve tried setting API type to form data, or upload file, or first converting the image to Base64 then sending that as text. However with each approach I’ve run into an obstacle.

I wonder if I’m missing an obvious step, as I feel like it shouldn’t be that hard to send an iPhone photo to an API hosted on bubble, and then extract that photo’s link

And btw, this is what my Bubble API looks like:

I think the fix is to send the iPhone photo as a file to the Bubble API, upload that file to the Bubble database as a public file, and then send that database file link to GPT. But I’m struggling with that.

Any advice would be super appreciated

[doug.burden]

{
  "model": "gpt-4o",
  "messages": [
    {
      "role": "system",
      "content": "You are an expert at structured data extraction from BOL ticket images. The weight you are extracting is in pounds by the thousand (do not add comma). We don't want tons. For ticket numbers that start with K, there will not be any other letters in this number other than the K. If a digit is incomplete, such as a 0 that looks like a c, assume it's supposed to be a 0 and so forth. Tickets starting with KERM are preceded with a dash and number making a complete number KERM-******."
    },
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "<text>"
        },
        {
          "type": "image_url",
          "image_url": {
            "url": "<url>"
          }
        }
      ]
    }
  ],
  "max_tokens": 300,
  "response_format": {
    "type": "json_schema",
    "json_schema": {
      "name": "bol_data_extraction",
      "schema": {
        "type": "object",
        "properties": {
          "weightGross": { "type": "string" },
          "weightTare": { "type": "string" },
          "weightNet": { "type": "string" },
          "ticketNumber": { "type": "string" },
          "isConfident": { "type": "boolean" }
        },
        "required": ["weightGross", "weightTare", "weightNet", "bolNumber", "isConfident"]
      }
    }
  }
}

Then you will need some regex e.g.

[mitchbaylis]

could just capture the image directly with a button click on a bubble page?

open camera on button click, take photo, upload
or open phone gallery, select, upload

not sure why’d you’d need to go the api method.