# How to format BASE64 encoded file to be sent to Bubble

**URL:** <https://forum.bubble.io/t/how-to-format-base64-encoded-file-to-be-sent-to-bubble/137230>\
**Category:** APIs\
**Created:** [February 20, 2021, 4:29pm UTC](https://forum.bubble.io/t/how-to-format-base64-encoded-file-to-be-sent-to-bubble/137230 "2021-02-20T16:29:27Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![vnihoul77](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vnihoul77/32/241345_2.png) [@vnihoul77](https://forum.bubble.io/u/vnihoul77)\
**Post date:** [February 20, 2021, 4:29pm UTC](https://forum.bubble.io/t/how-to-format-base64-encoded-file-to-be-sent-to-bubble/137230/1 "2021-02-20T16:29:27Z")

</div>

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:

 ![Screen Shot 2021-02-20 at 17.28.13](https://us1.discourse-cdn.com/bubble/original/3X/9/0/903299100b7d17f885625a3fe79d82853cea09c7.jpeg)

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

 ![Screen Shot 2021-02-20 at 17.28.36](https://us1.discourse-cdn.com/bubble/original/3X/c/8/c807a92c0b6a88bbd2e923b9e5e831b26c78768c.png)

Any tips ? 🙂

---

<div class="post-metadata">

**Author:** ![vnihoul77](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vnihoul77/32/241345_2.png) [@vnihoul77](https://forum.bubble.io/u/vnihoul77)\
**Post date:** [February 21, 2021, 5:26am UTC](https://forum.bubble.io/t/how-to-format-base64-encoded-file-to-be-sent-to-bubble/137230/2 "2021-02-21T05:26:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jaredg](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jaredg/32/60995_2.png) [@jaredg](https://forum.bubble.io/u/jaredg)\
**Post date:** [February 21, 2021, 6:20am UTC](https://forum.bubble.io/t/how-to-format-base64-encoded-file-to-be-sent-to-bubble/137230/3 "2021-02-21T06:20:24Z")

</div>

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](http://forum.bubble.io/t/save-base64-encoded-file-to-bubble/64142/12)

That was what had me stuck anyway initially

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

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/3/6/36979d6daa718a743ecd752be7e184252ca1a883.jpeg)

---

<div class="post-metadata">

**Author:** ![vnihoul77](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vnihoul77/32/241345_2.png) [@vnihoul77](https://forum.bubble.io/u/vnihoul77)\
**Post date:** [February 21, 2021, 9:43am UTC](https://forum.bubble.io/t/how-to-format-base64-encoded-file-to-be-sent-to-bubble/137230/4 "2021-02-21T09:43:41Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![gaimed](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gaimed/32/184165_2.png) [@gaimed](https://forum.bubble.io/u/gaimed)\
**Post date:** [February 21, 2021, 10:25am UTC](https://forum.bubble.io/t/how-to-format-base64-encoded-file-to-be-sent-to-bubble/137230/5 "2021-02-21T10:25:32Z")

</div>

It returns the path to the file in the body

---

<div class="post-metadata">

**Author:** ![vnihoul77](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vnihoul77/32/241345_2.png) [@vnihoul77](https://forum.bubble.io/u/vnihoul77)\
**Post date:** [February 21, 2021, 1:26pm UTC](https://forum.bubble.io/t/how-to-format-base64-encoded-file-to-be-sent-to-bubble/137230/6 "2021-02-21T13:26:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![lottemint.md](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/lottemint.md/32/26549_2.png) [@lottemint.md](https://forum.bubble.io/u/lottemint.md)\
**Post date:** [February 21, 2021, 2:33pm UTC](https://forum.bubble.io/t/how-to-format-base64-encoded-file-to-be-sent-to-bubble/137230/8 "2021-02-21T14:33:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gaimed](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gaimed/32/184165_2.png) [@gaimed](https://forum.bubble.io/u/gaimed)\
**Post date:** [February 21, 2021, 3:34pm UTC](https://forum.bubble.io/t/how-to-format-base64-encoded-file-to-be-sent-to-bubble/137230/9 "2021-02-21T15:34:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vnihoul77](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/vnihoul77/32/241345_2.png) [@vnihoul77](https://forum.bubble.io/u/vnihoul77)\
**Post date:** [February 22, 2021, 9:20am UTC](https://forum.bubble.io/t/how-to-format-base64-encoded-file-to-be-sent-to-bubble/137230/10 "2021-02-22T09:20:04Z")

</div>

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 …

---

<div class="post-metadata">

**Author:** ![gaimed](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gaimed/32/184165_2.png) [@gaimed](https://forum.bubble.io/u/gaimed)\
**Post date:** [February 22, 2021, 11:24am UTC](https://forum.bubble.io/t/how-to-format-base64-encoded-file-to-be-sent-to-bubble/137230/11 "2021-02-22T11:24:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![barizon](https://avatars.discourse-cdn.com/v4/letter/b/3bc359/32.png) [@barizon](https://forum.bubble.io/u/barizon)\
**Post date:** [March 1, 2021, 1:25am UTC](https://forum.bubble.io/t/how-to-format-base64-encoded-file-to-be-sent-to-bubble/137230/12 "2021-03-01T01:25:40Z")

</div>

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!

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/4/4/44276e4c39b8dbc3bda85803443ce1de74318895.png)

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/0/6/06d075487667e71e575de6257407367c0f65b926.png)

---

<div class="post-metadata">

**Author:** ![PineappleJoe](https://avatars.discourse-cdn.com/v4/letter/p/b4bc9f/32.png) [@PineappleJoe](https://forum.bubble.io/u/PineappleJoe)\
**Post date:** [July 10, 2021, 3:22am UTC](https://forum.bubble.io/t/how-to-format-base64-encoded-file-to-be-sent-to-bubble/137230/13 "2021-07-10T03:22:17Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/8/5/85e2361e9f16249a64a442b60ecdeb1c22dac2f8.png)

Any ideas why this would be happening?

---

<div class="post-metadata">

**Author:** ![blurapps](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/blurapps/32/102380_2.png) [@blurapps](https://forum.bubble.io/u/blurapps)\
**Post date:** [June 15, 2022, 5:59am UTC](https://forum.bubble.io/t/how-to-format-base64-encoded-file-to-be-sent-to-bubble/137230/14 "2022-06-15T05:59:55Z")

</div>

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](https://bubble.io/plugin/file-url-to-base64-1653645972850x203266694854213630)**
>
> File URL to Base64 Plugin page on Bubble, by Blur Apps. Add File URL to Base64 in one click to your app. Bubble lets you build web apps without any code.
