Image Compressor and Uploader

Demo to preview the settings

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.

How to setup

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

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.
Image without caption

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

Select and Compress 

Opens a file input and accepts only a single image that will be compressed accordingly to the plugin’s fields filled.
Image without caption
Action fields:
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

Upload image

Handles the process of uploading the image to your bubble app storage.
Image without caption
Action fields:
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

Reset

Resets all of the plugin element states to their initial empty values.
Image without caption

Compress from URL

Handles a single image compressing from a image URL.
Image without caption
Action fields:
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

Upload to AWS S3

Handle the upload of an image file to an Amazon S3 bucket using the AWS SDK
Image without caption
Action fields:
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

Select multiple

Opens a file input element that is set to accept multiple images. When the user selects files, the state with the total number of selected files is updated with the selected ones, and triggering a 'Multiple selected' event.
Image without caption

Compress multiple

⚠️
“Compress multiple” can not be handled correctly if “Select multiple” was not called to get the value of the selected images that are going to be compressed.
Performs compression of multiple selected image files, generating thumbnails if specified, and publishing base64-encoded compressed images along with their sizes after compression.
Image without caption
Action fields:
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

Upload multiple images

Uploads a list of base64-encoded images to the user Bubble app storage, constructing new filenames and URLs based on the provided properties, and triggers an event upon completion.
Image without caption
Action fields:
Title
Description
Type
Base64 List
Base64 encoded string of the images. Get it from the plugin’s states.
Text
Images new name
Images new name. The original name will be used if not set. A suffix with the image index will be added to differentiate them when uploading multiple images at once.
Text

Upload multiple to S3

Uploads a list of images to an Amazon S3 bucket. It dynamically configures AWS credentials, iterates through a list of base64-encoded images and uploads each file to the specified S3 bucket. When all uploads are completed, it publishes a list of the corresponding S3 URLs and triggers an event signaling the completion of the multiple uploads.
Image without caption
Action fields:
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
Folder name within the S3 bucket for the images to be saved.
Text
Make public
Field indicating whether the uploaded files should be made public. By default it is set to true.
Yes/No
Base64 List
Compressed images list, get it from the Multiple Compressed Base64 state after you selected and compressed them.
Text

Add more

Allows to select multiple images, compresses them to reduce file sizes, and optionally creates thumbnails. The compressed images, their sizes, and thumbnails (if enabled) are then made available for further use. The script is triggered when the user selects multiple images through a file input, and it completes the compression process, notifying the user when finished.

Changelogs

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