Link to plugin page: https://zeroqode.com/plugin/aws-file-uploader-1533465056312x784389392881156100​

Introduction

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.

Prerequisites:

To run this plugin you need the following:

1) AWS account

You can create the AWS account for free, just by visiting the following link:

​ https://aws.amazon.com/console/​

2) AWS Cognito Identity account

To create the AWS Cognito Identity, please follow the instructions below:

​ https://console.aws.amazon.com/cognito/home​

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)

3. IAM Security Roles

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.

Additional Security:

Here is a new set of rules for adding additional security to your AWS buckets.

1. 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:

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:

4) AWS S3 Bucket located on the desired Server.

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>

<?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.

Permissions

First Run

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.

Plugin Details

AWS File Uploader Element:

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.

S3 Bucket Element:

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

Delete Files

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.

File Uploader no GUI Element:

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.

Things to Note

Demo to preview the settings