Base64img Converter

Complete server and client-side solution for converting images to Base64 and Base64 to data URIs in Bubble

About Plugin

Documentation

Install

Base64 Image Encode/Decode provides three components for complete image conversion capabilities. The server-side Encode Action fetches images using Axios and converts them to Base64 strings using Node.js Buffer, perfect for API integrations and large images. The server-side Decode Action transforms Base64 strings into displayable data URI format ready for image elements. The client-side element uses browser Fetch API and FileReader to perform real-time encoding and decoding without workflow capacity usage, exposing results through reactive states. All components handle format normalization automatically, including Bubble file objects, relative URLs, and data URI prefixes, ensuring reliable conversions across all use cases.

Preview

Go to Editor

Go to Preview

When to Use

Everything you need in a single plugin

api

API Integration

expand_more

Send images to external APIs that require Base64 format. The Encode Action converts uploaded images to Base64 strings that can be included in API Connector requests, webhook payloads, or custom API calls. Perfect for OCR services, image recognition APIs, computer vision platforms, and third-party integrations.

storage

Database Storage

expand_more

Email Embedding

expand_more

flash_on

Real-Time Conversion

expand_more

cloud_off

Offline Applications

expand_more

Benefits

swap_horiz

Dual Processing Options

Choose between server-side actions for reliability and large files, or client-side element for real-time updates and capacity savings. Maximum flexibility for different use cases.

check_circle

Complete Solution

Includes both encoding and decoding in one plugin. Convert images to Base64 for storage and APIs, then decode back to displayable format for UI. Full roundtrip capabilities.

cloud

Server Actions

Backend workflow actions using Axios and Node.js Buffer for reliable processing. Handles large images, CORS restrictions, and secure operations. Returns results accessible in subsequent workflow steps.

bolt

Client Element

Browser-based real-time conversion without workflow capacity usage. Exposes reactive states that update automatically when inputs change. Perfect for UI interactions and rapid conversions.

error_outline

Error Handling

Clear error messages in Portuguese for server actions. Validates URLs, checks file uploads, and handles network failures gracefully. Helps debug issues quickly.

auto_fix_high

Automatic Normalization

Handles Bubble file objects automatically by extracting URL property. Converts relative URLs to absolute. Strips and rebuilds data URI prefixes. No manual formatting required.

integration_instructions

Flexible Integration

Use in workflows, display in UI, store in database, send via API. Results accessible through workflow returns and element states. Integrate seamlessly with any Bubble application architecture.

offline_bolt

No External Dependencies

Self-contained plugin with all required libraries included. No API keys, no external services, no rate limits. Works entirely within your Bubble application environment.

swap_horiz

Dual Processing Options

Choose between server-side actions for reliability and large files, or client-side element for real-time updates and capacity savings. Maximum flexibility for different use cases.

check_circle

Complete Solution

Includes both encoding and decoding in one plugin. Convert images to Base64 for storage and APIs, then decode back to displayable format for UI. Full roundtrip capabilities.

cloud

Server Actions

bolt

Client Element

Browser-based real-time conversion without workflow capacity usage. Exposes reactive states that update automatically when inputs change. Perfect for UI interactions and rapid conversions.

error_outline

Error Handling

Clear error messages in Portuguese for server actions. Validates URLs, checks file uploads, and handles network failures gracefully. Helps debug issues quickly.

auto_fix_high

Automatic Normalization

Handles Bubble file objects automatically by extracting URL property. Converts relative URLs to absolute. Strips and rebuilds data URI prefixes. No manual formatting required.

integration_instructions

Flexible Integration

Use in workflows, display in UI, store in database, send via API. Results accessible through workflow returns and element states. Integrate seamlessly with any Bubble application architecture.

offline_bolt

No External Dependencies

Self-contained plugin with all required libraries included. No API keys, no external services, no rate limits. Works entirely within your Bubble application environment.

swap_horiz

Dual Processing Options

Choose between server-side actions for reliability and large files, or client-side element for real-time updates and capacity savings. Maximum flexibility for different use cases.

check_circle

Complete Solution

Includes both encoding and decoding in one plugin. Convert images to Base64 for storage and APIs, then decode back to displayable format for UI. Full roundtrip capabilities.

cloud

Server Actions

bolt

Client Element

Browser-based real-time conversion without workflow capacity usage. Exposes reactive states that update automatically when inputs change. Perfect for UI interactions and rapid conversions.

error_outline

Error Handling

Clear error messages in Portuguese for server actions. Validates URLs, checks file uploads, and handles network failures gracefully. Helps debug issues quickly.

auto_fix_high

Automatic Normalization

Handles Bubble file objects automatically by extracting URL property. Converts relative URLs to absolute. Strips and rebuilds data URI prefixes. No manual formatting required.

integration_instructions

Flexible Integration

Use in workflows, display in UI, store in database, send via API. Results accessible through workflow returns and element states. Integrate seamlessly with any Bubble application architecture.

offline_bolt

No External Dependencies

Self-contained plugin with all required libraries included. No API keys, no external services, no rate limits. Works entirely within your Bubble application environment.

Key Features

Everything you need in a single plugin

upload

Encode Action

expand_more

Server-side workflow action that converts image URLs to Base64 strings. Uses Axios with ArrayBuffer for reliable binary data handling. Supports Bubble file objects, relative URLs, and automatic format detection. Returns pure Base64 string ready for APIs and database storage.

download

Decode Action

expand_more

Server-side workflow action that converts Base64 strings to displayable data URI format. Strips existing prefixes automatically and rebuilds with PNG format. Fast string manipulation with minimal capacity usage. Returns ready-to-display data URI for image elements.

devices

Client-Side Element

expand_more

Invisible element that performs real-time encoding and decoding in the browser. Exposes two states - Base64 String (encoded result) and Base64 Image (decoded result). Uses Fetch API and FileReader for browser-based processing without workflow capacity consumption.

link

URL Handling

expand_more

Automatically processes Bubble file objects by extracting URL property. Converts relative URLs starting with // to absolute https:// format. Validates URLs before processing. Handles arrays by using first element.

data_object

Data URI Management

expand_more

Intelligently strips existing data URI prefixes using regex pattern. Rebuilds Base64 strings with proper data:image/png;base64, format. Accepts input with or without prefix. Ensures consistent displayable output format.

visibility

Exposed States

expand_more

Client-side element publishes results to accessible states. encoded_base64 state updates when Upload Value changes. decoded_data_uri state updates when Base64 Value changes. Reactive updates enable real-time UI without manual refresh.

Documentation

FAQ

Common questions

helpWhat is the difference between the server actions and client element?

helpWhat image formats are supported?

helpIs there a size limit for images?

helpCan I use Base64 strings from external APIs?

helpDoes the plugin store or upload images anywhere?

helpHow do I display the encoded Base64 string?

helpCan I encode images from external URLs?

helpHow much workflow capacity do the actions use?

helpWhat happens if encoding fails?

helpCan I use this plugin for image storage?

Contato