Link to plugin page: https://zeroqode.com/plugin/image-compressor-and-uploader-plugin-for-bubble-1689625829168x127465275726906350
Demo to preview the plugin:
Introduction
Optimize your images by compressing the size before uploading.
A powerful tool to compress and resize large images and then upload them to Bubble or AWS bucket (upload feature integrated)
Works with different formats:
png, jpeg, svg, webp, heic (iOS images)
Features
- Compress image
- Compress image from URL
- Upload to your Bubble app
- Upload directly to AWS S3 bucket
- Select multiple images -Compress multiple images
- Generate multiple thumbnails -Upload multiple images at once
- Convert to png, jpeg, webp
- Rename image before uploading it
- Auto creates a thumbnail
- Set minimum size threshold to convert
- Check the image orientation (jpeg only)
- Add watermark
- Get Image Width/Height
If you don't want to run too many actions, the plugin has one action that combines them all.
- Select Compress and Upload
The best results are on large images.
For example, you could get a 2MB png image and compress it to a 700KB image and you will barely notice the difference between those two images.
All compression work is done in the browser.
Plugin Element Properties
The plugin contains a Compressor visual element that should be used on a page.
Title | Description | Type |
Create thumbnail | Create an even smaller lower quality image to be used as a thumbnail. The result will be in the state "Compressed Thumbnail base64” | Checkbox |
Text | Leave this field empty if watermark is not needed. | Text |
Text Color | Text Color | Color |
Text size | Text size in pixels | Number |
Position | The position of the watermark | Dropdown |
Convert to format | Auto,PNG,JPEG,WEBP | Text |
Element Actions
1. Select and Compress - handles image uploads, compresses them if necessary, and converts HEIC/HEIF formats to a more web-friendly format
Title | Description | Type |
Quality | The quality of the output image. It must be a number between 0 and 1.This option only available for image/jpeg and image/webp images. | Number |
Max width | The max width of the output image. The value should be greater than 0. | Number |
Max height | The max height of the output image. The value should be greater than 0. | Number |
Max file size | If the file is bigger than this amount, it will be converted to jpeg (if it's not jpeg) and compressed. Size in mega bites. | Number |
Check orientation | JPEG image only. If the size of target image is too large (e.g., greater than 10 MB), you should disable this option to avoid out-of-memory crash. | Yes/No |
Threshold to convert | Min file size in MB to convert it, if the file size will be less than this amount, it will not be converted(but still available as base64). Optional field. | Number |
- Upload image - uploads an image
Name | Description | Type |
Image Base64 | Compressed base64 | Text |
New Name | Image new name, will be used the original name if not set. | Text |
- Reset - clears and resets various states and data properties related to image handling within the plugin instance. It ensures that all the relevant image-related information is wiped clean, providing a fresh start for the next image upload and processing actions.
- Compress from URL - fetch an image from a remote URL, handle potential Cross-Origin Resource Sharing (CORS) issues, and compress the image based on specified properties. It updates various states with information about the file and the results of the compression.
Name | Description | Type |
Image URL | The URL of the image to be fetched and processed. | Text |
Image Name | The name to be given to the processed file. | Text |
*For the rest of the fields please see action Select and Compress
- Upload to AWS S3 - facilitates the uploading of an image, converted from a Base64 string, to an AWS S3 bucket
Name | Description | Type |
Bucket name | The name of the AWS S3 bucket. | Text |
Identity Pool Id | The AWS Identity Pool ID. | Text |
Folder name | Optional. The folder path within the S3 bucket. | Text |
Make public | A boolean determining if the uploaded file should be publicly readable. | Yes/No |
Base64 | The Base64 string of the image to be uploaded. | Text |
File name | Image new name, will be used the original name if not set. | Text |
*Note - Make sure that you prepared your AWS properly to use this action. See Prerequisite Tasks in their documentation: https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html
- Select multiple - provides a means for users to select multiple image files from their device. Upon selection, the function triggers an event and updates the plugin’s internal state to hold the selected files.
- Compress multiple - handles the compression of multiple image files selected by user. The images can be standard image formats or in HEIC format, which is commonly used by Apple devices.
*For the fields description please see Select and Compress action
- Upload multiple images - upload multiple images to Bubble server
*Note for the fields description please see Upload image action
- Upload multiple to S3 - uploads multiple base64 encoded images to an Amazon S3 bucket. The images are provided as a list of base64 strings
*Note for field description see Upload to AWS S3 action
Exposed states
Name | Description | Type |
Solo - Compressed Image Width | The width of the compressed image in pixels. It is set after the image is compressed and its dimensions are determined. | Number |
Solo - Compressed Image Height | The height of the compressed image in pixels. Similar to the width, it’s set after determining the dimensions of the compressed image. | Number |
Solo - Size after compress | The size of the compressed image, formatted as a string with an appropriate size unit (Bytes, KB, MB, GB). This is set after the image compression is done. | Text |
Solo - Size after compress Number in MB | The size of the compressed image in MB, as a number. This provides a more precise and programmatically useful value compared to size_after_compress. | Number |
Solo - Compressed image base64 | The base64 string of the compressed image. It is set after the image is compressed and converted to base64 format. | Text |
Compressed Thumbnail base64 | The base64 string of the thumbnail of the compressed image. This is set if thumbnail creation is part of the image processing workflow. | Text |
Thumbnail size | The size of the thumbnail of the compressed image, formatted as a string with size units. It is set after the thumbnail is created. | Text |
Error message | If an error occurs during the image compression process, this state will be set with the error message. | Text |
Solo - File name | The name of the uploaded file. | Text |
Solo - Size before compress | The size of the file before compression. | Text |
Solo - Size before compress Number in MB | The size of the file before compression (in MB). | Number |
Solo - Uncompressed base64 | The Base64 string of the uncompressed image. | Text |
Solo - Uploaded image URL | The URL of the uploaded image, as received from the server. | Text |
Solo - aws s3 URL | The URL of the uploaded image in the S3 bucket. | Text |
List - Compressed Base64 | Array of base64 strings of the compressed images. | List |
List - Compressed Sizes | Array of sizes of the compressed images. | List |
List - Sizes after compress Number in MB | Array of sizes (in MB) of the compressed images. | List |
List - Thumbnails Base64 | Array of base64 strings of the thumbnails (if created). | List |
List - uploaded images URLs | An array of URLs of the uploaded images. | List |
Element Events
Name | Description |
Image uploaded | Triggered once the image has been successfully uploaded. |
Uploaded to S3 | Triggered once the image is successfully uploaded to S3. |
Multiple selected | Triggered once files have been selected. |
Done multiple compression | Done multiple compression |
Done multiple Uploads | Triggered once all images have been uploaded. |
Done compression | Triggered when the image compression (and optionally, thumbnail creation) is completed. |
Error compressing | Triggered if an error occurs during the image compression process. |
Workflow example
- Add the Compressor visual element to the page and adjust the necessary settings
- Run the action "Select and Compress" for example on a button click, a popup window with default file selector will be opened. After selecting the image, the compression will run automatically with given settings.
- When it's done, an event called "Done compression" will be triggered. The compressed image will be available, in base64 format, only after this event will be triggered.Upload the image using action "Upload".Insert the image in base64 format from the state "Compressed image base64" This action will also trigger an event called "Image uploaded"
- Use the Compress element returned states to display information about the compressed file
- The url to the uploaded image will be available in the state "Uploaded image url" and will be available after the event "Image uploaded" was triggered.
Watermark setup:
All settings for the watermark are in the main plugin element. Leave the text field empty if you don't want to use it.
You can access other info through states such as, image size before and after compressing, file name etc.