Tools to close the gap for lowest cost AWS S3 file storage following normal upload process made with standard UI widget.
Features:
- Easy setup, debug - 20 min. to create new S3 Bucket , to integrate S3 w bubble app
- low cost S3 rates for cloud storage ( 37 cents a month vs $10 per month on bubble)
- EZ file forwarding ( From: , To:) respective S3 buckets
- No plugins necessary - just bubble UI components, Data, Workflow
- Public Read access to S3 objects by apps including Bubble
Assumptions
- Access to DIY AWS S3 tools ( dashboard ) for creating, admin on S3 bucket
- Admin privileges on AWS bucket ( public read access, Key access, ACL on )
- experience, comfort on bubble editor ( WF, Data, Api connector )
- developer takes responsibility for deletes of intermediate files written to bubble’s S3 bucket where storage is more costly
Overview
graphic below shows UI uploader widgets that begin a normal file upload. At the bottom of the graphic see the end state of the process where you have bubble data record that holds the link to the recently uploaded file whose destination ( and link ) are on S3 bucket totally independent from bubble ( much more affordable storage rates apply ).
Details Workflow - copy into your project
I opened up public.READ access on my project but the “free” plan does not permit shared access.
The workflow hooks to the end of the file upload whose output is a link to the file on the internal Bubble S3 bucket. 2 simple steps in the WF process.
Step 1 Copies the S3 file to another bucket ( you create the bucket on the AWS dashboard ) using the API Connector ( see graphic on connector below) . Step 2 uses the json response from step 1 to make a data insert storing the new S3 public link in the appropriate data table. See above graphic of “url” attribute with link value “//bubble-yaya-tst.s3.amazonaws…” This supports any apps access to the upload. bubble-yaya-tst is my aws bucket and using the aws key values shown below, anyone could upload there. Note that bucket is slated for deletion and that the token value for the copy api expires every 2 weeks.
Above , in the middle you see the JSON response from the Copy process ( left-hand step ) . Region, bucket , and folder are common AWS terms and are covered in docs on AWS.S3. The “link” parm is just the value assigned by Bubbles UI component ( img upload OR file upload). Copy is straight forward involving these 4 parms displayed in the workflow panel (left-hand side).
#2 in the response is also called the “link” property or output-link whose value is inserted into the data layer property “Url.url”. Any subsequent Fetch on the upload object uses this link value, taking advantage of Public-READ permisssion on the bucket for getting the file.
Details API Connector - copy into your project
A free service, located at “infinite-mountain-20609.herokuapp.com” is accessed by the API connector tool for a copy ( From . To ) from one bucket on S3 to another. This is required to benefit from much lower storage costs, in addition to admin flexibility offered by going directly to AWS for a bucket. Connector config details in the graphic below:
"authorization" is required by your bubble app to use the copy service. More details coming on how to register ( email & bubble app’s URI req’d) for a the “bearer token” value used here. For now, the projects editor is public READ access so you can copy the token value here
"Aws-Key…" has 2 permissions related keys needed for WRITE.Permissions on the target S3 bucket . More details on setup/config of your S3 Bucket here
"link" May begin with a protocol (https) or simply a “//” as per normal usage on bubble platform. Copy any link to a bubble S3 object, then, url-encode what you copied. Use the result value to initialize the connector. “link” points to the input in the copy process. Bubble ui widgets for Uploads and bubble file manager create a link to the file on the internal Bubble S3 platform any time a file is uploaded by an upload widget or by the file manager tab. Combined with PUBLIC.READ permission on bubble’s bucket, the link provides access on bubbles cloud.
"region , bucket" are captured when you create the bucket. Best performance attained when you set the region equal to the Amazon region where you Bubble app is located.
"folder" is standard directory name for sub-directorys. I usually include ( photo/ audio / video) in media intensive apps.
Get started now by making an account on AWS and Create a bucket on the S3 service using “how-to” below …
