> For the complete documentation index, see [llms.txt](https://dmitrii-vasiliev.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dmitrii-vasiliev.gitbook.io/docs/bubble-plugins-docs/wasabi-cloud-storage.md).
# Wasabi Cloud Storage
## Introduction
Wasabi Hot Cloud Storage is enterprise class, tier-free, instantly available storage and allows you to store an infinite amount of data affordably. Upload & manage files with your Wasabi account.
#### **Prerequisites**
You must have an account with Wasabi to interact with the API. Create your account at:
## How To Setup
Visit [wasabi.com](https://wasabi.com/) to sign up for their service, you will get an email with link to your console. In your Wasabi console go to Billing->Payment settings then add your Payment method. While you do receive a month free trial to upload private files, a paid account is required to upload public files.
Next, go to the Access Keys page & create a new access key.
Insert the access key/secret from the plugins tab.
Add the element 'Wasabi S3' on your page and configure any other preferences for uploading.
## Plugin fields, events, actions and states
Plugin contains 3 elements, 1 action and 1 API Call.
### Wasabi S3
Main element of plugin. Allow uploading and other interactions with Wasabi.
#### Fields
**`Type`** - Set this to 'File (Wasabi)'.
**`Type`** - Set this to 'Uploaded File (Wasabi)'.
**`Type`** - Set this to 'Retrieved File (Wasabi)'.
**`Private`** - Using access token has full control. No one else has access rights, not public. `Yes` or `No`
**`Bucket Name`** - The name of the Bucket you would like to upload to. Case sensitive.
**`Bucket Region`** - The region of where this Bucket is stored. Enter one of the following: us-west-1, eu-central-1, us-east-1, us-east-2.
**`Folder Structure`** - The folder structure of where this file should be saved (example: uploads) . You can also specify sub folders (eg: uploads/images). As a suggestion you could save the folder as current user/thing's unique id.
**`File Name Prefix`** - Prefix for the file name. Some special characters (for example: !$#@), will not upload correctly.
**`Input Text`** - Add text to the input, default Bubble typeface styles will apply. If you would like to stye your own input in Bubble, make your element hidden on the page & then use the workflow action to trigger input.
**`Accept`** - Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from or specify a group of file types like: audio/*, video/* image/\*. Defaults to all if empty. In the case of an extension not validating correctly you can also use the mime type here.
**`Max File Size`** - Total value for all files in bytes, 1000000 = 1MB (Megabyte) or 5000000000 is 5GB (Gigabytes). Defaults to any size if empty.
**`Max File Count`** - Max number of files the user can upload. Defaults to any amount if empty.
**`Auto Submit`** - Upload the files instantly to Wasabi S3 server.
**`Complete Reset`** - Reset progress & input when a file or all files have been uploaded successfully.
**`Compress Images`** - Select this option to compress the size of image files.
**`Compression Size`** - The size for image compression, this value is in KB.
**`Generate Preview`** - Output base46 urls for image files when 'Read Files' option is selected.
**`Multiple Files`** - Allow for uploading multiple files at once.
**`Read Files`** - Read the input's files and return Name, Extension, Last Modified, Parameters & Size that will be output into the state 'Files'. If generate previews is selected this will also return a base64 url for each image file. If complete reset is yes and auto submit is yes files will not be read.
**`Upload Directory`** - Allows the user to select 1 folder to upload, all child folders and files will be selected. This option is non-standard, supported by most newer browsers except IE.
**`Show Watermark`** - Only visible to you in the editor for design reference.
**`Watermark Image`** - The image you would like to display as your reference.
**`Filter File Names`** - Separate with space & comma between names if not dynamic. Only matched (case sensitive) names will be uploaded, the matching process happens first before calculating size filecount or reading any other file data. Leave empty to ignore this option.
#### States
**`Files`** - list of uploaded files. Contains info about file.
**`Files Count`** - Return number of uploaded files.
**`File Size Total`** - Return total size of uploaded files.
**`Upload Progress`** - Upload progress of files. From 0 to 100.
**`Last Uploaded Files`** - List of all uploaded files.
**`Retrieved Buckets`** - List of retrieved buckets returned by action **`Retrieve Buckets`**
**`Retrieved Files`** - List of retrieved files returned by action **`Retrieve Files`**
**`Is Ready`** - return **`true`** if element is ready
**`Is Dragged Over`** - if an file is being dragged over a valid drop target return **`true`** else return **`false`**
**`Is Mobile`** - return **`true`** if user device is mobile, else return **`false`**
**`Is Reading Files`** - while files is reading return **`true`** else return **`false`**
**`Is Uploading`** - if element now upload files to Wasabi return **`true`** else return **`false`**
**`Error`** - return text of error
**`Is Compressing Images`** - if element now compress images return **`true`** else return **`false`**
**`Is Retrieving Files`** - if element now retrieve files return **`true`** else return **`false`**
**`Is Deleting Files`** - if element now delete files return **`true`** else return **`false`**
#### Actions
1\) **`Trigger Input`** - emulate click on input and show file dialog.
2\) **`Upload`** - Start uploading files to Wasabi.
**Fields**:
* *`Redefine Fields`* - Selecting yes will use the fields on this action to upload as opposed to the element's fields. To use this option make sure bucket name, region have value.
* *`Private`* - Using access token has full control. No one else has access rights, not public.
* *`Bucket Name`* - The name of the Bucket you would like to upload to. Case sensitive.
* *`Bucket Region`* - The region of where this Bucket is stored. Enter one of the following: us-west-1, eu-central-1, us-east-1, us-east-2.
* *`Folder Structure`* - The folder structure of where this file should be saved (example: uploads) . You can also specify sub folders (eg: uploads/images). As a suggestion you could save the folder as current user/thing's unique id.
* *`File Name Prefix`* - Prefix for the file name. Some special characters (for example: !$#@), will not upload correctly.
3\) **`Reset File Uploader`** - Remove all files from this element. Reset states: **Files** ( to empty list ), **Files Count** (to 0), **File Size Total** (to 0), **Upload Progress** (to 0), **Is Uploading** (to false), **Is Reading Files** (to false).
**`Download File`** - download file from Wasabi.
**Fields:**
* *`Bucket Name`* - The name of the Bucket where the file is stored.
* *`Bucket Region`* - The region of where this file's Bucket is stored. Enter one of the following: us-west-1, eu-central-1, us-east-1, us-east-2.
* *`File Location`* - The location of the file you would like to download For example: user1/uploads/hello.txt
* *`Download Name`* - The name you would like to give to this file. Leave empty to use the original file name.
4\) **`Create Bucket`** - create new bucket.
**Fields:**
* *`Bucket Name`* - Must be unique, valid DNS name, 63 characters or less. Case sensitive.
* *`Bucket Region`* - Enter one of the following: us-west-1, eu-central-1, us-east-1, us-east-2.
5\) **`Delete Bucket` -** delete bucket.
**Fields:**
* *`Bucket Name`* - The name of the Bucket you would like to delete. Case sensitive.
* *`Bucket Region`* - The region of this Bucket is stored. Enter one of the following: us-west-1, eu-central-1, us-east-1, us-east-2.
{% hint style="warning" %}
You can't delete bucket with files**.**
{% endhint %}
6\) **`Retrieve Buckets` -** retrieve list with all buckets from your Wasabi.
7\) **`Reset Retrieved Buckets` -** set value of state **`Retrieved Buckets`** to empty list.
8\) **`Retrieve Files` -** retrieve all files from selected bucket.
**Fields:**
* *`Bucket Name`* - The name of the Bucket you want to look up. Case sensitive.
* *`Bucket Region`* - The region of where the Bucket is stored. Enter one of the following: us-west-1, eu-central-1, us-east-1, us-east-2.
* *`Location`* - Location for the files you want to retrieve, for example: uid/images/. Make sure "/" is trailing folder name with no extra spaces, case sensitive. Leave empty to list all files from Bucket.
9\) **`Reset Retrieved Files` -** set value of state **`Retrieved Files`** to empty list.
10\) **`Delete Files/Folders`** - Delete files and folders from selected bucket
**Fields:**
* *`Bucket Name`* - The name of the Bucket that holds these files and folders. Case sensitive.
* *`Bucket Region`* - The region of the Bucket that holds these files and folders. Enter one of the following: us-west-1, eu-central-1, us-east-1, us-east-2.
* *`Location/s`* - Location of files or folders, if not dynamic list then separated by comma and space (file1.png, uid/images/, uid/images/file2.png). For folders make sure "/" is trailing with no extra spaces, case sensitive. Use the Delete Bucket action to delete all files.
11\) **`Remove File From Input` -** remove file from element.
**Fields:**
* *`File`* - The file you would like to remove.
12\) **`Add Files To Input`** - add new files to element.
13\) **`Cancel Upload`** - cancel current files uploading
**Fields:**
* *`Reset after`* - `yes` or `no`
14\) **`Upload Base64`** - upload base64 encoded file to Wasabi.
**Fields:**
* *`Redefine Fields`* - Selecting yes will use the fields on this action to upload as opposed to the element's fields. To use this option make sure bucket name, region have value.
* *`Private`* - Using access token has full control. No one else has access rights, not public.
* *`Bucket Name`* - The name of the Bucket you would like to upload to. Case sensitive.
* *`Bucket Region`* - The region of where this Bucket is stored. Enter one of the following: us-west-1, eu-central-1, us-east-1, us-east-2.
* *`Folder Structure`* - The folder structure of where this file should be saved (example: uploads) . You can also specify sub folders (eg: uploads/images). As a suggestion you could save the folder as current user/thing's unique id.
* *`File Name Prefix`* - Prefix for the file name. Some special characters (for example: !$#@), will not upload correctly.
* *`File Name`* - Name for this file.
* *`Data URL`* - Base64 encoded data url.
### Progress Bar
Display graphicaly uploading status.
#### Fields
**`Percentage`** - current percent of upload. Can be number from 0 to 100
**`Background Color`** - Background color of bar
**`Progress Color`** - Color of progress bar
**`Inner Radius`** - Radius of background bar
**`Outer Radius`** - Radius of progress bar
### Data Size
Convert bytes to a more readable value
#### Fields
**`Bytes`** - Bytes to evaluate.
**`Decimal`** - Round to decimal place.
**`Explain`** - Explains the size abbreviation in brackets.
### Generate Presigned URL
All objects in your bucket, by default, are private. These objects are only accessible by the object owner’s permission. However, there might be instances where the object owner might have to share these objects with others by creating a pre-signed URL, using their own security credentials, for a specific duration of time to download the objects.
#### Fields
**`Bucket Name`** - The name of the Bucket you would like to upload to. Case sensitive.
**`Bucket Region`** - The region of where this Bucket is stored. Enter one of the following: us-west-1, eu-central-1, us-east-1, us-east-2.
**`Filename with path`** - Full path to file with filename. Example: "path/to/file/filename.png"
**`Timeslot`** - Timeslot to use for expires time.
{% hint style="info" %}
**Note:** month = 30 days.
{% endhint %}
**`Expires Time`** - The number of timeslot to expire the pre-signed URL operation in.
### Upload File To Wasabi From Another Cloud
This API Call allow to upload files to your Wasabi Cloud Storage from another cloud storage ( example: all uploaded in base files is saved to AWS S3 and you have URL of them ).
For api call to work you need to enter `Access Key` and `Secret Key` .
{% hint style="warning" %}
This API Call is in BETA mode. Max upload file size = 150MB. If you try to upload files larger response will be message with error text.
{% endhint %}
#### Fields
**`Private`** - Using access token has full control. No one else has access rights, not public. false or true.
**`Bucket_Name`** - The name of the Bucket you would like to upload to. Case sensitive.
**`Bucket_Region`** - The region of where this Bucket is stored. Enter one of the following: us-west-1, eu-central-1, us-east-1, us-east-2.
**`Folder_Structure`** - The folder structure of where this file should be saved (example: uploads) . You can also specify sub folders (eg: uploads/images). As a suggestion you could save the folder as current user/thing's unique id.
**`Filename_Prefix`** - Prefix for the file name. Some special characters (for example: !$#@), will not upload correctly.
**`Filename`** - FIle name to save on Wasabi S3 with extension ( .png, .mp3, etc.) )
**`URL_From_Another_Cloud`** - URL of file
#### Response
Return text containts url of file from wasabi cloud or error message.
## Restrict access to the bucket
{% hint style="info" %}
### Restricting access to a specific HTTP referer
Suppose that you have a website with a domain name (`www.example.com` or `example.com`) with links to photos and videos stored in your Wasabi bucket, **`YOUR_WEB_SITE_FULL_URL`**. By default, all the Wasabi resources are private, so only the account that created the resources can access them. To allow read access to these objects from your website, you can add a bucket policy that allows permission with a condition, that the get request must originate from specific webpages.
{% endhint %}
1. Go to your Wasabi console
2\. Go to bucket settings
3\. Go to tab "POLICIES"
4\. Add code to this area
```javascript
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": "s3:*",
"Resource": "*",
"Condition": {
"StringLike": {
"aws:Referer": "YOUR_WEB_SITE_FULL_URL"
}
}
}
]
}
```
And Save
## Quick setup
#### Place element on the page
#### Setup your element
{% hint style="success" %}
To correctly configure the fields named**`Type`**read the documentation attached to them.
{% endhint %}
#### Choose restrictions for uploading files
#### Change bucket
#### Customize the file type perceived by the element
{% hint style="info" %}
A **filename extension**, **file extension,** or **file type** is an identifier specified as a suffix to the name of a computer file. The extension indicates a characteristic of the file contents or its intended use.
[More Information...](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)
Example:
**Extensions:**
* `.jpg` - **JPEG** has been the most widely used image compression standard in the world.
* `.psd` - **Photoshop Document (PSD)** is a raster format for storing graphic information using lossless compression, created specifically for Adobe Photoshop and supporting all its capabilities.
* `.pdf` - **Portable Document Format** (**PDF**) is a file format developed by Adobe in 1993 to present documents, including text formatting and images, in a manner independent of application software, hardware, and operating systems.
* etc.
**Groups of file types:**
1. `audio/* -`any **audio** file.
2. `video/* -`any **video** file.
3. `image/* -`any **image** file.
{% endhint %}
#### You can allow Auto Submit (Auto upload files to Wasabi after selection) and skip the next steps.
{% hint style="info" %}
If you do not want the files to be automatically loaded, you need to set up an action for this action.
{% endhint %}
#### Check if Auto Submit is disabled (`"no"`)
#### Add a button or other element to trigger the action
#### And setup workflow
#### If `Redefine Fields` is "`no`" - workflow setup is finished.
{% hint style="info" %}
You have the option to change the trash can by reconfiguring the upload endpoint in the action. To do this, specify the value of the field "redefined fields" to yes and specify a new bucket.
{% endhint %}
## Advanced features
### How to preview files added to Wasabi S3 element
{% hint style="info" %}
All files added to the plugin element can be displayed in the repeating group
{% endhint %}
Place on the page repeating group. Set the **Type of content** to "`File (Wasabi)`", and set the **Data source** to the "`Files`" state returned by the Wasabi S3 element.
Now in the cells of the repeating group you have access to the data about the files.
{% hint style="warning" %}
The "`Preview`" state will contain the base64 of the loaded image only if "**Generate Preview**" is enabled in the element settings.
"`Preview`" state **contains previews for images only.**
{% endhint %}
### How to preview uploaded files
Place on the page repeating group. Set the **Type of content** to " `Uploaded File (Wasabi)`", and set the **Data source** to the "`Last Uploaded Files`" state returned by the Wasabi S3 element.
Now in the cells of the repeating group you have access to the data about the files.
### How to retrieve files from Wasabi
#### Retrieve files
First of all, you need to get the files from Wasabi. To do this, use the "`Retrieve Files`" action.
When using this action, information about files from Wasabi is saved to the "`Retrieved Files`" element state.
#### Display retrieved files
Place on the page repeating group. Set the **Type of content** to " `Retrieved File (Wasabi)`", and set the **Data source** to the "`Retrieved Files`" state returned by the Wasabi S3 element.
Now in the cells of the repeating group you have access to the data about the files.
### Work with Lists of any data using ForEach
{% hint style="info" %}
**ForEach** is part of the free **Ultimate Toolkit** plugin. This element allows you to work with each data from the list as with independent data.
[Ultimate Toolkit Plugin](https://bubble.io/plugin/ultimate-toolkit-1562812673262x109396480465567740)
{% endhint %}
In the "`Type`" field, you need to specify the data type of the list.
In the "`List`" field, you must specify a list of data.
Next, you need to start traversing the list
Now we have an event available in which we will work with data
The ForEach element returns the "`Current Item Iterated`" state in which our data is located as if it were an independent value
## Troubleshooting
If you need to create a folder or file with [diacritic ](https://en.wikipedia.org/wiki/Diacritic)you need to use text formatted as URL Encoded:
## Demo to preview the settings
