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 Plugin and Workflow

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

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