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) S3 Bucket without any file size limits.
The 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 or a special folder on that bucket. The plugin 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(s), last modified date(s), etc.
Note: We use CORS Configuration and Bucket Policy for informative purposes only for the test case. For Access Permissions (CORS, Bucket Policy, Access Control List, etc.) please follow Amazon AWS's Setup Documentation to better understand your personal requirements. https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.htmlhttps://docs.aws.amazon.com/AmazonS3/latest/user-guide/add-cors-configuration.htmlhttps://docs.aws.amazon.com/AmazonS3/latest/dev/example-bucket-policies.html
To run this plugin you need the following to set it up on the AWS side:
You can create the AWS account for free, just by visiting the following link: https://aws.amazon.com/console/
Please note that the AWS Free Tier has limitations like the number of free GET/POST requests per 12 months:https://aws.amazon.com/s3/pricing/ https://aws.amazon.com/free/?nc1=h_ls&all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc
To create the AWS Cognito Identity, please follow the instructions below:
IMPORTANT! It is necessary to check the “Enable access to unauthenticated identities” checkbox, so the plugin can connect to it. You can go deeper, and set the Cognito identity some more secure way by yourself.
Now create IAM Roles for Cognito Identity (the values from inputs can be changed):
Once you have created the IAM Roles, you will get the identity pool ID which will be used in the plugin settings (shown in red on the screenshot below)
IMPORTANT! Make sure your identity pool id is in the same region as your S3 bucket and the region is indicated with LOWER CASE in the plugin settings.
In Your IAM Dashboard, you will find two new roles: https://console.aws.amazon.com/iam/home
Tip: In our case, the values are “Cognito_zeroqodedemo02Auth_Role” and “Cognito_zeroqodedemo02Unauth_Role”.
You can edit policy details by clicking the "Edit Policy" button to the much desired requirements, please be sure to check AWS's documentation on this one.
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 set your own rules to make your application more secure, check AWS's documentation for more details.
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 then be used in the plugin setup.
You need to set the S3 Bucket available to the public, so everyone can view your files.
Add additional security to your AWS bucket by configuring policies on the 'Permissions' tab:
In the next steps, we'll show you how to set Access Control, Bucket Policy, and CORS policy to get started with basic security restrictions.
1. In the 'Block public access' area unlock public access to all for time being.
2. In the 'Bucket Policy' area you can configure 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. In this case, we are granting read file access only to users from our application domain, so if a user gets an image URL and tries to open it in a new tab or a new window, the bucket policy will block this request because we stated in the privacy rules that the link can be opened only from our domain:
Here's a code example (JSON):
YOUR-BUCKET-NAME - should be your S3 bucket name (ex: zeroqodedemo02).
You can find more Bucket Policy examples here. Feel free to try out other rules in order to improve your bucket security.
3. In the Access control list (ACL) area make sure that all the options look like on the image below to match our configuration:
4. Use the 'Cross-origin resource sharing' area to configure the CORS policy for the S3 bucket.
To configure access from all domains, you can use the following JSON for CORS policy:
Setting the CORS policy like this will allow everyone to change anything in your bucket, but you can definitely go deeper and set it up in a more secure way. For example, you can use the following JSON for CORS policy to allow access from your domain only (change the allowed origin to the URL of your app starting with https://)
Here is an example of a successful image rendering in our application:
Trying to open the same image in another tab or window (incognito) by URL will now result in the following error as restricted access to the file:
On the Bubble side, in plugin settings.
Provide the S3 Bucket name, the region, and the identity pool id in the plugin settings:
It is important to provide the exact server region, where you have launched the S3 storage. The region and the region indicated in the Identity Pool ID should be the same. You can get the Identity Pool ID from your Cognito account.
Here's a good Introduction Video by Amazon Team on how to get started with Amazon S3 - https://www.youtube.com/watch?v=vFfY_-TL-pc
The plugin has 3 visual elements: File uploader, S3 Objects, and File Upload No GUI. In order to work with one of the elements, you have to add it to the page.
Note: Only use one File upload No GUI element on the current page.
This element lets you easily upload files into your S3 Bucket using the User Interface.
This element lets you easily upload files into your S3 Bucket without a graphical user interface but should be placed on the page in order to interact:
Note: the uuid_ format prefix will always have a constant length of 36+1 = 37 characters, while for the prefix with the zq_random format the length will vary.
Action property:
This element lets you get the list of files from the S3 Bucket. Should be placed on the page to get access to element actions, events, and states.
This plugin element has no properties.
Action properties:
This action should be used in order to delete one file from an S3 Bucket
Action properties:
This action should be used in order to delete a list of files from an S3 Bucket
Action properties:
2. S3 Objects element example
Place a button on the page and give it a name (for example, 'Get Files'). Then trigger the following workflow on this button click:
After this action has been run, you will have access to file information (in the element states: List of file URLs, List of filenames, Last Modified, and List of file size (MB)) for all the files that are currently located on S3 in the folder with the name 'MY_FOLDER'.
3. File Upload No GUI element example
To work with the 'File Upload No GUI' element, place it on the page, and, optionally, use some Bubble or other User Interface element in combination with this plugin element to make your design more user friendly. As an example, on our demo page, it is used in combination with the Bubble File Uploader element. Then choose the right settings for the 'Title' and 'Unique file prefix format', and start using them.
4. Delete Files plugin action example
Place a button on the page and give it a name (for example, 'Delete Files'). Then trigger the following workflow on this button click:
After the workflow has run, the indicated files will be deleted from the S3 Bucket.
Update: 12/29/2020 –
2. Changes to S3 Objects element:
3. Changes .to File Upload No GUI element:
4. Fixed issue with special characters in file names in SafariUpdate: 12/01/2021 -
Update: 04/03/2021 -
Update: 19/04/2021 -
Update: 26/04/2021 -
Update: 05/05/2021 -
Update: 07/06/21 - Version: 1.76.0
Update: 19/06/21 - Version 1.77.0
Update: 06/07/21 - Version 1.78.0
Update: 16/07/21 - Version 1.79.0
Update: 20.11.21 - Version 1.82.0
Update: 06.12.21 - Version: 1.84.0
Update: 14.12.21 - Version: 1.85.0
Update: 17.12.21 - Version: 1.86.0
Update: 15.02.22 - Version: 1.87.0
Update: 23.05.22 - Version 1.93.0
"fixed the problem with states Size, type etc."
Update: 30.06.22 - Version 1.95.0
updated endpoint for action "get files".
Live Demo: https://zeroqode-demo-02.bubbleapps.io/aws-uploader