How to create a photo-editing tool in Bubble.io: Step-by-Step Guide

Go to the Plugins tab and click 'Add plugins.' Search for 'Toolbox' and install it. This plugin provides the 'Run JavaScript' action and 'JavaScript to Bubble' element that lets your HTML code send data back to Bubble workflows. Without this, you cannot save edited images back to your database.

On your photo editing page, add a File Uploader element for users to select an image. Below it, add an Image element with its source set to 'File Uploader's value.' Add a Button labeled 'Edit This Photo.' This gives users a preview of their uploaded image before they enter the editor.

Drag an HTML element onto the page and make it large (at least 800x600px). Double-click it and paste the code that loads the Toast UI Image Editor from a CDN and initializes it. The editor provides crop, rotate, flip, draw, text, filter, and resize tools. Set the initial image source to a placeholder — you will update it dynamically in the next step.

1<link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">
2<script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
3<div id="tui-image-editor" style="width:100%;height:600px;"></div>
4<script>
5  var editor = new tui.ImageEditor('#tui-image-editor', {
6    includeUI: {
7      loadImage: {
8        path: '',
9        name: 'Uploaded Image'
10      },
11      theme: {},
12      menuBarPosition: 'bottom'
13    },
14    cssMaxWidth: 800,
15    cssMaxHeight: 600
16  });
17
18  window.loadImageToEditor = function(url) {
19    editor.loadImageFromURL(url, 'Uploaded Image').then(function() {
20      editor.clearUndoStack();
21    });
22  };
23
24  window.getEditedImage = function() {
25    return editor.toDataURL();
26  };
27</script>

On the 'Edit This Photo' button workflow, add an action: Run JavaScript (from the Toolbox plugin). In the script field, enter: window.loadImageToEditor('File Uploader's value's URL'). Use the dynamic data inserter to reference the File Uploader's value. This sends the uploaded image URL to the JavaScript editor.

Add a 'JavaScript to Bubble' element from the Toolbox plugin (it is invisible). Set its bubble_fn_suffix to 'edited_image' and value type to 'text.' Add a Button labeled 'Save Edited Photo.' Its workflow: Run JavaScript → script: var dataUrl = window.getEditedImage(); bubble_fn_edited_image(dataUrl); This sends the base64 image data to Bubble. Then add a second action that uses a backend workflow or the 'Upload data as file' plugin action to convert the base64 data to an actual file and save it to the current user or a database record.