Image Compressor and Uploader

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.
Image without caption
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
Image without caption
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
  1. Upload image - uploads an image
Image without caption
Name
Description
Type
Image Base64
Compressed base64
Text
New Name
Image new name, will be used the original name if not set.
Text
  1. 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.
Image without caption
  1. 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.
Image without caption
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
  1. Upload to AWS S3 - facilitates the uploading of an image, converted from a Base64 string, to an AWS S3 bucket
Image without caption
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
  1. 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.
Image without caption
  1. 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.
Image without caption
*For the fields description please see Select and Compress action
  1. Upload multiple images - upload multiple images to Bubble server
Image without caption
*Note for the fields description please see Upload image action
  1. Upload multiple to S3 - uploads multiple base64 encoded images to an Amazon S3 bucket. The images are provided as a list of base64 strings
Image without caption
*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

  1. Add the Compressor visual element to the page and adjust the necessary settings
Image without caption
  1. 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.
Image without caption
  1. 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"
Image without caption
  1. Use the Compress element returned states to display information about the compressed file
Image without caption
  1. 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.
Image without caption

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.

Changelogs