Skip to main content
Version: 8.0

ImageInput component

Level: beginner

ImageInput is a component that lets you set up an image field on a Freedom UI page. 

Properties

id string

The unique ID. Service field.

value string

The image field value. Can be bound to text or ImageLink attributes, such as, Base64, DataURI or CDN link to an image.

readonly boolean

Whether the field is read-only. By default, false.

visible boolean

Whether the field is visible. By default, true.

positioning string

The image position in the container. By default, cover.

Available values

cover

The image fills the entire element content box with possible cropping. Aspect ratio is preserved.

scale-down

The image fits the boundaries of the element content box without cropping. Aspect ratio is preserved.

size string

The image width and height.

Available values

small

32*32 px

medium

48*48 px

large

80*80 px

extra-large

120*120 px

borderRadius string

The type of corner rounding. By default, medium.

Available values

none

No rounding (0 px).

small

Small rounding (4 px).

medium

Medium rounding (8 px).

large

Large rounding (16 px).

maxFileSize number

The maximum allowed file size.

customHeight string optional

The custom image height in em, px, %, or other units supported by CSS. Fill out both customHeight and customWidth when you customize the dimensions.

customWidth string optional

The custom image width in em, px, %, or other units supported by CSS. Fill out both customHeight and customWidth when you customize the dimensions.

placeholderMode ImagePlaceholderMode optional

The mode of the placeholder. By default, icon.

Available values

abbreviation

Text placeholder.

icon

Icon placeholder.

placeholder string optional

Icon or text placeholder displayed if no image is added to the field. Must be bound to a text attribute if placeholderMode is set to abbreviation. Must be bound to an image from the repository if the placeholderMode is set to icon.