Hi everyone — I’m building a Bubble web app that lets users upload a photo and apply AI image edits (e.g., hairstyle try-on, smile enhancement, age-up, virtual outfit preview). I’m using the API Connector to call an external AI endpoint and then display the processed image back in the UI.
I’m looking for best practices from people who’ve done something similar in Bubble, especially around files + long-running processing.
What I’m trying to achieve
-
User uploads an image in Bubble
-
Bubble sends it to an AI API (either as a file or as a URL/base64)
-
The API returns a processed image (URL or base64)
-
Bubble saves the result and shows it in a “results gallery”
Questions
-
What’s the cleanest way to send the image to an API?
-
File upload (multipart/form-data) vs sending a Bubble S3 URL vs base64
-
If the API expects multipart/form-data, what’s the most reliable setup in API Connector?
-
-
How do you handle processing that can take 10–60 seconds?
-
Do you recommend backend workflows + polling?
-
Any patterns for “job_id → check status → retrieve result image”?
-
-
Where do you store results for performance + privacy?
-
Save to Bubble DB as an image file?
-
Store the returned image URL only?
-
Any common approach for auto-deleting images after X hours/days?
-
-
Security / API key protection
-
Are you wrapping calls in backend workflows only to avoid exposing keys?
-
Any gotchas with rate limiting or preventing abuse?
-
For context, here’s a simple demo page showing the kind of output I’m aiming for (not trying to sell—just so you can see the workflow):
https://www.ailabtools.com/features/smile-filter
If you’ve built something similar (image-to-image APIs, AI processing, etc.), I’d really appreciate any plugin/workflow patterns that are proven to work well in production. Happy to share what I learn back with the community.
Thanks!