Adalo Image Cropper
Let users pick a photo from their device gallery, then crop, rotate, flip, and zoom it before saving β right inside your Adalo app. The cropped result is available as a form value or via an On Save action, making it easy to store the image in your database or pass it to other components.
Works on Web, iOS, and Android.
Getting Started
Add the Adalo Image Cropper component to your screen. By default it shows a placeholder area. Tap it to open the image editor.
To pre-load an existing image (for example, a user's current profile photo), connect the Pre-loaded Image property to a database image field. The user can then tap the component to re-crop or replace it.
To save the result, connect either:
On Save action β fires after the user taps Save, with the cropped image available as an action input
Form value β use the component inside a Form to automatically write the cropped image to a database record
Settings
Pre-loaded Image
Connect this to an image field from your database to show an existing photo when the component loads. The user can tap to re-crop or replace it. Leave blank to start with an empty upload area.
Circle Crop
When enabled, the crop overlay is a circle instead of a rectangle. Use this for profile photos or avatar-style images. Pairs best with a square component size.
Output Quality
Controls the JPEG quality of the saved image (10β100%, default 90%). Lower values reduce file size. Values above 90% have diminishing returns on visible quality.
Image Roundness
Rounds the corners of the displayed image. Set to half the component's smallest dimension (e.g. 160 for a 320Γ320 component) to show a circle. The crop modal automatically mirrors this shape β rounded corners show a rounded crop preview; a full circle shows a circular crop overlay.
Border Width
Adds a border around the displayed image. Set to 0 to hide it.
Border Color
Color of the image border.
Preview Fit Mode
Controls how the saved image fills the component bounds:
Fill (crop & center) β image fills the box, cropping edges if needed
Fit (show full image) β image scales to fit entirely within the box, which may show empty space on the sides
On Save
An action that fires after the user taps Save. Two values are available:
Cropped Image β the result after cropping, rotating, and flipping
Original Image β the source image before edits
Use Cropped Image to update a database field or display the result elsewhere.
Toolbar Settings
The Toolbar section controls the look of the edit modal.
Background Color
Background color of the modal sheet. Default is white.
Icon Color / Label Color / Icon Size / Label Size
Style the action buttons (Rotate, Flip, Choose) inside the modal.
Save Button Color / Text Color
Customize the Save button's background and text. Default is blue with white text.
Cancel Button Color / Text Color
Customize the Cancel button's background and text. Default is light gray with dark text.
Choose Button Color / Text Color
Color of the Choose Photo / Choose New button (iOS and Android).
Re-crop Button Color / Text Color
Color of the Re-crop button that appears when an image is already loaded (iOS and Android).
Button Labels
Customize the text on any button:
Save Button Label β default "Save"
Cancel Button Label β default "Cancel"
Re-crop Button Label β default "Re-crop" (iOS / Android)
Zoom Bar Settings (Web)
The Zoom Bar section controls the slider that appears in the web edit modal.
Filled Color / Unfilled Color
Colors of the filled (left) and unfilled (right) portions of the track.
Track Height
Height of the slider track in pixels (2β20, default 4).
Marker Color / Marker Size
Color and size of the draggable thumb.
How It Works
Tapping the component opens a bottom sheet modal with:
A crop area with drag-to-reposition and pinch/scroll-to-zoom
A zoom slider
Rotate Left / Rotate Right buttons (90Β° increments)
Flip Horizontal / Flip Vertical buttons (previewed immediately)
Cancel and Save
The crop area shape automatically mirrors the Image Roundness and Circle Crop settings so you see the final shape before saving.
Tapping the component opens a native bottom sheet with a preview of the current image. Two buttons appear when an image is loaded:
Re-crop β opens the native crop/zoom editor on the existing image
Choose New β opens the device photo library so the user can pick a different photo, then crop it
When no image is loaded, a single Choose Photo button opens the photo library directly.
Tips
Profile photos: Enable Circle Crop, set Image Roundness to half the component size, and use On Save to update the user's profile image field.
Aspect ratio: Resize the component in the editor to set the crop ratio. A square component produces a square crop; a 16:9 rectangle produces a 16:9 crop.
Re-editing: Connect Pre-loaded Image to the saved database field. When the user taps the component, it loads the current image for re-cropping rather than starting blank.
Form use: Place the component inside a Form to skip the On Save action entirely β the cropped image writes to the database automatically when the form is submitted.
Was this helpful?