How to format BASE64 encoded file to be sent to Bubble

[vnihoul77]

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 ?

[vnihoul77]

Any advices for me @ryanellman @redvivi @jamesdevonport @lottemint.md @jaredg ?

[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

[vnihoul77]

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!

[gaimed]

It returns the path to the file in the body

[vnihoul77]

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.

[lottemint.md]

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

[gaimed]

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

[vnihoul77]

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 …

[gaimed]

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

[barizon]

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!

[PineappleJoe]

@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?

[blurapps]

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.

File URL to Base64 Plugin for Bubble, by Blur Apps