Skip to content

Component library

Image Picker component

Last updated 2 November 2026

Defines an image input field and preview. Field supports `image/jpeg` and `image/png` type files.

Live demo

<ins-image-picker
  img-type="Image"
  button-color="green"
  placeholder="Drag image here"
  upload-img-container="rectangle"
  upload-img-rec-width="100"
  upload-img-rec-height="100"
  upload-img-rec-file-size="10"
  upload-img-rec-file-size-type="MB"
  upload-img-file-formats="JPG or PNG"
  error-message="Please choose a valid image file."
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-image-picker>

Attributes

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
img-type string "picture" any Defines the button label text as "Add/Change" + img-type value
button-color string "blue" any Defines outline color of button
placeholder string "Drag and drop the file or add an image" any Defines the field placeholder
not-image-file boolean false true, false Attribute to display error on the modal input field if file being attached is not an image
upload-img-container string "" square, rectangle Make the image picker to be rectangular
upload-img-rec-width number 120 integer Define the text for recommended image width in px
upload-img-rec-height number 120 integer Define the text for recommended image height in px
upload-img-rec-file-size number 25 integer Define the text for recommended file size
upload-img-rec-file-size-type string KB KB or MB Define the text for recommended file size type
value any "" any Defines the field image value
upload-img-file-formats string "JPG, JPEG, PNG or SVG" JPG, JPEG, PNG or SVG Defines the accepted image format
error-message string "Invalid image file." any Defines the error message.
file-name any "" any Defines the file name value
tooltip string "" - Displays a tooltip beside the label. Supports HTML Content

Events

EVENT OBJECT DESCRIPTION
insValueChange base64, filename Emits image base64 and filename on field value change

Examples

Default State

<ins-image-picker></ins-image-picker>

Direct Value Set

<ins-image-picker 
  id="directSetImage">
</ins-image-picker>

<script>
  var image = 'https://files.prod01-insites.io/instances/302/assets/modules/ins_assets/old-site/property_uploads/modules/insites_assets/assets_upload/asset/dc48131b-09d7-451a-82b2-c624a970d5df/logo-3%402x.png?updated=1721870946';
  var fileName = 'Sample Logo';
  var imageField = document.getElementById('directSetImage');
  imageField.addEventListener('didLoad', function(e){
    imageField.imgType = "Icon";
    imageField.buttonColor = "green";
    imageField.uploadImgContainer = "square";
    imageField.value = image;
    imageField.fileName = fileName;
  });
</script>

Events

<ins-image-picker 
  id="eventImageField">
</ins-image-picker>

<script>
  let field = document.getElementById('eventImageField');
  field.addEventListener('insValueChange', event => {
    console.log("filename", event.detail.filename);
    console.log("base64", event.detail.base64);
    alert("check console logs for file data");
  });
</script>