Use your own AWS S3 bucket with your Bubble Applications - without plugins or 3rd-party solutions

Learn how to use your own S3 bucket to store your files for your Bubble (bubble.io) applications. We build an AWS API Gateway Service Integration with S3 (no need for Lambda!), and connect to it with just a few lines of custom HTML and JavaScript that we add to our Bubble app.

Sections:
00:00 Intro
04:16 Bubble setup
05:20 S3 Bucket Creation
05:50 AWS IAM Setup
11:30 API Gateway Creation/Setup
22:45 Testing API with Insomnia
26:10 Building uploader in Bubble
54:35 Pulling data into Bubble app

Some notes about the video:
- The API gateway file size limit is 10mb. If you're files are going to be larger than this, look into using a Lambda function to generate a "presigned URL" for your file and use that to upload/download. (https://docs.aws.amazon.com/AmazonS3/latest/userguide/ShareObjectPreSignedURL.html ).
- Bubble will store the files downloaded via the "Get data from an external API" calls. So you will probably want to periodically clear these out (Bubble will re-download them on each page load)
- I initially create "UploadedFile" in the database, and later in the video it magically changes to "Upload". It's the same object / data structure.
- At about 30:00, we open the developer tools / console: you can do this in Chrome and Firefox by pressing ctrl-shift-I (or cmd-shift-I on mac), or by selecting it from the browser's menu.
- If using this in production, you may want to restrict access to your API by adding an API key and/or changing your Access-Control-Allow-Origin header to match your app's domain.
- "Incidentally" is this round's verbal Easter egg
- If your main goal is just to use your own S3 bucket, the easiest and quickest way is probably to use a plugin. Check out the AWS File Uploader plugin from Zeroqode - https://bubble.io/plugin/aws-file-uploader---any-size-1527575349408x715242509040615400
- Pardon the cringey editing ovesight at ~ 25:00 (pick a file), and the terrible sound in some spots. My apologies :s
Supporting documents:
- fetch - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
- input file - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
- AWS documentation for file upload - https://aws.amazon.com/premiumsupport/knowledge-center/api-gateway-upload-image-s3/

If you get stuck, let me know! And if you've figured out a way to use API connector to do this, without any JavaScript, I'd love to hear about it! I've not yet cracked that nut.

-------------------------------------------
website: launchable.ai
twitter - @LaunchableAI

LaunchableAI - Helping makers launch We offer development services for AI/ML, no-code/low-code, data science, and web applications.

Видео Use your own AWS S3 bucket with your Bubble Applications - without plugins or 3rd-party solutions канала Launchable AI