About
Image picker is an input control which works with different image managers to provision image input. Image picker provides is used to present images. Image picker displays the image selected while image manager defines the possible actions on image-picker. This decoupled design will let us attach different image-manager's to provide different sets of actions.
Syntax
fr:image-picker
<fr:image-picker id="imageSrc" imageManagerName="imageManager" ref="image-src" validateSize="false"> <xforms:label>Image Picker without size validation:</xforms:label> </fr:image-picker>
Attributes
| height | Height of the image |
| imageAltText | Alternate text if image is not found. A way to provide alt attribute for html image input |
| imageManagerName | Image managers which defines the behavior of the image picker(Check dependencies) |
| validateSize | If set to true will enforce image size validation |
| width | Width of the image |
Dependencies
- Image Manager
Examples
Strict image size validation
<fr:image-picker id="imageSrcTest" imageManagerName="imageManager" ref="image-src" validateSize="true"> <xforms:label>Image Picker with strict size validation:</xforms:label> </fr:image-picker>
Images
Invalid state due to a required a field constraint
Valid state
When uploaded image is bigger than the default size of the image-picker then image-picker presents two new actions to download and magnify the image. These icons are placed at the bottom right corner by default. Download option will download the image and preview will open the image in a dialog as show in the image
