Using the AWS S3 storage

@PineappleJoe You can’t upload straight to your Bubble’s S3 using client side JavaScript. You will need to create a custom plugin for yourself which will have the “context.upload” function exposed in the plugin editor to upload files.

@PineappleJoe Or on a second thought :thought_balloon:……you can take that image and send a POST request to one of your bubble data endpoints and upload that way :thinking:

1 Like

Well what im doing now is just using the “javascript to bubble” widget which allows me to take an image in js and send a data uri to bubble. i can put the image in a bubble image control, image uploader etc.

BUT the image does get saved in s3. Ive even tried saving it with the :saved to s3 thingy but that doesnt work.

@ehr.nucleon did you ever find a solution?

@shawnmi6 how would you do this - "you can take that image and send a POST request to one of your bubble data endpoints and upload that way "

EDIT:

@shawnmi6 put us in the right direction, bubble’s Data API is the way to go!


Original Comment:

@PineappleJoe No I have not found a solution yet, but I know a workaround. If you own your own server (shared or private) you can create a temp file on your server from the Base64, then use that file’s URL in bubble. For example, in bubble you would create/modify a thing and set picture = https://yourserver.com/tempfile123.png :saved to s3

And of course you would want to delete the temp file from your server in order to clean up space.

What @shawnmi6 suggests is not possible (yet). For file or image fields, bubble’s data API endpoints only accept a URL string. You can save Base64 in an image field but :saved to s3 feature does not work there. So for now the only option is to use any third-party service that offer temp file creation from Base64 data, or roll your own script on a server.

For now I am going to use my own server to host such files, but I am planning to get my own AWS S3 storage so that I can directly store files in it and use their URLs into Bubble. This may also help if you are planning to deal with large amount of files, as bubble’s storage space is limited according to your app plan.

Doesn’t bubble give you a S3 url back when you make a GET request to your data endpoints which have a field type of file or image?

The format is described here - Introduction - Bubble Docs

 {
 filename: String
 contents: Base64-encoded binary data
 private: Boolean
 attach_to: String
}

You make a fetch.post() call to your data point and then on completion you make a fetch.get() call using the unique id and you should see the S3 url for your image.

Easier way would to make a backend api workflow which accepts image as a parameter. Take that image create a new thing in the database and respond to the api call with the new things image fields S3 url…

1 Like

@shawnmi6 WOW, I had gone through Data API a few times but never noticed that Data API allowed this!

This solves all my problems, now I can work on a mobile app that can accept multiple shared files and directly upload them to bubble’s s3 storage. You’re a life saver!

EDIT:

Now that we know we can use Data API for this, I think we can use bubble’s API Connector plugin to create a workflow that accepts Base64 text, connects to Data API, responds with an s3 URL that we can use in later steps of a workflow.

I will try to set up a demo app for this later when I get some free time.

1 Like

Awesome that it works.

But how do you do it? Im new to bubble and dont understand half of what you are talking about. how do I make a fetch.post() call or a fetch.get() call? In javascript? Under what conditions? Sorry im still lost :frowning:

Bubble offers Data API so that we can perform database operations (Create/Read/Modify/Delete) from outside bubble, using any programming language (such as Javascript, PHP or Python).

Bubble also specifies how we can send binary file data to perform a create/modify operation via Data API.

While this Data API can be used with a programming language, I believe we can instead use Bubble’s own API Connector plugin to consume this Data API.

Using API Connector plugin has another big advantage - using javascript to make get/post calls to Data API would potentially expose API Token/Key to clients and possess a security threat.

I am super busy these days, but will try to create a demo app that shows how to do this.

2 Likes

Hey Thanks.
I ended up getting it working.

Turns out you’ll get image corruption if you send in the data/image/base64 stuff. you just have to send in the raw data. Then the image corruption wont happen.