Link to plugin page: https://zeroqode.com/plugin/aws-file-uploader-1533465056312x784389392881156100
AWS File Uploader Plugin - is a powerful tool, that allows you or your users to upload files from Bubble apps directly to your AWS (Amazon Web Services) without any file size limits.
Plugin comes with the multi-file uploader element as well as S3 objects element that returns a list of all the files uploaded to your AWS S3 bucket. The connector also allows you to delete S3 objects from your bucket.
Each uploaded file has its own visual progress bar, so you or your users can see the upload progress. Plugin will also return a state with file URL(s), file size, last modified date, etc.
To run this plugin you need the following:
You can create the AWS account for free, just by visiting the following link:
To create the AWS Cognito Identity, please follow the instructions below:
On the next screen You need to also create IAM Roles for your Cognito Identity:
Once you have Created the IAM Roles, You will get the identity pool ID for our plugin (shown in red on the screenshot below)
In Your IAM Dashboard, you will find two new roles.
In our case, it is “Cognito_zeroqodetestAuth_Role” and “Cognito_zeroqodetestUnauth_Role”.
Policy details you can edit by clicking the "Edit policy" Button
By clicking each role name you will open the role settings, where you need to replace the default policy with the following lines:
* If necessary you can go deeper and set your own rules, for a more secure application.
Here is a new set of rules for adding additional security to your AWS buckets.
The first one is unlocking public access to all, but don't worry it is just for a moment:
2. For the Access Control list tab make sure that all the options look like on this image below:
3. Third tab, here is the interesting part where you can configure all the rules for security and privacy via Bucket Policy. Take a look at the "Action", "Resource" and "Condition" fields where we grant access for reading the objects from our bucket but not for everyone. In this case, we are granting access to read files only for users from our application domain, so if a user will get an image URL and try to open it in a new tab, or a new window the bucket policies will block this request because we mentioned in the privacy rules that it link can be opened only from our domain:
More privacy rules can be accessed here, and you are free to try these rules for improving the security of your buckets.
4. And the last tab is the CORS configuration that will look like in the image below:
Here is an example of a successful rendering an image in our application (our domain mentioned in rules above):
And then trying to open it in another tab or window by URL:
You can manage your S3 storage using the link below:
To create a new S3 Bucket click the “Create Bucket” Button and follow the instructions.
The name and Region you choose on the first screen will be then used in plugin setup.
You need to set the S3 Bucket available to the public, so everyone can view your files.
if you already created the bucket but didn't make it public, you need to change the access properties as shown on the following screenshots:
Once you have created the S3 Bucket, enter the settings and under the “Permissions” tab, update the CORS Configuration with following lines:
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
Once the CORS is settled, you need also allow the IAM user to make changes in your S3 bucket. To do so, click the "Bucket Policy" button, on the same "Permission" tab.
Then you paste the following code in the "bucket Policy Editor and save changes:
YOUR-BUCKET-NAME should be your S3 bucket name.
It's always better to add also other security rules, to keep your data safe.
To successfully run our AWS file uploader, you will need to have your S3 Bucket ready, so you can provide the S3 Bucket ID, and write down in what region you have launched it.
The Identity Pool ID you will get from your Cognito account.
This element was created to easily upload files into your S3 Bucket using the User Interface.
This is a default text description, that will be displayed in the editor until there is nothing to preview.
Max file size (MB)
The maximum size limit for each file.
Max timeout (s)
The maximum time that the app will wait for a file to upload.
If checked, the uploaded files will be reviewed.
Create image thumbnails
If checked, the images will display its content.
Show remove/cancel button
When Checked, the buttons appear for each uploaded file, so your users can remove them.
Folder structure ["uuid_filename" or "uuid/filename"]
This will define how your files will be stored in the S3. The Unique ID will be saved as a folder, while the file will remain unchanged or the Unique ID will become part of the file name.
Add prefix to the filename
You can add custom prefixes to the file names, so it will be easier to locate them on S3 Bucket.
Checking this will allow your users to upload multiple files at once.
File type restrictions [starting with DOT character, e.g: .gif, .jpg, .png, doc (all - for no restrictions, images - for only images, video - for only video )]
You can limit what files can be uploaded into your S3 bucket.
Thumbnail method ["Contain" or "Crop"]
You can configure how the overlapping parts of the image preview will be handled.
Thumbnail width (px)
Width of the image thumbnail, to best, fit your design.
Thumbnail height (px)
Height of the image thumbnail, to best, fit your design.
Remove button caption
Text that will be displayed on the "Remove" button.
Cancel button caption
Text that will be displayed on the "Cancel" button.
This element was created to manipulate your S3 Files using workflows (such as delete a file or retrieve a list of files from the S3 Bucket). Simply place the element on your page, and check the newly added workflow actions
An action that allows you to delete a list of files from your bucket.
Just put your files URLs or names in the Files List field and it’s done.
In the screenshot below shown how to delete all the files from the S3 bucket.
This element doesn't have any associated user interface and was created to give you the possibility to upload files to Amazon bucket via workflow action.
To get started with this, place the element on to the page and check for workflow action “Upload File” that accepts a dynamic or static file URL. This element returns 3 states:
URL - uploaded file URL,
Name - uploaded file name,
Error - in case of any errors.
Also, element triggers 3 events for perfect workflow control:
Upload Started - when the action starts,
Upload Ended - when file uploaded successfully,
Error - when an error happens.