• 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

⚠️HEIC images require a license to be displayed and worked with on the web, which means that most modern browsers cannot utilise the crop feature with HEIC images. If your use case requires this functionality, please note that Safari on iOS, iPadOS, and macOS is the only browser that supports it currently.

Upload File

Used to upload a file

Title	Description	Type
file	The file to be uploaded	File, Required

Upload Files

Used to upload multiple files

Title	Description	Type
files	source files for uploading	File, Required

Begin upload from input

Used to upload a file from a input

Reset uploader

Resets the file uploader

Refresh Get all files from s3

Used to get information about all the files from an S3 bucket or all the files from a certain folder on the bucket

Title	Description	Type
Folder name	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	Text, Optional

Generate SignURL

Generates a Signed Url

Title	Description	Type
File Url	Url of the file	Text, Required
Expiration Time	Expiration Time in seconds	Number, Required

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:

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:

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.

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:

After the workflow has run, the indicated files will be deleted from the S3 Bucket.

NEW BETA ELEMENTS❤️‍🔥

This BETA elements allows you to upload files directly to AWS S3 using pre-signed URLs. This documentation details the necessary steps for configuring the plugin and using it, including generating pre-signed URLs and setting up actions for uploading files to AWS S3.

File uploader element BETA

This element lets you easily upload files into your S3 Bucket using the User Interface

⚠️HEIC images require a license to be displayed and worked with on the web, which means that most modern browsers cannot utilise the crop feature with HEIC images. If your use case requires this functionality, please note that Safari on iOS, iPadOS, and macOS is the only browser that supports it currently.

Element properties

Title	Description	Type
Folder Structure	Structure to be used for uploaded files. If “folder_name/uuid_filename” and folder_name/filename” is chosen, provide the ‘Folder name’ value below. If in this case the ‘Folder name’ is not indicated, the folder name ‘unknown’ will be used Available options: uuid/filename, uuid_filename, folder_name/uuid_filename, folder_name/filename	Dropdown
Folder Name or Path	The name to be used for the user folder on S3 bucket. Is used only if the ‘Folder structure’ property is set to ‘folder name/uuid_filename’ and ‘folder_name/filename’.	Text (optional)
Add Prefix to File Name	if checked, file names will get custom prefixes to make it easier to locate them on S3 Bucket.	Checkbox (yes/no)
File Names Prefix	Add a prefix. For prefix do not use any special characters like: ! $ # @ etc …	Text (optional)
Rename File	Works only with one file. If selected uploading multiple files, ALL files will be renamed the same.	Text (optional)
Ignore Hidden Files	When you upload a folder, and in it can will be hidden files, and they will not upload in AWS.	Checkbox (yes/no)
	—–Preview Settings—-
Placeholder	default text description that will be displayed in the editor until there is something to preview	Text
Disable Preview	If cheked, a file preview and captions are disabled.	Checkbox (yes/no)
Cancel Button Caption	If specified then the caption for the Cancel button will be applied. If empty, the button will not appear.	Text
Remove Button Caption	If specified then the caption for the Remove button will be applied. If empty, the button will not appear.	Text
Resizable Element	When uploading a lot of files the element will resize.	Checkbox (yes/no)
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.	Checkbox (yes/no)
This Input is Clickable	the dropzone element itself will be clickable	Checkbox (yes/no)
	—–Files’ Restrictions—–
Max File Size (mb)	Max file size (mb)	Number
Text when File Too Big	The text that will be displayed when the file size is too big	Text
Max Files	Maximum number of uploaded files.	Number (optional)
Text when Max Files is Exceeded.	The text will be displayed when Max Files is exceeded.	Text
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	Text
Text when Invalid File Type	The text will be displayed when invalid file type.	Text
	—–Image Resize Before Uploading—–
Allow Image Resizing	If checked, the uploaded images will be resized according to the filed values below.	Checkbox (yes/no)
Image Resize Width	If set, images will be resized to these dimensions before uploaded	Number (optional)
Image Resize Height	If set, images will be resized to these dimensions before uploaded	Number (optional)
Image Resize Method	How the images should be scaled down in case both, “Image Resize Width” and “Image Resize Height” are provided. Available options: crop, contain	Dropdown (optional)
Image Resize Quality	If set, images quality will be resized to before uploaded Available options: 0.2, 0.4, 0.6, 0.8, 1	Dropdown (optional)
	—–Crop Settings—–
Allow Image Cropping	TODO: Fill in description	Checkbox (yes/no)
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).EX: 16 / 9	Text
	-----Style Crop Window- - —-
Crop Window Title	Crop modal title	Text (optional)
Crop Save Button Caption	Crop window save button caption.	Text (optional)
Save Button Color	Color for SAVE Button	Color (optional)
Save Button Text Color	Color for the text in the SAVE button	Color (optional)
Crop Cancel Button Caption	Crop window cancel button caption.	Text (optional)
Cancel Button Color	Color for Cancel Button	Color (optional)
Cancel Button Text Color	Color for Text Button	Color (optional)
	-----Crop Hover Button settings---
Save Button Color	Color for SAVE Button at hover event	Color (optional)
Save Button Text Color	Color for the text in the SAVE button at hover event	Color (optional)
Cancel Button Color	Color for Cancel Button at hover event	Color (optional)
Cancel Button Text Color	Color for the text in the Cancel button at hover event	Color (optional)
Initial Value	File to be uploaded to AWS initially	File (optional)

Element actions

Reset input

sed to reset the user input in the uploader

Upload file File Uploader - This action that will upload the files from the "File Upload No GUI (BETA)" element.

Pre-signed upload URL -These URLs are generated by the "Generating a Pre-signed URL (BETA)" action and are necessary for the upload action to upload files from the "File Uploader" element. Pre-signed Delete URL- These state that are released by the "Generating a Pre-signed URL (BETA)" action, He needs the upload action to be able to upload the files from the "File Uploader" element

Element events

Title	Description
An Error Occurred	When an error occurred
Current file uploaded	When uploading is finished
Initial Value is Set	When initial file for uploading is set
Added Max Files Limit and Event “file limit exceeded”	When upload files more limit files
Uploading is Start	When uploading is start
Start Cropping	When start Cropping
End Cropping	When end cropping.
All files uploaded	When all file are uploaded.
Generation URL	To this event, we must attach the "Generating a Pre-signed URL (BETA)" action and “Upload file” action of the element

Element states

Title	Description	Type
File URL	File URL	Text
Error Message	Error message	Text
List of File Names in AWS	List of file names	Text
File Name in AWS	File Name	Text
List of File URL	List of file URL	Text
Progress of Files Upload (%)	Progress	Number
Upload Progress of Current File	Progress	Number
List of Files Sizes (KB)	List of files sizes	Number
File Size (KB)	File size	Number
Images Width	Images width	Number
Images Height	Images Height	Number
Too Big Files	Too big files names	Text
Cropped Images Width	Width of the cropped image	Number
Copped Images Height	Height of the cropped image	Number
Initial Value URL	URL of the file initially added for upload	Text
File Name Original	Name of the last file uploaded	Text
List of File Names Original	List of original file names	Text
List of Files Type	List of file's type what was uploaded	Text
File Type	The type of last file which was uploaded	Text
Size File After Processing	The size of a file after cutting and resizing	Number
File Path	This is a state that you must send to the action "Generating a Pre-signed URL (BETA)”	Text

File Upload No GUI (BETA)

Title	Description	Type
Placeholder	the title of the File Upload No GUI element	Text
Unique file prefix format	Choose the unique file id format to be used for the uploaded files Available options: uuid_, zq_random	Dropdown
Folder name	the directory within the S3 bucket where the uploaded files will be stored. If this property is provided, all uploaded files will be saved in the specified folder. If not provided, files will be stored at the root level of the bucket.	Text (optional)
Display text placeholder only	If checked, in uploader will show only placeholder instead of file name after uploading	Checkbox (yes/no)
Disabled	If checked the file input is disabled, and users cannot interact with it.	Checkbox (yes/no)
Instant upload	determines whether files should be uploaded immediately after they are selected. When this property is checked, the upload process starts automatically as soon as the user selects a file. When unchecked, the upload process must be triggered manually.	Checkbox (yes/no)

Upload File

This action that will upload the files from the "File Upload No GUI (BETA)" element.

Pre-signed upload URL -These URLs are generated by the "Generating a Pre-signed URL (BETA)" action and are necessary for the upload action to upload files from the "File Uploader" element.

Begin upload from input

Used to upload a file from a input

Reset uploader

Resets the file uploader

• Adding the Element to the Page
• Open the page editor and navigate to the page where you want to add the AWS file upload functionality.
• Select the “File uploader (BETA)” or “File Upload No GUI (BETA)” elements from the component library.
• Add the element on the page.

• Configuring the "Generation URL" Event
• In the Workflow section, add a new event by selecting "Generation URL" from the list of available events.
• Select the wanted Uploader element from the Element dropdown.

• Adding the "Generate Pre-Signed URL (BETA)" Action
• In the "Generation URL" event, add a new action.
• Select "Generate Pre-signed URL (BETA)" from the list of available actions.

• Configuring Fields for "Generate Pre-signed URL"
• Bucket Name - Bucket name from AWS where to upload the files.
• File Path - This field requires the path of the file in order to upload it. Both new elements have a new state that returns this information.

• Adding the "Upload File" Action
• After configuring the "Generate Pre-signed URL" action, add a new action under the same "Generation URL" event.
• Select "Upload File" from the list of available actions for the new elements.

• Configuring Fields for "Upload to AWS"

• Element - Select the wanted element from the dropdown.

• Pre-signed upload URL - Enter the Pre-signed URL for uploading the file as the result of the previous “Generate Pre-signed URL" action. This URL will be used to upload the new file to AWS S3.

• Delete Sign URL: Enter the Pre-signed URL for deleting the file (if applicable) as the result of the previous “Generate Pre-signed URL" action. This URL will be used to delete the previously uploaded file from AWS S3.

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

• Hand cursor over No GUI element was added

• Changing the rename file option to optional

• AWS - Hand cursor over No GUI element was added

• Was updated signature Version

• New Generate SignedUrl action

• Added new status "File size after processing”

• Minor update

• The possibility to change the initial value from condition

• Fixed the problem with cropping when the image is big

• Minor update

• Fixed AWS File Uploader

• Added new actions (Get All Files, Generate a Pre-signed URL (BETA))

• Minor update (Marketing update)

• Adding the folder file

• The ability to upload files larger than 5 GB.

• The field "Cropping Quality" was added

• Improvement logic for big files

• The issue with rotation during resizing for iOS with HEIC extension has been fixed

• Fixed problem with NoGUI element uploading same file multiple times