AWS File Uploader Plugin new

Demo to preview the settings

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) S3 Bucket without any file size limits.
The plugin comes with the multi-file uploader element as well as the 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.

How to Setup

To run this plugin you need the following to set it up on the AWS side:

1. AWS account

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

2. Create an Amazon Cognito Identity Pool

To create the AWS Cognito Identity, please follow the instructions below:
Image without caption
  • On the next page, choose to Create new identity pool
Image without caption
  • In the Getting Started wizard, type a name for your identity pool in the Identity pool name.
  • Choose to Enable access to unauthenticated identities.
Image without caption
  • On the next page, choose View Details to see the names of the two IAM roles created for your identity pool. Make a note of the name of the role for unauthenticated identities. You need this name to add the required policy for Amazon Role and choose to Allow.
Image without caption
  • On the Sample code page, select the Platform of JavaScript. Then, copy or write down the identity pool ID and the Region. You need these values to replace REGION and IDENTITY_POOL_ID in your app in the AWS plugin fields.
Image without caption
  • We create a file in your computer and save the identity pool ID in it, we will need the key for any action we take.
Image without caption
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.

3. Add a Policy to the Created IAM Role

To enable browser script access to Amazon Polly for speech synthesis, use the unauthenticated IAM role created for your Amazon Cognito identity pool. This requires you to add an IAM policy to the role.
For more information on IAM roles, see Creating a Role to Delegate Permissions to an AWS Service in the IAM User Guide.
To add an Amazon Polly policy to the IAM role associated with unauthenticated users:
  • In the navigation panel on the left of the page, choose Roles.
Image without caption
  • In the list of IAM roles, click on the link for the unauthenticated identities role previously created by Amazon Cognito.
Image without caption
  • In the Summary page for this role, choose to Attach policies.
Image without caption
  • In the Attach Permissions page for this role, find and then select the check box for AmazonPollyFullAccess.
Image without caption

4. Create your first S3 bucket

  • In the left navigation panel, choose Buckets:
Image without caption
  • Choose to Create bucket. The Create bucket page opens:
Image without caption
The bucket name must be created with the next conditions:
  • The name should be between 3 and 63 characters long.
  • Consist only of lowercase letters, numbers, dots (.), and hyphens (-). For best compatibility, we recommend that you avoid using dots (.) in bucket names, except for buckets that are used only for static website hosting.
  • The name should begin and end with a letter or number.
After you create the bucket, you cannot change its name. For more information about naming buckets, see Bucket naming rules.
IMPORTANT! Avoid including sensitive information, such as account numbers, in the bucket name. The bucket name is visible in the URLs that point to the objects in the bucket.
  • For Region, choose the AWS Region where you want the bucket to reside. To minimize latency and costs and address regulatory requirements, choose a Region close to you. Objects stored in a Region never leave that Region unless you explicitly transfer them to another Region.
  • For a list of Amazon S3 AWS Regions, see AWS service endpoints in the Amazon Web Services General Reference.
  • Under Object Ownership, to disable or enable ACLs and control ownership of objects uploaded in your bucket, choose one of the following settings:

ACLs disabled

  • Bucket owner enforced – ACLs are disabled, and the bucket owner automatically owns and has full control over every object in the bucket. ACLs no longer affect access permissions to data in the S3 bucket. The bucket uses policies to define access control.

ACLs enabled

  • Bucket owner preferred – The bucket owner owns and has full control over new objects that other accounts write to the bucket with the bucket-owner-full-control canned ACL.
    • If you apply the bucket owner preferred setting, to require all Amazon S3 uploads to include the bucket-owner-full-control canned ACL, you can add a bucket policy that allows only object uploads that use this ACL.
  • Object writer – The AWS account that uploads an object owns the object, has full control over it and can grant other users access to it through ACLs.
  • Under Block Public Access settings for this bucket, choose the Block Public Access settings that you want to apply to the bucket. We recommend that you keep all settings enabled unless you know that you need to turn off one or more of them for your use case, such as to host a public website. The Block Public Access settings that you enable for the bucket are also enabled for all access points that you create on the bucket. For more information about blocking public access, see Blocking public access to your Amazon S3 storage.
  • (Optional) Under Bucket Versioning, you can choose if you wish to keep variants of objects in your bucket. For more information about versioning, see Using Versioning in S3 buckets. To disable or enable versioning on your bucket, choose either Disable or Enable.
  • (Optional) Under Tags, you can choose to add tags to your bucket. Tags are key-value pairs used to categorize storage. To add a bucket tag, enter a Key and optionally a Value and choose to Add Tag.
  • Under Default encryption, choose Edit.
  • To configure default encryption, under the Encryption key type, choose one of the following ⚠️Please see in our screenshot how we create our bucket
Image without caption

5. Setting CORS and Politics.

CORS Configuration is required for the case when your resources should not to be accessed by external resources. For example, you set domain "https://your-domain/" in cross, this means that only apps with the domain "https://your-domain/" will be able to access AWS Bucket. ⚠️There are two ways for set corss-origin and bucket policy
  • Set corss-origin and bucket policy from Bubble.
  1. On a test page in Bubble app, add a button and add the action "Set standard Cross-origin".
Image without caption
2. In AllowedOrigin - Enter the domains to which you want it to have access to the AWS bucket. 3. AllowedMethod - Check the checkbox for the methods to which the domain has access. - GET - allow files to be accessed. - PUT - allow files to be uploaded file. - DELETE - allow files to be deleted. - POST - allow files to be uploaded file. 2. Go to Preview and click our button with the action “Set standard Cross-origin” 3. Now, try to upload a file and if the upload is successful you can delete this page.
Second mode: Manual setting
Add security to your AWS bucket by configuring policies on the 'Permissions' tab:
Image without caption
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.
Image without caption
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 to 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:
Image without caption
Here's a code example (JSON):
javascript
{ "Version": "2012-10-17", "Statement": [ { "Sid": "AddPerm", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*", "Condition": { "StringLike": { "aws:Referer": "https://zeroqode-demo-02.bubbleapps.io/*" } } }, { "Sid": "AddPerm2", "Effect": "Allow", "Principal": "*", "Action": "*", "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*" } ] }
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, since this documentation presents only our example of the settings.
3. In the Access control list (ACL) area make sure that all the options look like the image below to match our configuration:
Image without caption
4. Use the 'Cross-origin resource sharing' area to configure the CORS policy for the S3 bucket.
Image without caption
To configure access from all domains, you can use the following JSON for the CORS policy:
javascript
[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET", "PUT", "DELETE", "POST" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [ "ETag" ], "MaxAgeSeconds": 30000 } ]
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 more securely.
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://)
javascript
[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET", "PUT", "DELETE", "POST" ], "AllowedOrigins": [ "https://yourdomain.com", "https://yourdomain.bubbleapps.io" ], "ExposeHeaders": [ "ETag" ], "MaxAgeSeconds": 30000 } ]
⚠️
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.html https://docs.aws.amazon.com/AmazonS3/latest/user-guide/add-cors-configuration.html ❕https://docs.aws.amazon.com/AmazonS3/latest/dev/example-bucket-policies.html

7. First test of the key and the plugin settings

  • Put on a page the plugin's element and text element, in the text element display the state "file URL”.
Image without caption
  • Now you try to upload a file, if you get all with success, your page will be shown the file URL
Image without caption
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

Plugin Elements Proprieties

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.

File uploader element

This element lets you easily upload files into your S3 Bucket using the User Interface.
Image without caption

Element properties

  1. Identity Pool ID - here you can the identity pool id that we have saved on our computer. Pls be attentive that the value in this field is combined with the region and Identity Pool ID separated by colon (region: identity pool id)
  1. Bucket Name - The name of the bucket in AWS.
  1. Placeholder - default text description that will be displayed in the editor until there is something to preview
  1. Max file size (MB) - maximum file size for each file (in MB)
  1. Max timeout (s) - maximum time that the app will wait for a file to upload; if the file doesn't get uploaded during this time, the upload request will be cancelled
  1. Enable preview - checkbox; if checked, enables preview for the uploaded files
  1. Create image thumbnails - checkbox; if checked, enables image thumbnail creation
  1. Show remove/cancel button - checkbox; if checked, the Remove/Cancel button will appear for each of the uploaded files, so you can remove them
  1. Folder structure - this defines the way the files are stored in the S3 bucket. Available values: "uuid_filename" - the Unique ID will be added to the file name; "UUID/filename" - the file will be added to a new folder that will have a Unique ID as a name, while the file name will remain unchanged; "folder_name/uuid_filename" - the folder name indicated in the next property will be used, and the Unique ID will become part of the file name; if this value is selected, but the 'Folder name' property is not set or is set to a dynamic value that resolves to 'null', the folder name 'unknown' will be used
  1. A folder name - folder name to be used for files upload; is used only if the above property is set to 'folder_name/uuid_filename'; if the folder name resolves to 'null', the name 'unknown' is used
  1. Add prefix to the filename - checkbox; if checked, file names will get custom prefixes to make it easier to locate them on S3 Bucket
  1. Filenames prefix - custom prefix to add to file names; is applied only if the 'Add prefix to filename' checkbox is checked
  1. Many files - checkbox; if checked, will allow users to upload multiple files at once
  1. File extensions - used to specify allowed file extensions for the files to be uploaded to the S3 bucket; to allow all file extensions, set it to 'all'
  1. Thumbnail method - dropdown; available values: contain, crop. Method to be used when creating thumbnails; it defines how the overlapping parts of the image preview will be handled
  1. Thumbnail width (px) - width of the image thumbnail (in px), to best fit your design
  1. Thumbnail height (px) - the height of the image thumbnail (in px), to best fit your design
  1. Remove button caption - text that will be displayed on the Remove button
  1. Cancel button caption - text that will be displayed on the Cancel button
  1. Allow Image Cropping (Single File) - checkbox; if checked, will allow image cropping (use it only if the “Many Files” checkbox is unchecked)
  1. Aspect ratio - aspect ratio for cropping
  1. Allow image processing - checkbox; if checked, will allow image processing
  1. Image resize method - dropdown; available values: crop, contain. Method to be used when processing images
  1. Image resize quality - dropdown; available values: 0.2,0.4,0.6,0.8,1Quality of the resized image. *to use this parameter for a single image, enable the "Many files" checkbox and set the value of the "Max Files" field to one
  1. Image resize Height - resized image height
  1. Image resize Width - resized image width
  1. Crop if the size is smaller than Image Resize Width or Height - checkbox; if checked, will allow cropping even if the cropped image size is smaller than the Image Resize Width or Height
  1. Crop modal title - the title of the Crop modal window
  1. Crop Save Button Caption - text that will be displayed on the Save button in the Crop modal window
  1. Crop Cancel Button Caption - text that will be displayed on the Cancel button in the Crop modal window
  1. Initial Value - file to be uploaded to AWS initially, when the page with the plugin loads (optional)

Element actions

  1. Reset input - used to reset the user input in the uploader

Element events

  1. an error occurred - is triggered when an error occurs
  1. uploading is finished - is triggered when file uploading is finished
  1. the initial value is set - is triggered if the initial value is set for this uploader element

Element states

  1. File URL - URL of the uploaded file
  1. List of file URLs - list of uploaded file URLs
  1. File Name - the name of the uploaded file
  1. List of file names - list of uploaded files names
  1. Filesize (KB) - uploaded file size (in KB)
  1. List of files sizes (KB) - list of uploaded file sizes (KB)
  1. Progress of files upload (%) - progress of the total file upload
  1. Upload progress of current file - progress of the current file upload
  1. Images Width - width of the image (only for image files)
  1. Images Height - the height of the image (only for image files)
  1. Too Big Files Names - names of the files that are too big for the current upload
  1. Cropped image width - width of the cropped image (only if cropping is allowed)
  1. Cropped image height - the height of the cropped image (only if cropping is allowed)
  1. Initial Value URL - URL of the file set as the plugin element Initial Value
  1. Error message - error message in case of an error

File Upload No GUI element

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:
Image without caption

Element properties

Image without caption
  1. Identity Pool ID - here you can the identity pool id that we have saved in our computer. Pls be attentive that the value in this field is combined with the region and Identity Pool ID separated by colon (region: identity pool id)
  1. Bucket Name - The name of the bucket in AWS.
  1. Title - the title of the File Upload No GUI element
  1. Unique file prefix format - dropdown; available values: uuid_, zq_randomThe unique prefix format you want to be used when adding a unique id to the file names when they are uploaded to the bucket.
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.

Element actions

  1. Upload File - is used to upload a file.
Action property:
  • file - indicate here the URL of the file to be uploaded

Element events

  1. Upload Start - is triggered when the upload is started
  1. Upload End - is triggered when the upload is ended (whether successfully or with an error)
  1. Error - is triggered if an error occurs during the upload

Element states

  1. URL - URL of the uploaded file
  1. Name - a name of the uploaded file
  1. Size - the size of the uploaded file
  1. Type - file type of the uploaded file
  1. Error - error message in case the file upload resulted in an error

S3 Objects

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.
Image without caption

Element properties

  1. Identity Pool ID - here you can the identity pool id that we have saved on our computer. Pls be attentive that the value in this field is combined with the region and Identity Pool ID separated by colon (region: identity pool id)
  1. Bucket Name - The name of the bucket in AWS.

Element actions

  1. Get all files from s3 - is used to get information about all the files from an S3 bucket or all the files from a certain folder on the bucket
Action properties:
  • A folder name - the name of the folder on the S3 bucket you want to get the files from. If left empty, the action will get all the files from the bucket

Element events

  1. bucket's objects are loaded - is triggered once the Get all files from s3 action finished execution

Element states

  1. List of file URLs - list of URLs of all the files on the S3 bucket
  1. List of filenames - list of filenames of all the files on the S3 bucket
  1. Last Modified - list of last modified dates for all the files from the S3 bucket
  1. List of file size (MB) - list of file sizes for all the files on the S3 bucket

Plugin actions

1. Delete the file

Image without caption
This action should be used in order to delete one file from an S3 Bucket
Action properties:
  1. Identity Pool ID - here you can the identity pool id that we have saved on our computer. Pls be attentive that the value in this field is combined with the region and Identity Pool ID separated by colon (region: identity pool id)
  1. Bucket Name - The name of the bucket in AWS.
  1. Key - URL of the file to be deleted

2. Delete Files

This action should be used in order to delete a list of files from an S3 Bucket
Action properties:
  1. Identity Pool ID - here you can the identity pool id that we have saved in our computer.
  1. Bucket Name - The name of the bucket in AWS.
  1. Files List - list of files to be deleted
  1. Using URLs - checkbox, check it if you want to pass into the 'Files List' property a list of file URLs

Workflow/settings Example

  1. File uploader element example To work with the 'File uploader' element, place it on the page and configure the settings according to your requirements. Here is just one of many possible examples:
Image without caption
Image without caption
Image without caption
2. S3 Objects element example

Example workflow with 'S3 Objects' element.

Place a button on the page and give it a name (for example, 'Get Files'). Then trigger the following workflow on this button click:
Image without caption
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.
Image without caption
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:
Image without caption
After the workflow has run, the indicated files will be deleted from the S3 Bucket.

Changelogs

Update: 12/29/2020 –
  1. Changes to File uploader element:
  • Added 'Folder name' property
  • Added 'folder_name/uuid_filename' value for the 'Folder structure' property
2. Changes to S3 Objects element:
  • Added 'Folder name' property to 'Get all files from s3' element action
3. Changes .to File Upload No GUI element:
  • Added 'Unique file prefix format' property
4. Fixed issue with special characters in file names in SafariUpdate: 12/01/2021 -
  • Fixed the 'File Upload No GUI' element bug in case of multiple visual elements on the page
Update: 04/03/2021 -
  • Fixed the problem with height in the reset function
Update: 19/04/2021 -
  • fixed problems with any size
Update: 26/04/2021 -
  • encoding URL for special character
Update: 05/05/2021 -
  • Standardization the logic for encode/decode S3 object
Update: 07/06/21 - Version: 1.76.0
  • Minor fixed problem with 'Allow Image Cropping
Update: 19/06/21 - Version 1.77.0
  • Has been updated documentation for fields
Update: 06/07/21 - Version 1.78.0
  • All areas of the element have become clickable
Update: 16/07/21 - Version 1.79.0
  • Fixed the problem with the signature
Update: 20.11.21 - Version 1.82.0
  • Improved NoGui element with multiple files uploads and selecting the folder.
Update: 06.12.21 - Version: 1.84.0
  • Improvement with image orientation correction function.
Update: 14.12.21 - Version: 1.85.0
  • Fixed problem with the area clickability.
Update: 17.12.21 - Version: 1.86.0
  • Fixed problem with the dynamic prefix.
Update: 15.02.22 - Version: 1.87.0
  • Fixed problem with removing. (DOT) from the file URL"
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".
Update 22.08.22 - Version: 1.97.0.
  • “Added new action for delete files in backend"
Update 02.09.22 - Version: 1.99.0
  • "Fixed problem with deleting files”
Update 12.09.22 - Version 1.101.0
  • added max files limit and event "file limit exceeded”
Update 26.09.22 - Version: 1.103.0
  • Fixed event "AWS Uploading is finished" and added the "Display text title only" field.
Update 03.10.22 - Version: 1.104.0
  • Fixed event "uploading is finished”
Update 04.10.22 - Version: 1.105.0
  • Fixed the "Upload File" action
Update 26.10.22 - Version: 1.107.0
  • Fixed the "Allow image processing" option and minor fixes
Update 14.11.22 - Version: 1.110.0
  • Added "List of FileNames Original" state
Update 22.11.22 - Version: 1.111.0.
  • Fixed Crop pop-up and fixed Prefix
Update 28.11.22 - Version: 1.112.0
  • Fixed Crop pop-up
Update 9.12.22 - Version: 1.113.0
  • minor fixes
Update 12.12.22 - Version: 1.114.0
  • minor fixes
Update 19.12.22 - Version: 1.115.0
  • Fixed file uploader height when "collapse when hidden" is checked.
Update 29.01.23 - Version: 1.117.0
  • Fixed uploading images in HEIC format
Update 07.02.23 - Version: 1.119.0
  • Added “Upload Files” action, “Hide ScrollBar” field, and fixed thumbnail size
Update 23.02.23 - Version: 1.122.0
  • Fixed Crop Popup and styles with new responsive
Update 6.03.23 - Version: 1.123.0
  • Added Event "uploading is stared”
Update 11.04.23 - Version: 1.126.0
  • Improved the "cancel button" on a crop modal
Update 15.05.23 - Version: 1.128.0
  • Fixed "Placeholder" field
Update: 31.05.23 - Version 1.129.0
  • Improved API keys security
Update: 12.06.23 - Version 1.30.0
  • Added "Delete Folder Backend" action
Update: 14.06.23 - Version 1.131.0
  • the error message was made more user friendly
Update: 27.06.23 - Version 1.134.0
  • the “Upload file” action was fixed
Update: 27.06.23 - Version 1.135.0
  • added documentation for the "identity_pool_id" field
Update: 11.07.23 - Version 1.137.0
  • Fixed the "Reset input" action in the "File uploader" element
Update: 19.07.23 - Version 1.139.0
  • Fixed issue with compressing images from mobile devices.
Update: 24.07.23 - Version 1.140.0
  • Added field: "Disable Preview”
Update: 27.07.23 - Version 1.141.0
  • Fixed scroll of the "File uploader" element
Update: 12.09.23 - Version 1.143.0
  • Updated field description "Image resize quality"