Base 64 from captured image

Mobile Beta Mobile Beta - bugs
1

On the mobile beta builder. I am taking a picture with the open camera function in work flow. I need the base64 string of this picture for an api I am running.

Bubble has the option of choosing encoded base64 however nothing happens. I know the api works as I have used it with another element.

In my screen shot I have taken a picture of the workflow and just put it I not the state of an image which when I choose url the image appears in the test however when I choose Base64 nothing happens

Any advice or help would be grateful
Image with url to set state works :white_check_mark:
Image with base 64 to set state doesn’t :cross_mark:

base 64 image
base 64 image903Ă—414 18.5 KB

url image
url image928Ă—432 18.4 KB

1 Like
2

here’s what’s actually happening.

when you pick URL, bubble gives you a file object. that’s why it behaves like a normal image and shows up when your state is typed as image.

when you pick base64, bubble is not giving you a file anymore. it’s just returning a long text string. if your custom state is typed as image, bubble won’t know what to do with that string, so visually it looks like nothing happened.

that’s the mismatch.

set the custom state type to text, not image. then temporarily display that state in a text element just to confirm the string is actually there. once you see it, you’ll know the camera step worked and you can pass that value to your API.

if the API still complains, you may need to remove the data:image/...;base64, part at the beginning before sending it.

3

Thanks for the reply. In the example I have just called the state image state. It’s type is text in both pictures. The image appears when the text of the url is in the state however not with the base 64 string

4

ok that changes it a bit.

if the state is already text, then the reason you “see” something with the URL and not with base64 is just because a URL is readable text, while base64 is a massive encoded string. bubble won’t visually render anything from that unless you explicitly display the text somewhere.

so when you set the URL, you recognize it because it looks like a normal link. when you set base64, it probably is being stored, it just doesn’t show as anything visual unless you bind that state to a text element.

the real test is this: drop a text element on the page and set it to that custom state after choosing base64. if you see a very long string starting with data:image/...;base64, then it’s working.

if it’s empty, then the camera action isn’t returning base64 at all in the mobile beta (which can happen — the beta still has a few quirks).

so the key question is: when you inspect the state in debug, is it actually empty, or just not visually displaying?

Ae you sure?

yeah and here’s why I’m saying that.

A url is short, readable text. So when you store it in a text state and look at it in the debugger, you immediately recognize it and think “it worked.”

A base64 image isn’t visual. It’s just a massive encoded string. If Bubble is storing it, you won’t see anything happen unless you bind that state to a text element or inspect it in debug. It won’t magically render like an image unless you explicitly tell an image element to use that base64 string as its source.

So the real question isn’t “does it display?” it’s “is the state empty or not?”

If you check the debugger right after the camera step and the state is blank, then the mobile beta isn’t returning the base64 at all (which is possible that feature has been inconsistent).

If the state contains a long string starting with data:image/...;base64, then it is working it’s just not being rendere

5

Thanks so much for taking the time to type that all out. I have done the text element as suggested and it turned out empty. I am testing on the bubble go app which I dont think has a debugger section. And I cant get the camera to work on the PC preview :rofl: However I can get everything to work perfectly with a picture taking plugin on the PC preview but it doesn’t take pictures on BubbleGo. So yes its all a mess for me at the moment :rofl:

1 Like
6

yeah… if the text element is empty then it’s not a rendering issue at all.

that means Bubble Go simply isn’t returning the base64 value from the native camera action. so the workflow runs, but the encoded output is coming back null.

you’re running into the difference between desktop preview and Bubble Go. on desktop, plugins handle the encoding in the browser, which is why it works there. Bubble Go uses the native mobile layer, and some of those options especially encoding are still inconsistent or not fully wired up.

so if URL works but base64 returns nothing, that points to a limitation/bug in the mobile beta rather than your setup.

you’re not messing anything up. it’s just one of those “mobile beta reality” moments.

7

Have you been able to solve the issue?

8

Thank you for the help. Its all quite slow going for me and a learning curve as I have no coding or pc knowledge at all. Its just copilot and I navigating bubble trying to execute an idea I have. I am hoping that when I launch the app or test the app in test flight it is going to be closer to the preview functions as it looks like the wrapping of bubble go is quite limiting and maybe more helpful for understanding what the design will look like.

9

Totally get that. Bubble is a big learning curve, especially without a coding background. Honestly, the fact that you’re pushing through with Copilot and figuring it out says a lot. Bubble Go can definitely feel limiting, TestFlight should give you a much more realistic feel of the app. Keep going, you’re closer than you think :flexed_biceps:

1 Like
10

If you’re having any issues feel free to reach out to me.

1 Like
11

This topic was automatically closed after 14 days. New replies are no longer allowed.