Demo to preview the settings
Introduction
This plugin allows uploading files from your Bubble app to any cloud whose API is compatible with AWS S3 SDK (Oracle Cloud, AWS S3, Zenko Cloudserver, Scality S3, STORIJ cloud, Wasabi, Yandex s3 bucket, ect…). Add an awesome file/image uploader to your app!! Supports live preview, image/file size limits, file type, and much more!
Since the plugin is designed to be compatible with a large number of cloud storages, an example of Wasabi setup will be presented here (all these platforms are similar in settings).
How to setup
- Create an account on the desired Cloud storage which is compatible with the AWS SDK.
- Go to the Access Keys and create a new access key.
example: Created key in Wasabi
- Insert the access key/secret from the plugins tab Access key ID and Secret Access Key.
Plugin Element Proprieties
The plugin contains the Uploader visual element which should be used on a page.
- An endpoint is an access point through which external applications or services can communicate with a specific AWS service. An endpoint parameter is a value configured or passed to an endpoint to customize the behavior or request that is sent.
S3 endpoint parameters can include things like:
Region: Specifies the region in which the bucket is located (for example, us-west-1).
Bucket name: the name of the bucket you want to access.
- Bucket - Insert the name of the S3 Bucket. For uploading files to specific folders, append a slash "/" and folder name. Ex.: "bucket/foldername
- Bucket region - cloud creates buckets in a Region specified by you. To optimize latency, minimize costs, or address regulatory requirements, choose any Region that is geographically close to you. For example, if you reside in Europe, you might find it advantageous to create buckets in the Europe (Ireland) or Europe (Frankfurt) Regions.
- Image quality- the quality of the output image is supplied as a value between 0 and 100.
- Max Files: Maximum number of files.
- Accepted File Types: File extensions - Enter extensions for validation.
- Allow File Size Validation- enables or disables file type validation.
- File Size (KB/MB)- The maximum size of a file for example 100MB or 100KB.
- Total File Size (KB/MB)- Maximum size of all files in the list, same format as File Size
- Allow Image Preview- enable or disable preview mode.
- Allow Image Resize- enable or disable image resizing. If disabled the proprieties for resizing will not work.
- Allow Image Crop- enable or disable image cropping. If disabled other proprieties related to cropping will not work.
- Image Crop Aspect Ratio: The aspect ratio of the crop in human-readable format, for example:'1:1' or '16:10'
- Image Resize Upscale: Set to false to prevent upscaling of images smaller than the target size
- Image Resize Target Width- the output width in pixels.
- Image Resize Target Height- the output height in pixels.
- Image Resize Mode- the method by which the images are resized. Choose between '
force', 'cover', or 'contain'.forcewill ignore the image aspect ratio.coverwill respect the aspect ratio and will scale to fill the target dimensions.containalso respects the aspect ratio and will fit the image inside the set dimensions. All three settings will upscale images when there are smaller than the given target dimensions.
- Instant Upload - Immediately upload new files to the server.
- Uploader text: Example: "Drag & Drop your files or Browse".
- Label File Type Not Allowed: A Message is shown when an invalid file is added.
- Label File Size Exceeded: Status message shown when a large file is dropped.
- Label Max File Size: A detail message is shown when the max file size was exceeded.
- Label Total File Size Exceeded: Status message shown when the total file size exceeds the maximum.
- Label Total File Size: The detail message shows the total file size exceeds the maximum.
- Font color - set the color of the text for the uploader.
- Font color hover - set the text color of hover for the uploader.
- Background color - set the background color for the uploader.
- Background Color hover - set the background color of the hover for the uploader.
Element Actions
- Delete Files - Delete files from your cloud.
- Reset input - Cleans the input of all files.
Element Events
- Deleted with success - This event will let you know that the file has been deleted.
- Loaded successfully - This event indicates that all pending or uploaded files have been uploaded.
Exposed States
The plugin returns the following states:
- Files Name - The list of the names of the uploaded files.
- File -returns the URL of the file.
- Error - returns an error.
- Max Files - Returns yes/no value when max files are in the element.
- Files Size - List of uploaded file sizes.
- Files URLs - List of uploaded files’ URLs.
