Image Uploader and Editor
Overview
Image Uploader And Editor is a powerful pluggable widget that enables users to upload, edit, and annotate images directly within your Mendix application. Built with Fabric.js, it provides a smooth canvas-based editing experience with professional-grade tools.
KEY FEATURES
Image Upload
Load images from the local file system with support for common formats including PNG, JPG, and GIF. Images are automatically scaled to fit the canvas for optimal editing.
Drawing Tools
Draw freehand annotations using a customizable brush. Select any color using the built-in color picker. Perfect for marking up images, highlighting areas, or adding handwritten notes.
Text Annotations
Add editable text boxes anywhere on the image. Text can be customized with your chosen color, making it easy to add labels, comments, or descriptions.
Shape Tools
Draw geometric shapes including rectangles, circles, and triangles. Four directional arrows (up, down, left, right) are also available for pointing to specific areas. All shapes support custom colors.
Image Manipulation
Rotate images 90 degrees clockwise or counter-clockwise while preserving all annotations. Crop functionality allows you to select an area and trim the image to that selection.
Export Options
Save the edited image as a Base64-encoded PNG string to a Mendix attribute for database storage. Optionally download the edited image directly as a PNG file. Configure a custom action to execute after saving.
TYPICAL USE CASES
- Document Annotation: Add notes, highlights, and markers to uploaded documents
- Image Review Workflows: Allow reviewers to mark issues or approve images
- Quality Inspection: Mark defects or areas of concern on product photos
- Digital Forms: Capture signatures or handwritten input
- Technical Diagrams: Annotate screenshots or technical images
CONFIGURATION
The widget requires an entity context with an Image attribute for the source and a String attribute to store the Base64 output. Optional settings include showing/hiding the upload and download buttons, and configuring a save action callback.
REQUIREMENTS
- Mendix Studio Pro 10.x
- Web platform (not supported on native mobile)
- Entity context required
TECHNICAL
Built with React 18 and TypeScript. Canvas rendering powered by Fabric.js 6.x for smooth performance and professional editing capabilities.
Documentation
Typical Usage Scenario
The Image Uploader And Editor widget enables users to upload, annotate, and edit images directly within Mendix applications.
Common Use Cases:
- Document Review: Upload documents and add annotations, highlights, or approval marks
- Quality Inspection: Photograph products, circle defects, add arrows pointing to issues
- Customer Service: Annotate screenshots with explanations for customers or developers
- Digital Signatures: Capture handwritten signatures using freehand drawing
- Technical Documentation: Create annotated screenshots with shapes and text labels
Features and Limitations
Features:
- Upload images (PNG, JPG, GIF)
- Freehand drawing with color picker
- Add editable text annotations
- Shape tools: rectangle, circle, triangle, arrows
- Rotate image 90° left/right
- Crop to selected area
- Delete selected objects
- Save as Base64 to Mendix attribute
- Download as PNG file
- Configurable UI (show/hide buttons)
Limitations:
- Fixed canvas size (800x500 pixels)
- Web platform only (no native mobile)
- No undo/redo functionality
- Requires entity context (data view)
Dependencies
Mendix Requirements:
- Mendix Studio Pro 10.x and above
- Web deployment
No additional modules required - all dependencies are bundled in the widget.
Domain Model Requirements:
- Image attribute (source image)
- String attribute with unlimited length (Base64 output)
Installation
- Download the .mpk file from Marketplace
- Copy to your project's "widgets" folder
- Press F4 in Studio Pro to synchronize
- Widget appears in toolbox under "Siemens" category
Configuration
- 1. Place a data view on your page
- 2. Drag the widget into the data view
- 3. Configure properties:
Image to be edited : Select source image attribute
Reference : Select String attribute for Base64 output
Action on Save : Optional microflow/nanoflow
Show Save Button : Enable download functionality
Show Upload Button : Enable image upload
Releases
Bug Fix: External Image Changes Not Reflected in Editor
Issue: When the image property was updated externally (e.g., from a microflow or another data source), the Image Uploader and Editor widget would not detect or display the new image. Users had to manually refresh or re-trigger the widget to see updated images.
Initial release of Image Uploader And Editor widget.
FEATURES:
Image Upload
- Load images from local file system
- Supports PNG, JPG, GIF and other common formats
- Automatic scaling to fit canvas
Drawing & Annotation Tools
- Free-hand drawing with customizable brush
- Color picker for all drawing operations
- Add editable text annotations
Shape Tools
- Rectangle, circle, and triangle shapes
- Four directional arrows (up, down, left, right)
- All shapes support custom colors
Image Manipulation
- Rotate image 90° left or right
- Crop functionality with selection area
- Delete selected annotations
Export Options
- Save edited image as Base64 to Mendix attribute
- Download image as PNG file
- Configure action to execute on save
Configurable UI
- Show/hide upload button
- Show/hide download button
- Custom save action support
TECHNICAL:
- Built with React 18 and Fabric.js 6.x
- Requires entity context (data view)
- Web platform only
- Compatible with Mendix 10.x
CONFIGURATION:
- Image attribute: Source image to edit
- String attribute(Unlimited): Stores Base64 output
- Optional save action callback