• In the AWS services search bar at the top, type "S3" and click on "S3" in the dropdown to navigate to the S3 Dashboard or open this link

• Choose to Create bucket. The Create bucket page opens:

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

• 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:

• 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.
To require that all new buckets are created with ACLs disabled by using AWS Identity and Access Management (IAM) or AWS Organizations policies, see Disabling ACLs for all new buckets (bucket owner enforced).

• 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

• Navigate to Your Account: At the top-right corner of the AWS Management Console, you'll see your account name or number. Click on it to open the dropdown menu.

• From the dropdown, select the "Security Credentials" option.

• Access Keys Section: Once on the Security Credentials page, expand the "Access keys (access key ID and secret access key)" section.

• Create New Access Key:
-If you already have existing access keys, you'll see them listed here.
-To create a new access key, click the "Create New Access Key" button.

• Download Credentials: After creating a new access key, you'll have the option to download it as a .csv file. Save this file securely, as AWS will not show these credentials again for security reasons.

• Set cross-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".

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/*"
        }
    ]
}

javascript
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "DELETE",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 30000
    }
]

javascript
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "DELETE",
            "POST"
        ],
        "AllowedOrigins": [
            "https://yourdomain.com",
            "https://yourdomain.bubbleapps.io"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 30000
    }
]

• Put on a page the plugin's element and text element, in the text element display the state "file URL”.

• Now you try to upload a file, if you get all with success, your page will be shown the file URL

1. Access Key - the access key that is in the downloaded file.

2. Secret Key - the access key that is in the downloaded file.

3. Session token - is particularly used in situations where temporary authentication is needed, such as when an application needs to access AWS resources on behalf of the user but does not want to share the user's permanent credentials. In this case, the session token can be generated through an authentication and authorization process and then used to perform operations on AWS resources for a certain period of time.

5. Region - In AWS (Amazon Web Services), a "Region" is a specific geographical area where AWS has data centers.

6. Bucket Name - The name of the bucket in AWS.

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

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

4. Add prefix to the filename - checkbox; if checked, file names will get custom prefixes to make it easier to locate them on S3 Bucket.

5. Filenames prefix - custom prefix to add to file names; is applied only if the 'Add prefix to filename' checkbox is checked.

6. Ignore Hidden Files - Whether hidden files in directories should be ignored.

7. Placeholder - default text description that will be displayed in the editor until there is something to preview

8. Disable Preview - If cheked, a file preview and captions are disabled.

9. Cancel Button Caption - If specified then the caption for the Cancel button will be applied. If empty, the button will not appear.

10. Remove Button Caption - If specified then the caption for the Remove button will be applied. If empty, the button will not appear.

11. Resizable Element - When uploading a lot of files the element will resize.

12. Hide ScrollBar - If this checkbox is checked and you are uploading a large number of files and the element size is NOT resizable, the scrollbar will be hidden.

13. This Input is Clickable - the dropzone element itself will be clickable.

14. Max file size (MB) - maximum file size for each file (in MB).

15. Text when File Too Big - The text that will be displayed when the file size is too big.

16. Max Files - Maximum number of uploaded files.

17. Text when Max Files is Exceeded - The text will be displayed when Max Files is exceeded.

18. Accepted Files Type - Types of files accepted for uploading. This is a comma separated list of mime types or file extensions. Example:image/*,application/pdf,.psd.

19. Text when Invalid File Type - The text will be displayed when invalid file type.

20. Allow Image Resizing - If checked, the uploaded images will be resized according to the filed values below.

21. Image Resize Width - If set, images will be resized to these dimensions before uploaded.

22. Image Resize Height - If set, images will be resized to these dimensions before uploaded.

23. Image Resize Method - How the images should be scaled down in case both, "Image Resize Width" and "Image Resize Height" are provided.

24. Image Resize Quality - If set, images quality will be resized to before uploaded.

25. Allow Image Cropping - checkbox; if checked, will allow image cropping.

26. Aspect ratio - Define the initial aspect ratio of the crop box. By default, it is the same as the aspect ratio of the canvas (image wrapper).

27. Crop modal title - the title of the Crop modal window

28. Crop Save Button Caption - text that will be displayed on the Save button in the Crop modal window

29. Crop Cancel Button Caption - text that will be displayed on the Cancel button in the Crop modal window

30. Initial Value - file to be uploaded to AWS initially, when the page with the plugin loads

31. Rename File - Works only with one file. If selected uploading multiple files, ALL files will be renamed the same.

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

1. an error occurred - is triggered when an error occurs

2. uploading is finished - is triggered when file uploading is finished

3. the initial value is set - is triggered if the initial value is set for this uploader element

1. File URL - URL of the uploaded file

2. List of file URLs - list of uploaded file URLs

3. File Name - the name of the uploaded file

4. List of file names - list of uploaded files names

5. Filesize (KB) - uploaded file size (in KB)

6. List of files sizes (KB) - list of uploaded file sizes (KB)

7. Progress of files upload (%) - progress of the total file upload

8. Upload progress of current file - progress of the current file upload

9. Images Width - width of the image (only for image files)

10. Images Height - the height of the image (only for image files)

11. Too Big Files Names - names of the files that are too big for the current upload

12. Cropped image width - width of the cropped image (only if cropping is allowed)

13. Cropped image height - the height of the cropped image (only if cropping is allowed)

14. Initial Value URL - URL of the file set as the plugin element Initial Value

15. List of Files Type - List of file's type what was uploaded

16. File Type - The type last file which was uploader

17. Error message - error message in case of an error

1. Access Key - the access key that is in the downloaded file.

2. Secret Key - the access key that is in the downloaded file.

3. Session Token - It is the "Session Token" that our "Create Credentials" action gives you.

4. Bucket Name - The name of the bucket in AWS.

5. Title - the title of the File Upload No GUI element

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

1. Upload File - is used to upload a file.

• file - indicate here the URL of the file to be uploaded

1. Upload Start - is triggered when the upload is started

2. Upload End - is triggered when the upload is ended (whether successfully or with an error)

3. Error - is triggered if an error occurs during the upload

1. URL - URL of the uploaded file

2. AWS Name - AWS name of the uploaded file in

3. Size - the size of the uploaded file

4. Type - file type of the uploaded file

5. Error - error message in case the file upload resulted in an error

6. Original Name - The original name of the file

1. Access Key - the access key that is in the downloaded file.

2. Secret Key - the access key that is in the downloaded file.

3. Session token - is particularly used in situations where temporary authentication is needed, such as when an application needs to access AWS resources on behalf of the user but does not want to share the user's permanent credentials. In this case, the session token can be generated through an authentication and authorization process and then used to perform operations on AWS resources for a certain period of time.
Using the session token can contribute to the security of applications because it allows for limiting privileges and access duration for AWS resources, minimizing exposure of users' or applications' permanent credentials (get the temporary keys once using the "Create Temporary Credentials" action).

4. Region - In AWS (Amazon Web Services), a "Region" is a specific geographical area where AWS has data centers.

1. Bucket Name - The name of the bucket in AWS.

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

• 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

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

1. List of file URLs - list of URLs of all the files on the S3 bucket

2. List of filenames - list of filenames of all the files on the S3 bucket

3. Last Modified - list of last modified dates for all the files from the S3 bucket

4. List of file size (MB) - list of file sizes for all the files on the S3 bucket

1. Access Key - the access key that is in the downloaded file.

2. Secret Key - the access key that is in the downloaded file.

3. Session token - is particularly used in situations where temporary authentication is needed, such as when an application needs to access AWS resources on behalf of the user but does not want to share the user's permanent credentials. In this case, the session token can be generated through an authentication and authorization process and then used to perform operations on AWS resources for a certain period of time.
Using the session token can contribute to the security of applications because it allows for limiting privileges and access duration for AWS resources, minimizing exposure of users' or applications' permanent credentials (get the temporary keys once using the "Create Temporary Credentials" action).

4. Bucket Name - The name of the bucket in AWS.

5. Key - URL of the file to be deleted

1. Access Key - the access key that is in the downloaded file.

2. Secret Key - the access key that is in the downloaded file.

3. Session token - is particularly used in situations where temporary authentication is needed, such as when an application needs to access AWS resources on behalf of the user but does not want to share the user's permanent credentials. In this case, the session token can be generated through an authentication and authorization process and then used to perform operations on AWS resources for a certain period of time.
Using the session token can contribute to the security of applications because it allows for limiting privileges and access duration for AWS resources, minimizing exposure of users' or applications' permanent credentials (get the temporary keys once using the "Create Temporary Credentials" action).

4. Bucket Name - The name of the bucket in AWS.

5. Files List - list of files to be deleted

• Duration Seconds - DurationSeconds is a parameter to specify how long the temporary keys created will be valid. Minimum value: 900 seconds (15 minutes), Maximum value: 3600 seconds (1 hour). returne: Access Key Id, Secret Access Key, Session Token, Expiration

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:

1. Changes to File uploader element:

• Added 'Folder name' property

• Added 'folder_name/uuid_filename' value for the 'Folder structure' property

• Added 'Folder name' property to 'Get all files from s3' element action

• Added 'Unique file prefix format' property

• Fixed the 'File Upload No GUI' element bug in case of multiple visual elements on the page

• Fixed the problem with height in the reset function

• fixed problems with any size

• encoding URL for special character

• Standardization the logic for encode/decode S3 object

• Minor fixed problem with 'Allow Image Cropping

• Has been updated documentation for fields

• All areas of the element have become clickable

• Fixed the problem with the signature

• Improved NoGui element with multiple files uploads and selecting the folder.

• Improvement with image orientation correction function.

• Fixed problem with the area clickability.

• Fixed problem with the dynamic prefix.

• Fixed problem with removing. (DOT) from the file URL"

• "fixed the problem with states Size, type, etc."

• updated endpoint for action "get files".

• “Added new action for delete files in backend"

• "Fixed problem with deleting files”

• added max files limit and event "file limit exceeded”

• Fixed event "AWS Uploading is finished" and added the "Display text title only" field.

• Fixed event "uploading is finished”

• Fixed the "Upload File" action

• Fixed the "Allow image processing" option and minor fixes

• Added "List of FileNames Original" state

• Fixed Crop pop-up and fixed Prefix

• Fixed Crop pop-up

• minor fixes

• minor fixes

• Fixed file uploader height when "collapse when hidden" is checked.

• Fixed uploading images in HEIC format

• Added “Upload Files” action, “Hide ScrollBar” field, and fixed thumbnail size

• Fixed Crop Popup and styles with new responsive

• Added Event "uploading is stared”

• Improved the "cancel button" on a crop modal

• Fixed "Placeholder" field

• Improved API keys security

• Added "Delete Folder Backend" action

• the error message was made more user friendly

• the “Upload file” action was fixed

• added documentation for the "identity_pool_id" field

• Fixed the "Reset input" action in the "File uploader" element

• Fixed issue with compressing images from mobile devices.

• Added field: "Disable Preview”

• Fixed scroll of the "File uploader" element

• Updated field description "Image resize quality"

• Major change at AWS connection

• Major change at AWS connection

• Fixed problem with dynamic folder name.

• Fixed problem with state "File URL”

• Fixed problem with Rotated images for mobile

• Was corrected the type of file in AWS

• fixed problem with calculation size file

• Improvement of the "File Upload No GUI" element with upload with sign URL, disable and start upload from WF

• Added delay for "reset" action

• The problems with the reset input action have been fixed

• Seated capture as undefined for media

• Fixed problem with delete file and files

• added function "Create Temporary Credentials" and adopted functions for work with temporary credential

• added new state in element "File upload NoGui", Original Name”

• Was added option 'rename file'

• Was added states list of file type and file type