AWS File Uploader Plugin
Link to plugin page: https://zeroqode.com/plugin/aws-file-uploader-1533465056312x784389392881156100
To run this plugin you need the following:
You can create the AWS account for free, just by visiting the following link:
https://aws.amazon.com/console/
To create the AWS Cognito Identity, please follow the instructions below:
https://console.aws.amazon.com/cognito/home
IMPORTANT! It is necessary to check the “Enable access to unauthenticated identities”, so our plugin can connect to it. You can go deeper, and set the Cognito any more secure way.
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.
https://console.aws.amazon.com/iam/home
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:
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"cognito-sync:*",
"cognito-identity:*",
"S3:*"
],
"Resource": [
"*"
]
}
]
}
* 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 should look like in the image below:
EXAMPLE:
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:
https://s3.console.aws.amazon.com/s3/home
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"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
This setting will allow everyone to change anything in your bucket, but you can definitively go deeper and set it up a more secure way. For example, if you want to update the permissions so that upload and modifications are allowed only from your app you can use this CORS configuration (change the allowed origin to the URL of your app starting with https)
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>https://zeroqode-demo-02.bubbleapps.io</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>https://zeroqode-demo-02.bubbleapps.io</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
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:
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "*",
"Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
}
]
}
YOUR-BUCKET-NAME should be your S3 bucket name.
It's always better to add also other security rules, to keep your data safe.
After the last update of AWS plugin, you can use the latest documentation for the S3 bucket configuration (https://docs.aws.amazon.com/AmazonS3/latest/dev/using-with-s3-actions.html). In simple words, you can now go to your bucket "Permissions" tab and configure it.
"Block public access" - you can block all the public access from this tab just turning on the "Block all public access " checkbox.
"Access Control List" - here you can block access for the "Everyone" group just unchecking "List Objects" and "Write Objects" checkboxes.
"Bucket Policy" - here you can test with your configurations according to AWS S3 documentation. We recommend you to use the basic configuration from our documentation.
"CORS Configurations" - use recommended configurations from our documentation.
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.
It is important to provide the exact server region, where you have launched the S3 storage.
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.
Placeholder
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.
Enable preview
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.
Many files
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.
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