Base64img Converter
Complete server and client-side solution for converting images to Base64 and Base64 to data URIs in Bubble
5
Rating
37
Installs
v1.0.3
Version
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.
When to Use
Everything you need in a single plugin
API Integration
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.
Database Storage
Store small images as text in database fields for easy retrieval without separate file hosting. Encode images to Base64 for storage, then decode back to data URIs for display. Ideal for icons, logos, thumbnails, and small graphics that need to be embedded directly in data records.
Email Embedding
Embed images directly in HTML emails using data URIs. Convert images to Base64, decode to data URI format, and use in email HTML img src tags. Images display without external hosting, no broken links, and work in most email clients for self-contained professional emails.
Real-Time Conversion
Perform instant encoding and decoding in the user interface without workflow delays. The client-side element updates states automatically when images change, perfect for image preview tools, data inspection interfaces, developer tools, and dynamic converters that need immediate visual feedback.
Offline Applications
Build offline-capable Progressive Web Apps by embedding images as Base64. Pre-encode critical images, store Base64 strings in database, and decode to data URIs when displaying. Images work without internet connection, providing full offline functionality and faster loading times.
Benefits
Everything you need in a single plugin
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.
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.
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.
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 Handling
Clear error messages in Portuguese for server actions. Validates URLs, checks file uploads, and handles network failures gracefully. Helps debug issues quickly.
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.
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.
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
Encode Action
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.
Decode Action
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.
Client-Side Element
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.
URL Handling
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 URI Management
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.
Exposed States
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.
Common Questions
Everything you need to know before installing
What is the difference between the server actions and client element?
Server actions run in Bubble's backend using Node.js, consuming workflow capacity but handling large images reliably. The client element runs in the user's browser using JavaScript APIs, processing faster without capacity usage but limited by browser capabilities. Use server actions for large images, backend workflows, and secure operations. Use client element for small images, real-time UI, and capacity savings.
What image formats are supported?
The plugin works with all common web image formats including JPEG, PNG, GIF, WebP, and SVG. The Encode Action fetches images as binary data regardless of format. The Decode Action wraps Base64 in PNG data URI format by default, which browsers handle automatically regardless of the original image format.
Is there a size limit for images?
Server-side actions can handle larger images but may timeout on very large files (greater than 10MB). Client-side element is limited by browser memory and best suited for images under 1-2MB. Base64 encoding increases data size by approximately 33 percent, so consider final size when storing in database or sending via API.
Can I use Base64 strings from external APIs?
Yes, the Decode Action accepts Base64 strings from any source including API responses, database fields, and custom states. It automatically cleans the input by stripping data URI prefixes if present, so it works with Base64 strings in any format.
Does the plugin store or upload images anywhere?
No, the plugin only performs conversion operations. Server actions fetch and convert images in memory without storage. Client element processes in browser without uploads. The resulting Base64 strings exist only where you choose to save them (database, custom state, etc).
How do I display the encoded Base64 string?
Base64 strings are text and cannot be displayed directly as images. To display, use the Decode Action or client element to convert the Base64 string to a data URI, then set an image element's dynamic image source to the data URI result.
Can I encode images from external URLs?
Yes, both server actions and client element can encode images from any accessible URL. Server actions bypass CORS restrictions by fetching server-side. Client element is subject to browser CORS policies, so external URLs must allow cross-origin requests or use server action instead.
How much workflow capacity do the actions use?
The Encode Action uses approximately 0.1-0.5 workflow units per conversion depending on image size. The Decode Action uses about 0.05 workflow units as it only performs string manipulation. The client-side element uses zero workflow capacity as it runs in the browser.
What happens if encoding fails?
The server actions throw clear error messages in Portuguese - no file uploaded, invalid URL, or conversion error. Check that image URLs are valid, images are uploaded, and URLs are accessible.
Can I use this plugin for image storage?
Base64 encoding is suitable for storing small images (icons, logos, thumbnails under 200KB) as text in database fields. For larger images, traditional file storage is more efficient. Base64 increases data size by 33 percent and can significantly grow database size, so use judiciously for appropriate use cases.