How to format BASE64 encoded file to be sent to Bubble

Hi there.
I am playing around Python and I try to make a POST API request to Bubble in order to save a file sent in base64.

However, I don’t know how to format the data to be sent to Bubble, here’s what I tried:

And here is what Bubble is receiving but I can’t get to make it an image.

Any tips ? :slight_smile:

Any advices for me @ryanellman @redvivi @jamesdevonport @jaredg ?

It’s not an API endpoint you create, it’s built in to Bubble (and not documented outside the forum post I don’t think): Save Base64 encoded file to Bubble - #12 by jaredg

That was what had me stuck anyway initially

This is from @gaimed ’s plugin, that shows using the api connector to CALL the endpoint


Oh, ok, this is strange.

So how do you work with the data / picture after that if you didn’t create the endpoint by yourself ?

Thanks for your reply!

It returns the path to the file in the body

1 Like

It’s working, thanks for the valuable insight.

However, I am a bit concerned as this endpoint doesn’t require any authentication, isn’t it a security leak? I understand that now everyone is able to send data to my server.

As I know, that is not an official method to use.

Well only thing that happens is a file gets uploaded to aws and it shows up in your data/files tab…

So it means that I can use any Bubble app from other people as personal storage for my illegally downloaded movies or it also means that I can fill an app with data until it blocks the app because it’s full …

jup! I saw that they are changing it. So I think this wont last long…

Now, here’s something I’m facing about this Base64 / file encoding:

I have an API that provides me a file output as “octet/stream”. There I can have multiple types of files: PDFs, images, Autocad projects, binary files, and so on.

There’s nothing on the headers on that API mentioning the file type nor the file name. It just returns me a “body” with the base64 content.

When I initialize the API call to this service, I set on my header:
Content-Type = application/json
Accept = application/octet/stream

I also set the “Data Type” on Bubble as “File”, because I want to save that stream as a file in Bubble and I need to consume that file in a Bubble form. In fact, my goal here is to download a PDF, and with the file, do an OCR scanning to retrieve the plain text of this PDF.

In this example, I have a PDF file to download/upload/save in Bubble.

Now, what’s happening is:

  1. The API is successfully initialized
    1.1 It creates a file on S3 (File Manager) named: api_initialize_file, of type “application/octet-stream”, the “User ID” has a number in there (even though I’m not using any authentication).
    1.2 If I click “view”, it downloads the file “api_initialize_file”
    1.3 I add the “.pdf” extension in that file and the file open without any issue. This means the PDF file is being transferred

I’ve added a button to trigger the file upload to Bubble, and simply running the API call to the service creates a similar file, but now named “download”.

I created a “thing” to store the link to this S3 file, and I added a second step to create a new thing.

I have a field as “File” type and another as “Text”.

I could successfully have both file and text populated, but again, when I click in the file for download, it downloads the file without the extension. I tried to add the extension, appending the file name, but it seems the file is linked with the S3 origin, so no much success.

My question is:

  1. Is there a way for me to change the file type from “octet-stream” to “application/pdf” on S3 “file manager”?

  2. I had an epiphany to change my output from File to Text, then the PDF content comes in. Not the Base64. Is that a way for me on the fly to save this file as S3 and as a Thing?

  3. I tried the other methods to send a file to Bubble, which worked - like sending a PDF, but I explicitly set the “content-type” to “application/pdf”. However, none worked with that specific API I need to consume.

  4. My goal is to consume that PDF that comes from the API as a step for an OCR reader, so it requires a “link” or a “thing”. I didn’t see any way for them to access a file directly without being on a thing.

  5. Any help is much appreciated! I’m brand new on Bubble and I’m loving it!

@gaimed hey - im using your technique but im finding the that image is corrupted. The data URI works just file on the front end when I capture it. I can display it image controls etc. But when I try and save the image with this api the image is not a valid image. Its corrupted.

Any ideas why this would be happening?

I implemented this in a plugin since the API approach was uploading a potentially corrupted file. There’s a workflow action you can run called ‘Base64 Upload to Bubble’ that uploads it to your app and publishes the Bubble S3 URL to the plugin element’s state.