AWS File Uploader Plugin
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 Cognito Identitly, please follow the instructions bellow: 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”.
By clicking each role name you will open the role settings, where you need to replace the default policy with 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 more secure application.
You can manage your S3 storage using the link bellow: https://s3.console.aws.amazon.com/s3/home
To create 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 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 screenshot:
Once you have created the S3 Bucket, enter the settings and under the “Permissions” tab, update the CORS Configuration with follow 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 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","Id": "http referer policy example","Statement": [{"Sid": "","Effect": "Allow","Principal": {"AWS": "arn:aws:iam::522148266902:role/Cognito_zeroqodetestUnauth_Role"},"Action": "s3:*","Resource": "arn:aws:s3:::zeroqodetest/*"}]}
The "Principal AWS" should contain your own IAM ID, The same as the "Resource" should be your S3 Bucket ID
It's always better to add also other security rules, to keep you data safe.
To succesfully 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 exact server region, where you have launched the S3 storage.
The Identity Pool ID you will get from your coginto account.
This element was created to easily upload files into your S3 Bucket using the user Interface.
Placeholder This is 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 file to upload. Enable preview If checked, the uploaded files will be previewed. 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 folder, while the file will remain unchanged or the Unique ID will become part of the file name. Add prefix to 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
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 action starts, Upload Ended - when file uploaded successfully, Error - when an error happens.
You can check the demo we created, to see how we settled the plugin elements and workflows here: https://bubble.is/page?type=page&name=aws-uploader&id=zeroqode-demo-02&tab=tabs-1 And preview it here: https://zeroqode-demo-02.bubbleapps.io/aws-uploader