🔗

Link to plugin page: https://bubble.io/plugin/image-compressor-and-uploader-1597221235969x240651226286129150

Demo to preview the settings

🔗

Demo page: https://ezcodepluginsdemo.bubbleapps.io/image_compressor

🔗

Bubble Editor: https://bubble.io/page?version=live&name=image_compressor&id=ezcodepluginsdemo&tab=tabs-1

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)

❗

NOTE: Converting any image to WEBP will not be possible on iOS devices and Safari browser

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.

How to setup Plugin and Workflow

Place the plugin’s element on the page and fill its fields.

Workflow Step by Step

Select and Compress one image

Reset Compressor A (Testing):

Reset the compressor that is being used to handle the image compression. This ensures the compressor is in a fresh state and ready to handle new images.

Use the Select and Compress Action

1. Set up fields

At this stage, the system prompts you to select an image.

Once an image is selected, the process of compression begins.

Trigger Compression event:

Important: When the image is selected, the compression process will begin.

Use Event: "Image Compressed" – This event triggers after the compression process is complete, but before the image is uploaded to Bubble. At this point, DO NOT attempt to save the image URL to the database. Instead, use this event to indicate that the image is ready for upload.

Wait for the Image Upload:

After the image is compressed, it will be uploaded to Bubble.

Use Event: "Image Uploaded" – This event triggers after the image has been successfully uploaded to Bubble. This is the key event to save the image URL to the database because the upload process is complete, and the image URL is available.

Set States as Uploaded:

After the "Image Uploaded" event fires, update the state to indicate that the image has been uploaded successfully. You can now safely perform any database operations, such as saving the image URL.

Add Further Workflow Steps (Optional):

If you need additional actions (e.g., saving additional data, sending notifications), add them after the "Image Uploaded" event triggers, as this ensures the image is fully processed and available.

Compress from URL

Reset Compressor A (Testing):

As in the previous flow, start by resetting the Compressor A to ensure it's ready for the new task. This clears any previous settings or data in the compressor, allowing it to function properly for the new image compression task

Compress from URL:

1. Set up fields

After this action, the process of compression of the File from the URL begins.

Trigger Compression:

Use Event: "Image Compressed" – This event triggers after the image from the URL has been compressed. This is NOT the time to save the image URL, as the upload process has not yet occurred.

Wait for the Upload:

After the image is compressed, it will be uploaded to Bubble.

Use Event: "Image Uploaded" – This event triggers when the image is successfully uploaded to Bubble. Now, you can save the image URL to the database.

Set States as Uploaded:

After the "Image Uploaded" event fires, you can update the state to indicate that the image is fully uploaded and proceed with any database actions.

Select and Compress multiple images

Reset Compressor A (Testing):

Reset the compressor that is being used to handle the image compression. This ensures the compressor is in a fresh state and ready to handle new images.

Select Multiple Images for Compression:

At this stage, allow users to select multiple images for compression with specific settings like maximum nr of files.

Once the user selects multiple files, you can add a trigger for the event "A Compressor (Testing) Multiple Selected" to signify that multiple images have been chosen.

Compress Multiple Images:

1. Set up fields

This will execute the compression for the selected images using the settings from the fields

Use Event: "Image Compressed" – For each individual image, this event triggers when that specific image has been compressed. At this point, the image is compressed but not yet uploaded.

After compression is complete for a single image, trigger the event “Done Compression" to notify the workflow that compression is complete for the image. or Trigger "Done Multiple Compression" to indicate that all the images have been successfully compressed.

Upload Multiple Images:

After compression, images need to be uploaded.

Use Event: "Image Uploaded" – For each image, this event triggers after the image is successfully uploaded to Bubble. Only after this event should you save the image URL to the database.

Set States as Uploaded:

Use Event: "Done Multiple Uploads" – This event triggers after all images have been successfully uploaded. This ensures the entire process is complete, and you can update any final states or perform any remaining actions.

Events and When to Trigger Them:

"Multiple Selected" – After the user selects multiple images for compression.

"Done Compression" – After an individual image has been successfully compressed.

"Done Multiple Compression" – Once all selected images have been compressed.

“Image Uploaded" – After an individual image is uploaded.

"Uploaded to S3" – If uploading to AWS S3, after an image is successfully uploaded to S3.

"Done Multiple Uploads" – After all compressed images have been uploaded.

"Error Compressing" – If any error occurs during compression.

"Max Number of Files Exceeded" – If the user tries to select more files than allowed.

Plugin element: Compressor

The main and only element of the plugin. If you have trouble understanding some fields, feel free to click “show documentation” under each field.

Plugin element fields

Title	Description	Type
Create thumbnail	A field that requires a checkbox value( true or false), by default it is true. Allows to 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	A optional field that accepts the text that will be used for the watermark of the thumbnail. If you do not want a watermark, it is required to leave this field empty.	Text
Text Color	A optional field for the watermark text color, only color values are accepted. By default it it set to green(#00C851).	Text
Text Size	A optional field for the text size of the watermark in pixels. By default it is set to 80.	Number
Font Family	A optional field used for family font of the watermark. Can be used only fonts that are widely available across different platforms and do not require any additional installation or linking. Some common examples include: Serif Fonts: Times New Roman Georgia Garamond Sans-Serif Fonts: Arial Helvetica Verdana Tahoma Monospace Fonts: Courier New Lucida Console Monaco It's important to note that while these fonts are generally available across different systems, the exact appearance may vary slightly due to different font rendering engines.	Text
Position	A optional dropdown field that sets the position of the watermark on the created thumbnail. By default it is set to “Bottom Left”.	Dropdown
Convert to format	A text field that sets the format of the new compressed image. By default it is set to “JPEG”.	Text

Plugin’s Element States

Title	Description	Type
Solo - Size before compress	The initial image size as a text, such as "1.23 MB".	Text
Solo - File name	Image file name.	Text
Solo - Compressed image base64	Base64 encoded string representing the binary data Blob of the compressed image.	Text
Solo - Size after compress	Image size as a text after compressing.	Text
Solo - Uploaded image URL	URL of the uploaded to the bubble app storage image.	Text
Solo - Uncompressed base64	Base64 encoded string representing the binary data Blob of the initial uploaded image, before compressing.	Text
Solo - aws s3 URL	URL of the uploaded image in Amazon S3, where it can be accessed.	Text
List - Compressed Base64	Base64 encoded strings representing the binary data Blob of the compressed multiple images.	Text
List - Uploaded images URLs	URL’s of the uploaded to the bubble app storage images.	Text
List - Compressed Sizes	Image size as a text of the multiple images after compressing.	Text
List - aws s3 URLs	URL’s of the uploaded images in Amazon S3, where files can be accessed.	Text
Compressed Thumbnail base64	Base64 encoded string representing the binary data Blob of the thumbnail of the uploaded image.	Text
Thumbnail size	The thumbnail version size as a text of the uploaded image.	Text
Solo - Size after compress Number in MB	Image size after compressing as a text.	Number
List - Sizes after compress Number in MB	Sizes of the uploaded images after compression as number value in MB.	Number
Solo - Size before compress Number in MB	Image size before compressing in MB.	Number
Error message	The error message that caused the event "Error compressing" to trigger.	Text
List - Thumbnails Base64	List with Base64 encoded strings of the thumbnail version of the uploaded images.	Text
Solo - Compressed Image Width	The width in pixels of the compressed image.	Number
Solo - Compressed Image Height	The height in pixels of the compressed image.	Number
Number of selected files	The number of selected files for multiple files selection.	Number

Plugin’s Element Events

Title	Description
Done compression	Triggered for every image successful done compression.
Image uploaded	Triggered when the image was successfully uploaded to bubble app storage.
Uploaded to S3	Triggered when the image is successfully uploaded to S3.
Multiple selected	Triggered when multiple files have been selected by the user.
Done multiple compression	Triggered for multiple images successful done compression.
Done multiple uploads	Triggered for multiple images successful uploading to bubble app storage.
Error compressing	Triggered for every failed compression.

Plugin’s Element Actions

1) Select and Compress

2) Upload image

3) Reset

4) Compress from URL

5) Upload to AWS S3

6) Select multiple

7) Compress multiple

8) Upload multiple images

9) Upload multiple to S3

10) Add more

Changelogs

Update 08.23.24 - Version 3.30.0

The upload logic has been changed.

Update 08.08.24 - Version 3.29.0

Minor update (Marketing update) and Updated endpoint for CROSS problem.

Update 03.07.24 - Version 3.27.0

Fixed SVG compression.

Update 12.06.24 - Version 3.25.0

Fixed files upload from "Select multiple" action.

Update 12.03.24 - Version 3.23.0

New action Max Number of Files Exceeded

New fields Max number of files & Enable a maximum number of files in Select Multiple actions

New fields Max number of files & Enable a maximum number of files in Upload multiple actions

Update 20.02.24 - Version 3.22.0

Removed old endpoint from Compress from URL action.

Update 03.01.24 - Version 3.21.0

Create thumbnails for multiple images upload fixed

Update 05.12.23 - Version 3.20.0

minor fixes

Update 05.12.23 - Version 3.19.0

Updated functions “Select Multiple”, “Compress Multiple”, “Upload Multiple Images” to save old photos when adding others

Update 24.11.23 - Version 3.18.0

updated description

Update 15.11.23 - Version 3.17.0

Added "Number of selected files" exposed field

Update 14.11.23 - Version 3.16.0

Added "font family" for watermark

Update 26.10.23 - Version 3.15.0

Added option convert heic to png/jpeg/webp and compress.

Update 18.10.23 - Version 3.14.0

Updated description

Update 18.10.23 - Version 3.13.0

Fixed actions Select and Compress" and "Select multiple"

Update 26.09.23 - Version 3.12.0

added "Threshold to Convert" field to "Select and Compress" & "Compress from URL"

Update 12.09.23 - Version 3.11.0

minor updates

Update 06.09.23 - Version 3.10.0

Obfuscation

Update 04.09.23 - Version 3.9.0

updated description

Update 18.07.23 - Version 3.8.0

updated description

Update 17.07.23 - Version 3.7.0

updated description

Update 22.11.22 - Version 3.6.0

description update

Update 31.10.22 - Version 3.5.0

description update

Update 03.06.22 - Version 3.4.0

Compressor’s solo size fix

Update 14.04.22 - Version 3.3.1

Added Width and Height states for compressed image

Update 14.04.22 - Version 3.3.0

Added "List - Thumbnail" state, when compressing multiple images

Update 31.03.22 - Version 3.2.2

Fixed a bug with multiple file selection

Update 19.01.22 - Version 3.2.1

Fixed a small issue with thumbnail generation.

Update 14.01.22 - Version 3.2.0

Added new event "Error compressing" triggers when something goes wrong while compressing.

Update 08.12.21 - Version 3.1.0

Added Checkbox to enable/disable thumbnail generation. Bugs fixed.

Update 06.12.21 - Version 3.0.0

Added support for Heic format (iOS images). Other overall improvements.

Update 27.09.21 - Version 2.5.0

New feature! Convert any image to jpeg, png or webp format. Check element settings.

Update 31.05.21 - Version 2.4.2

Updated the instruction from the plugin description.

Update 27.05.21 - Version 2.4.1

Fixed a bug with image conversion when compressing from a URL

Update 26.05.21 - Version 2.4.0

New feature: Add watermark text

Update 26.04.21 - Version 2.3.4

Fixed cross-origin errors

Update 07.04.21 - Version 2.3.3

Added ContentType 'image/png' for AWS uploads.

Update 03.03.21 - Version 2.3.2

Fixed a minor bug with multiple upload to S3

Update 02.03.21 - Version 2.3.1

Fixed a bug with incorrect path when uploading to S3

Update 21.02.21 - Version 2.3.0

Added - Check Image orientation (jpeg only). New states with size in Number format.

Update 16.02.21 - Version 2.2.2

Fixed reset action

Update 15.02.21 - Version 2.2.1

Change the image name before upload for Multiple upload action. A suffix with the current image index will be added.

Update 11.02.21 - Version 2.2.0

You can now set a minimum size threshold to convert (When converting multiple images)

Update 08.02.21 - Version 2.1.1

New feature: Thumbnail - will auto-generate a thumbnail to a compressed image that will have a lower resolution and size

Update 08.02.21 - Version 2.1.0

New feature: Upload multiple images to S3. You can now change the image name before uploading it. Bug fixes.

Update 05.02.21 - Version 2.0.2

New state for compress multiple action - Multiple Compressed Sizes.

Update 04.02.21 - Version 2.0.1

Fixed incorrect file naming when converting to jpeg.

Update 19.01.21 - Version 2.0.0

New feature: Select and upload multiple images at once

Update 04.12.20 - Version 1.3.2

Minor improvements for "Compress from URL" action

Update 10.11.20 - Version 1.3.1

Fixed small bug with upload feature.

Update 15.10.20 - Version 1.3.0

New feature - Upload directly to AWS S3 bucket

Update 06.10.20 - Version 1.2.0

New feature - Compress from URL

Update 24.09.20 - Version 1.1.0

Added Reset action

Update 13.08.20 - Version 1.0.0

Release

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. By default it is set to 0.8	Number
Max width	The max width of the output image. The value should be greater than 0. By default it is set to 1920.	Number
Max height	The max height of the output image. The value should be greater than 0. By default it is set to 1920.	Number
Max file size	If the file is bigger than this field amount, it will be converted to jpeg (if it's not jpeg) and compressed. Size in mega bites. By default it is set to 1.	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. Optional field, by default set to “no”.	Yes/No
Threshold to Convert	Min file size in MB to convert it. If the file size will be less than this field amount, it will not be converted(but still available as base64). Optional field.	Number

Title	Description	Type
Image Base64	Base64 encoded string of the image. Get it from the plugin’s states.	Text
New Name	Image new name, will be used the original name if not set.	Text
Attach To Type	Attach To Type	app type
Attach To	Attach To	Attach To Type

Title	Description	Type
Image URL	The URL of the image to be compressed.	Text
Image Name	The name of the new compressed image.	Text
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
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

Title	Description	Type
Bucket name	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	Text
Identity Pool Id	Identity Pool ID for authentication	Text
Folder name	(Optional) Folder name within the S3 bucket for the image to be saved.	Text
Make public	Field indicating whether the uploaded file should be made public. By default it i set to true.	Yes/No
Base64	Base64 encoded string of the image to be saved. Get it from plugin’s element states.	Text
File name	Image new name, will be used the original name if not set.	Text

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
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
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

Image Compressor and Uploader

Demo to preview the settings

Introduction

How to setup Plugin and Workflow

Workflow Step by Step

Select and Compress one image

1. Set up fields

Set Quality:

Max Width and Height:

Max File Size:

Check Orientation:

Compress from URL

1. Set up fields

Image URL:

Image Name:

Set Quality:

Max Width and Height:

Max File Size:

Check Orientation:

Select and Compress multiple images

1. Set up fields

Image URL:

Image Name:

Set Quality:

Max Width and Height:

Max File Size:

Check Orientation:

Events and When to Trigger Them:

Plugin element: Compressor

Plugin element fields

Plugin’s Element States

Plugin’s Element Events

Plugin’s Element Actions

1) Select and Compress

2) Upload image

3) Reset

4) Compress from URL

5) Upload to AWS S3

6) Select multiple

7) Compress multiple

8) Upload multiple images

9) Upload multiple to S3

10) Add more

Changelogs

Update 08.23.24 - Version 3.30.0

Update 08.08.24 - Version 3.29.0

Update 03.07.24 - Version 3.27.0

Update 12.06.24 - Version 3.25.0

Update 12.03.24 - Version 3.23.0

Update 20.02.24 - Version 3.22.0

Update 03.01.24 - Version 3.21.0

Update 05.12.23 - Version 3.20.0

Update 05.12.23 - Version 3.19.0

Update 24.11.23 - Version 3.18.0

Update 15.11.23 - Version 3.17.0

Update 14.11.23 - Version 3.16.0

Update 26.10.23 - Version 3.15.0

Update 18.10.23 - Version 3.14.0

Update 18.10.23 - Version 3.13.0

Update 26.09.23 - Version 3.12.0

Update 12.09.23 - Version 3.11.0

Update 06.09.23 - Version 3.10.0

Update 04.09.23 - Version 3.9.0

Update 18.07.23 - Version 3.8.0

Update 17.07.23 - Version 3.7.0

Update 22.11.22 - Version 3.6.0

Update 31.10.22 - Version 3.5.0

Update 03.06.22 - Version 3.4.0

Update 14.04.22 - Version 3.3.1

Update 14.04.22 - Version 3.3.0

Update 31.03.22 - Version 3.2.2

Update 19.01.22 - Version 3.2.1

Update 14.01.22 - Version 3.2.0

Update 08.12.21 - Version 3.1.0

Update 06.12.21 - Version 3.0.0

Update 27.09.21 - Version 2.5.0

Update 31.05.21 - Version 2.4.2

Update 27.05.21 - Version 2.4.1

Update 26.05.21 - Version 2.4.0

Update 26.04.21 - Version 2.3.4